HTML——博客页面布局
HTML文件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML blog</title> <link href="css/blog.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <div class="header"> <h1>KSC 工作室</h1> <p>http://blog.csdn.net/sunshumin</p> </div> <div class="content"> <div class="navBar"> <ul> <li><a href="#">首页</a></li> <li><a href="#">博客</a></li> <li><a href="#">文章</a></li> <li><a href="#">帮助</a></li> </ul> </div> <div class="sidebarLeft"> <div class="frame"> <div class="title">个人资料</div> <div style="text-align: center;"> <img src="img/psb.jpg" width="80px"/> <p style="font-size: 1.2em;color: #aaf;font-weight: bold;">黄某某</p> </div> </div> <div class="frame"> <div class="title">博客文章</div> <ul class="list"> <li>HTML 简单介绍</li> <li>HTML 基本概念</li> <li>HTML 文档结构</li> <li>HTML 编辑器介绍</li> <li>基本元素介绍</li> <li>超链接图片</li> <li>图片元素</li> </ul> </div> </div> <div class="sidebarRight"> <div class="frame"> <div class="title">我的好友</div> <ul class="list"> <li>张琨</li> <li>黄超</li> <li>戴敏</li> <li>李梅</li> <li>刘娜</li> <li>王月</li> </ul> </div> <div class="frame"> <div class="title">友情链接</div> <ul class="list"> <li>张琨的博客</li> <li>黄超的博客</li> <li>戴敏的博客</li> <li>李梅的博客</li> <li>刘娜的博客</li> <li>王月的博客</li> </ul> </div> <div class="frame"> <div class="title">訪客统计</div> <ul class="list"> <li>总共訪问量:21310 人</li> <li>今日訪问量: 340 人</li> </ul> </div> </div> <div class="mainContent"> <div class="frame"> <div class="title">博文</div> <div style="padding: 5px;"> <h3>大家好。这是我的第一篇博客</h3> <p style="text-indent: 2em;">我已经在BLOG安家了,欢迎你“常过来看看”。大家多多交流哦。我们能够一起把这里变成共同的心灵家园,像家一样温暖的地方。</p> <p style="text-indent: 2em;">我会把一些有趣的东西记录下来。我会把一些有趣的东西记录下来。
我会把一些有趣的东西记录下来。我会把一些有趣的东西记录下来。我会把一些有趣的东西记录下来。
我会把一些有趣的东西记录下来。我会把一些有趣的东西记录下来。 我会把一些有趣的东西记录下来。
我会把一些有趣的东西记录下来。我会把一些有趣的东西记录下来。
我会把一些有趣的东西记录下来。我会把一些有趣的东西记录下来。我会把一些有趣的东西记录下来。我会把一些有趣的东西记录下来。我会把一些有趣的东西记录下来。 我会把一些有趣的东西记录下来。
</p> <p style="text-indent: 2em;">我的BLOG地址:http://blog.csdn.net/sunshumin</p> </div> </div> </div> <div class="footer"> <p>BLOG意见反馈留言板 不良信息反馈 电话:18865513351欢迎批评改正</p> <p>简单介绍 |关于我们|广告服务|联系我们|招聘信息|站点律师|会员注冊|产品答疑 </p> <p>Copyright © 2013 - 2014 HTML Corporation,All Rights Reserveds</p> <p>KSC工作社 版权全部</p> </div> </div> </div> </body> </html>
CSS文件
@charset "utf-8"; body{ margin: 0; padding: 0; text-align: center; font-size: 13px; background-image:url(../img/Default.jpg); } .container{ width: 778px; margin: 0 auto; text-align: left; } .header{ padding-top: 40px; padding-bottom: 20px; padding-left: 50px; } /*导航菜单*/ .navBar{ position: relative; height: 30px; width: 100%; } .navBar ul{ position: relative; margin: 0; padding: 0; height: 30px; background: url(../img/导航.png) 0px -30px repeat-x; } .navBar ul li{ width: 15%; padding: 0; margin: 0; list-style: none; float: left; height: 30px; display: inline;/*设置显示方式*/ } .navBar ul li a{ font: 12px Arial; color: white; text-decoration: none; line-height: 30px; display: block; background-image: url(../img/导航.png) 100% -60px no-repeat; padding: 0 17px 0 15px; } .navBar ul li a:hover{ text-decoration: underline; } .navBar .left{ position: absolute; top: 0px; left: 0px; width: 10px; height: 30px; display: block; z-index: 1; background: url(../img/导航.png) 0% 0px no-repeat; } .navBar .right{ position: absolute; top: 0px; right: 0px; width: 10px; height: 30px; display: block; z-index: 1; background: url(../img/导航.png) 100% -90px no-repeat; } /*側边栏*/ .sidebarLeft{ float: left; width: 200px; } .sidebarRight{ float: right; width: 200px; } /*小面板*/ .frame{ width: 100%; margin-bottom: 15px; background-color: white; border: solid 1px gray; } .title{ margin: 1px; margin-bottom: 5px; padding: 4px; font-weight: bold; background-color: #66cccc; } /*文章、好友列表*/ .list{ list-style-type: none; padding: 5px; margin: 0 auto; } .list li{ padding: 3px; border-bottom: dotted 1px #aaf; } .mainContent{ width: 370px; margin: 0 auto; } .footer{ clear: both; position: relative; padding: 10px 0; text-align: center; color: #eee; }
版权声明:本文博客原创文章,博客,未经同意,不得转载。