这片文章主要是介绍通过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.php.cn</p> <p class = "us1">400-100-200</p> <p class = "oo1">京ICP证00000000号</p> <p class = "oo2">关于|招聘|广告服务</p> </div> </div> </div> </div> </body> </html>相关推荐：
新手如何通过Vue.js + Node.js打造个人博客
WordPress搭建个人博客
node.js博客项目开发经验分享
html和csss实现简单博客代码分享
