实战之仿博客网页

来源：希系情感
这片文章主要是介绍通过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"> www.gxlcms.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>