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.****.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.****.net/sunshumin</p>

						</div>

					</div>

				</div>

				<div class="footer">

					<p>BLOG意见反馈留言板    不良信息反馈    电话：18865513351欢迎批评改正</p>

					<p>简单介绍 |关于我们|广告服务|联系我们|招聘信息|站点律师|会员注冊|产品答疑 </p>

					<p>Copyright &copy; 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;

}

秒客网

HTML——博客页面布局

相关文章