仿博客页面写了一个 简单的页面代码
我的博客 http://zyhyangliu.com
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: rgb(205, 174, 153);
}
.header{
width: 1200px;
height: 100px;
background-color: rgb(66, 83, 207);
margin: 0 auto;
text-align: left;
line-height: 100px;
font-size: 60px;
padding-left: 10px;
padding-right : 10px;
margin-top: 10px;
}
.header div{
float: right;
line-height: 100px;
color: white;
font-size: 10px;
}
.side{
background-color: white;
width: 250px;
height: 1000px;
float: right;
margin-right: 40px;
line-height: 80px;
}
.content{
background-color: white;
width: 1200px;
height: 300px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
margin-top: 15px;
}
.foot{
background-color: black;
width: 1200px;
height: 30px;
margin: 0 auto;
padding: 10px;
line-height: 30px;
color: white;
text-align: center;
}
.th{
background-color: white;
width: 1200px;
height: 300px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="side">
<h1>这里是侧边栏</h1>
<hr>
<h3>下面可以添加内容</h3>
<hr>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
<hr>
</div>
<div class="header">
ZYH_css
<div>
首页 | 留言 | 联系我
</div>
</div>
<div class="content">
<h1>这是我的第一篇文章</h1>
<hr>
<p>下面这些可以是文章的内容......</p>
</div>
<div class="content">
<h1>这是我的第二篇文章</h1>
<hr>
<p>下面这些可以是文章的内容......</p>
</div>
<div class="th">
<h1>这是我的第三篇文章</h1>
<hr>
<p>下面这些可以是文章的内容......</p>
</div>
<div class="foot">
By zyh_Test | css 2019
</div>
</body>
</html>
