HTML——博客网页布局

浏览数：22 / 时间：2015年06月09日

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 &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——博客网页布局