简单做了一个blog首页
/* html部分 */
<!DOCTYPE html> <html> <head> <title>我的博客</title> <link rel="stylesheet" type="text/css" href="myblog.css"> </head> <body> <div id="container"> <div id="globallink"> <ul> <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> </ul> </div> <div id="parameter"> <div id="author"> <p class="mypic"><img src="mypic.jpg"></p> <p>子木永恒的BLOG</p> </div> <div id="lcategory"> <h4 class="categroy"><span>我的文章分类</span></h4> <ul> <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> </ul> </div> <div id="lcomment"> <h4 class="comment"><span>最新评论</span></h4> <ul> <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> </ul> </div> <div id="lfriend"></div> </div> <div id="main"> <div class="article"> <h3><a href="">从游戏里的江湖截下来的片段</a></h3> <p class="author">basic @ 2017-05-21 18.45.29</p> <p class="content">一切啊，都得重新开始！<br> 只不过没有当时那么的逗了，现在升级可快了。<br> 我马上就加了一个帮会，帮会里的人可活跃了，我一上游戏，就挂在YY里面和他们侃天说地，扯嘴皮子一直到吃饭，甚至边吃边扯。感觉和他们聊天可有意思了，原来他们知道那么多啊！我就拜了其中的一个玩了好久的人为师，我还算运气好，这个“师傅”并没有像别人那样不耐烦，还要生活自理啊什么的，我有疑问去问他，他一般都能给我解答，我都快叫他“人生导师”了。<br> 他几乎一整天都在线，只要我找他，他都基本在线。有一次，我问他，“你怎么那么多时间都在游戏啊，你不上班吗？”<br> 他没有直接回答，而是反问我，“你不也一样吗？你不也天天在线？”<br> 我回答说，“我还是学生啊，现在放暑假了哇！”<br> 这次，他的回复有点慢，”都暑假了啊，真羡慕啊！“<br> 我取笑他，“你这是有多老啊，又不是没当过学生，干吗把自己说的那么沧桑。”<br> “我初中毕业。”<br> 看到这行，我竟不知道怎么回复他了，只能回了句“这样啊……”。<br> 后来聊着聊着，我知道了更多关于他的事情。<br> 我当时还很，嗯，算无知吧，还不知道游戏是可以赚RMB的，他告诉我他其实是一个代练，一天24小时起码有18个小时在线的，只为了完成更多的订单。<br> 我很惶恐，问他我经常这么烦他会不会嫌弃我啊。<br> 他倒是没当回事，就说了句，“有什么关系，朋友嘛！”<br> 我当时还是挺感动的。<br> 或许在游戏里面就是这样的吧，偶然认识，相处之后就像是认识了很久的朋友一样。</p> <p class="show">浏览[0] 评论[0]</p> </div> </div> <div id="footer"> <p>更新时间：2017-05-21 ©All Rights Reserved</p> </div> </div> </body> </html>
/* CSS部分*/
/* 主体部分*/ body{ font-family: Arial,Helvetica,sans-serif; font-size: 12px; margin: 0px; padding: 0px; text-align: center; background-color: #000000; } #container{ position: relative; margin: 1px auto 0px auto; width: 760px; text-align:left; background-color: #FFFFFF; border-left: 1px dashed #AAAAAA; border-right: 1px dashed #AAAAAA; border-bottom: 1px dashed #AAAAAA; } /* 导航与banner*/ #globallink{ width: 760px; height: 163px; margin: 0px; padding: 0px; background: #9ac7ff url(banner.jpg) no-repeat top; font-size: 12px; } #globallink ul{ list-style-type: none; position: absolute; width: 417px; left: 400px; top: 145px; padding: 0px; margin: 0px; } #globallink li{ float: left; text-align: center; padding: 0px 6px 0px 6px;/* 链接之间的距离*/ } #globallink a:link,#globallink a:visited{ color: #004a87; text-decoration: none; } #globallink a:hover{ color: #FFFFFF; text-decoration: underline; } /* 左侧列表*/ #parameter{ position: relative; float: left; width: 210px; padding: 0px; margin: 0px; } #parameter div ul{ list-style: none; margin: 5px 15px 0px 15px; padding: 0px; } #parameter div ul li{ padding: 2px 3px 2px 15px; border-bottom: 1px dashed #999999; } #parameter div ul li a:link;#parameter div ul li a:visited{ color: #000000; text-decoration: none; } #parameter div ul li a:hover{ color: #008cff; text-decoration: underline; } /* 内容部分*/ #main{ float: left; position: relative; font-size: 12px; margin: 0px 20px 5px 20px; width: 510px; } #main div{ position: relative; margin: 20px 0px 30px 0px; } #main div h3{ font-size: 15px; margin: 0px; padding: 0px 0px 3px 0px; border-bottom: 1px dotted #999999; } #main div h3 a:link,#main div h3 a:visited{ color: #662900; text-decoration: none; } #main div h3 a:hover{ color: #0072ff; } #main p.author{ margin: 0px; text-align: right; color: #888888; padding: 2px 5px 2px 0px; } #main p.content{ margin: 0px; padding: 10px 0px 10px 0px; } /* footer脚注*/ #footer{ clear: both; text-align:center; background-color: #daeeff; margin: 0px; padding: 0px; color: #004a87; } #footer p{ margin: 0px; padding:2px; }
效果图：
注：里面的图片和文章内容均来自于网络！
