这片文章主要是介绍通过html和css模仿编写的一个简单的博客网页，感兴趣的朋友参考下。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>myBlog</title>
<style>
body{
margin:0;
padding:0;
}
#container{
width:1349px;
height:1500px;
background-color:#eee;
}
#header{
background-color:white;
height:50px;
width:1349px;
}
#header .title li{
height:50px;
line-height:50px;
font-size:15px;
margin-left:20px;
margin-right:10px;
list-style-type:none;
float:left;
}
.title li a:link{
color:black;
text-decoration:none;
}
.title li a:hover{
color:red;
}
#header .subtitle li {
line-height:50px;
float:left;
list-style-type:none;
font-size:15px;
margin-right:10px;
color:black;
}
.subtitle li a:link{
color:black;
text-decoration:none;
}
.subtitle li a:hover{
color:red;
}
#main{
width:1349px;
height:1500px;
background-image:url(./images/bkg.jpg);
}
#main h{
margin:50px 900px 50px 80px;
font-size:40px;
font-weight:700px;
float:left;
}
#main .mana li {
float:left;
margin-right:20px;
margin-top:40px;
list-style-type:none;
font-size:15px;
color:white;
}
.mana li a{
border:1px solid white;
padding:2px;
color:white;
text-decoration:none;
}
.mana a:hover{
background:red;
color:white;
}
#lside{
width:800px;
height:700px;
background:white;
margin:0px 50px 50px 80px;
padding:5px;
float:left;
}
#rside{
width:300px;
height:1000px;
background:white;
float:left;
}
#state h{
margin:20px 400px 20px 15px;
color:#999;
font-size:18px;
border:1px solid gray;
padding:2px;
font-family:'PingFang SC','Microsoft YaHei',SimHei,Arial,SimSun;
}
#state img{
margin:20px 20px 10px 15px;
}
#artitlrtitle h{
font-size:20px;
font-weight:700px;
margin:10px 200px 10px 15px;
float:left;
clear:both;
}
#content p{
font-size:10px;
margin:5px 15px;
clear:both;
color:#999;
}
#time h{
margin:3px 10px 5px 15px;
font-size:15px;
float:left;
color:#999;
}
#time .oth{
margin:3px 10px 5px 15px;
font-size:15px;
float:left;
color:#999;
}
#head img{
margin:15px;
}
#head p{
float:left;
font-size:20px;
margin:30px 10px;
font-weight:700px;
color:#999;
font-weight:600px;
}
#four .yuan{
font-size:16px;
font-weight:700px;
margin:5px 10px 10px 40px;
color:gray;
float:left;
}
#four .num1{
font-size:14px;
font-weight:700px;
margin:5px 6px 20px 51px;
color:#999;
}
#four .num2{
font-size:14px;
font-weight:700px;
margin:5px 7px 20px 50px;
color:#999;
}
#four .num3{
font-size:14px;
font-weight:700px;
margin:5px 7px 20px 46px;
color:#999;
}
#four .num4{
font-size:14px;
font-weight:700px;
margin:5px 7px 20px 29px;
color:#999;
}
#intro{
height:260px;
width:300px;
margin-top:10px;
}
#intro .ff{
font-size:10px;
margin:5px 20px;
clear:both;
}
#fenlei h{
font-size:15px;
font-weight:700px;
float:left;
margin:10px 20px;
font-weight:700px;
}
#fenlei p .ti1 {
float:left;
clear:left;
font-size:10px;
margin:5px 20px;
color:gray;
text-decoration:none;
}
#fenlei p .ti1:hover{
color:red;
}
#fenlei .tii1{
float:right;
clear:right;
font-size:8px;
margin:5px 20px;
color:#bbb;
}
#cundang h{
font-size:15px;
font-weight:700px;
float:left;
clear:left;
margin:20px 20px;
}
#cundang p .ti1{
float:left;
clear:left;
font-size:10px;
margin:5px 20px;
color:gray;
text-decoration:none;
}
#cundang p .ti1:hover{
color:red;
}
#cundang .tii1{
float:right;
clear:right;
font-size:8px;
margin:5px 20px;
color:#bbb;
}
#paiming h{
font-size:15px;
font-weight:700px;
float:left;
clear:left;
margin:20px 20px;
font-weight:700px;
}
#pm .tiname{
float:left;
clear:left;
font-size:15px;
margin:5px 20px;
color:gray;
text-decoration:none;
}
#pm .tiname:hover{
color:red;
}
#pm .tinum{
float:left;
clear:left;
font-size:8px;
margin:3px 20px;
color:#bbb;
}
#callus h{
font-size:15px;
font-weight:700px;
float:left;
clear:left;
margin:20px 20px;
font-weight:700px;
}
#callus .us{
font-size:10px;
margin:5px 2px 5px 20px;
float:left;
clear:left;
}
#callus .weibo{
font-size:10px;
margin:5px 5px;
padding-right:80px;
float:right;
clear:right;
}
#callus .us1{
font-size:10px;
margin:5px 20px;
float:left;
clear:left;
}
#callus .oo1{
margin:40px 80px 10px 80px;
font-size:10px;
float:left;
clear:left;
}
#callus .oo2{
margin:10px 80px 10px 80px;
font-size:10px;
float:left;
clear:left;
}
</style>
<!-- <link rel = "stylesheet" type = "text/css" href = "blog.css"> -->
</head>
<body>
<div id = "container">
<div id = "header">
<div id = "firstpic" >
<img a href = "" src = "./images/csdn.jpg" alt = "" width="80" height="50" style="float:left"></a>
</div>
<div id = "menu">
<ul class = "title" >
<li><a href = "#" >博客</a></li>
<li><a href = "#" >学院</a></li>
<li><a href = "#" >下载</a></li>
<li><a href = "#" >GitChat</a></li>
<li><a href = "#" >论坛</a></li>
<li><a href = "#" >问答</a></li>
<li><a href = "#" >商城</a></li>
<li><a href = "#" >头条</a></li>
<li><a href = "#" >活动</a></li>
<li><a href = "#" >码云</a></li>
<li><a href = "#" style = "margin-right:150px">ITeye</a></li>
</ul>
</div>
<div id = "secondpic" >
<img id = "search" src = "./images/search.jpg" alt = "" height="40" width = "200" style="float:left" >
</div>
<div id = "other">
<ul class = "subtitle" >
<li><a href = "#" style="margin-left:23px">写博客</a></li>
<li><a href = "#" style="margin-left:23px">发Chat</a></li>
</ul>
</div>
<div id = "thirdpic">
<img a href = "" src = "./images/c.gif" alt = "" width = "50" height = "50" style="float:left"></a>
</div>
</div>
<div id = "main">
<h>我的博客</h>
<ul class = "mana">
<li><a href = " " >修改个人资料</a></li>
<li><a href = " " >管理博客</a></li>
</ul>
<div id = "lside">
<div id = "state">
<h>只看原创</h>
<div id = "fourthpic">
<img src = "./images/search.jpg" alt = "" >
</div>
</div>
<div id = "artitlrtitle">
<h > listview实现列表</h>
</div>
<div id = "content">
<p>listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.</p>
</div>
<div id = "time">
<h>原创</h>
<p class = "oth">2018-01-01 00:00:00</p>
<p class = "oth">阅读量：1000</p>
<p class = "oth">评论：2</p>
</div>
<div id = "artitlrtitle">
<h>listview实现列表</h>
</div>
<div id = "content">
<p>listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.</p>
</div>
<div id = "time">
<h>原创</h>
<p class = "oth">2018-01-01 00:00:00</p>
<p class = "oth">阅读量：1000</p>
<p class = "oth">评论：2</p>
</div>
<div id = "artitlrtitle">
<h>listview实现列表</h>
</div>
<div id = "content">
<p>listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.</p>
</div>
<div id = "time">
<h>原创</h>
<p class = "oth">2018-01-01 00:00:00</p>
<p class = "oth">阅读量：1000</p>
<p class = "oth">评论：2</p>
</div>
<div id = "artitlrtitle">
<h>listview实现列表</h>
</div>
<div id = "content">
<p>listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.</p>
</div>
<div id = "time">
<h>原创</h>
<p class = "oth">2018-01-01 00:00:00</p>
<p class = "oth">阅读量：1000</p>
<p class = "oth">评论：2</p>
</div>
<div id = "artitlrtitle">
<h>listview实现列表</h>
</div>
<div id = "content">
<p>listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.</p>
</div>
<div id = "time">
<h>原创</h>
<p class = "oth">2018-01-01 00:00:00</p>
<p class = "oth">阅读量：1000</p>
<p class = "oth">评论：2</p>
</div>
</div>
<div id = "rside">
<div id = "head">
<img a href = "" src = "./images/c.gif" alt = "" width = "50" height = "50" style="float:left"></a>
<p>XXX</p>
<div id = "four">
<p class = "yuan" style="word-spacing:22px;text-indent:6px;">原创 粉丝 喜欢 码云 </p>
<p class = "num1" > 8 </p>
<p class = "num2" > 8 </p>
<p class = "num3" > 8 </p>
<p class = "num4"> 未开通 </p>
</div>
</div>
<div id = "intro">
<p class = "ff" >访问量： 1000 </p>
<p class = "ff" >等级： 2 </p>
<p class = "ff" >排名： 10000 </p>
<p class = "ff" >勋章： 恒 </p>
</div>
<div id = "fenlei">
<h>文章分类 </h>
<p><a class = "ti1" href = "#" > Android</a></p>
<p class = "tii1">8篇</p>
<p><a class = "ti1" href = "#" > CSS </a></p>
<p class = "tii1">8篇</p>
<p><a class = "ti1" href = "#" > JAVA </a></p>
<p class = "tii1">8篇</p>
</div>
<div id = "cundang">
<h>文章存档 </h>
<p><a class = "ti1" href = "#" > 2017年10月</a></p>
<p class = "tii1">2篇</p>
<p><a class = "ti1" href = "#" > 2018年01月 </a></p>
<p class = "tii1">2篇</p>
<p><a class = "ti1" href = "#" > 2019年03月 </a></p>
<p class = "tii1">6篇</p>
</div>
<div id = "paiming">
<h>阅读排名</h>
<div id = "pm">
<p><a class = "tiname" href = "#">css链接</a></p>
<p class = "tinum">阅读量：200</p>
</div>
<div id = "pm">
<p><a class = "tiname" href = "#">css链接</a></p>
<p class = "tinum">阅读量：200</p>
</div>
<div id = "pm">
<p><a class = "tiname" href = "#">css链接</a></p>
<p class = "tinum">阅读量：200</p>
</div>
</div>
<div id = "callus">
<h>联系我们</h>
<p class = "us">网站客服</p>
<p class = "weibo"> 微博客服</p>
<p class = "us1"> m.sbmmt.com</p>
<p class = "us1">400-100-200</p>
<p class = "oo1">京ICP证00000000号</p>
<p class = "oo2">关于|招聘|广告服务</p>
</div>
</div>
</div>
</div>
</body>
</html>相关推荐：
Atas ialah kandungan terperinci 实战之仿博客网页. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
penghasilan laman web html
Halaman web dibuka perlahan-lahan
tidak boleh membuka laman web
Apa yang perlu dilakukan jika halaman web tidak boleh diakses
Cara membuat blog
Bagaimana untuk menyediakan muat semula automatik halaman web
HTML untuk membuat halaman web
Bagaimana untuk membuka php dalam halaman web
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
