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;
}
版权声明：本文博客原创文章，博客，未经同意，不得转载。
