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 &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——博客页面布局的更多相关文章

Confluence 6.15 博客页面（Blog Posts）宏参数
参数是让你可以用来控制宏的格式和输出的选项.在 Confluence 存储格式或者 Wiki 标记(wikimarkup)中使用的参数名与在宏浏览器中使用的标签名是不同的,在下面我们将会用括号列出 ...
Confluence 6.15 博客页面（Blog Posts）宏
博客页面宏允许你 Confluence 页面中显示博客页面.通过单击博客的标题将会把你链接到博客页面中. 使用博客页面宏为了将博客页面宏添加到页面中: 从编辑工具栏中,选择插入(Insert) ...
使用vuepress搭建GitHub pages静态博客页面
vuepress官网 vuepress是尤大开发来写文档的静态页面.可以用Markdown 语法,并且也可以使用vue模块化的方式开发页面. vuepress-theme-reco 是另外的开发者开发 ...
Django学习（五）---模板扩展，开发博客页面
(一)博客主页面开发 1.模板中可使用for循环,语法格式为: {% for xs in xxs %} HTML语句 {% endfor %} 2.更改app下的views.py, 获取后台model ...
用JS制作博客页面背景随滚动渐变的效果
今天颓了一会,用JavaScript给我的博客园博客写了一个页面背景随滚动而渐变的效果,做完之后自我感觉良好-- 下面就以我的博客园博客为例,介绍一下如何制作这个效果! 准备 [x] 申请博客园的JS ...
基于bootstrap_博客页面
<!DOCTYPE html>  <h ...
Django开发博客- 页面美化
css是一种用来描述某种标记语言写的web站点的样式语言.这里我们并不想展开讨论,关于CSS我在这里推荐一个很不错的资源: Codeacademy HTML & CSS course 不想从头 ...
Django----使用模板系统渲染博客页面、实现列表和详情页的跳转、前后跳转功能
.模板写法同Flask,可以参考之前的FLask-模板 .将之前的BootStrap静态页面中的数据使用模板写 <!DOCTYPE html> <html lang="en ...
Live2D 博客页面添加板娘
偶然看到了live2d,神奇的二次元呀在页脚Html代码中添加如下代码即可: <link rel="stylesheet" type="text/css" ...

随机推荐

linux下安装QT过程
说QT是linux下主要的图形开发工具一点都不过分,虽然诺基亚公司放弃Meego.遣散了Qt开发团队,但是它的各种商业.企业版本还是的到了很好的保护,linux下的开发工具集里还是经常看到它的身影,毕 ...
poj 3278 Catch That Cow (bfs搜索）
Catch That Cow Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 46715 Accepted: 14673 ...
wwwtyro/cellophane
wwwtyro/cellophane A dead simple web terminal that gets all of the boilerplate out of the way and le ...
javascritp封装的类似java HashMap的类
function Map(){ this.init(); }; //map的大小 Map.prototype.size = function(){ return this._size; }; //将数 ...
属性“dataProvider”有多个初始值设定项。（注意:“dataProvider”是“mx.charts.BarChart”的默认属性）。
1.错误描写叙述属性"dataProvider"有多个初始值设定项.(注意:"dataProvider"是"mx.charts.BarChart&q ...
采用 audio 和 embed 实现浏览器的兼容性页音频播放
采用 audio 和 embed 实现浏览器的兼容性页音频播放采用 audio 和 embed 实现浏览器的兼容性页音频播放学习参考源代码如下所示: function playSound() { ...
VS2010升级VS2013后，出现没有定义类型“PowerPacks.ShapeContainer”错误解决方法
开发说明: http://msdn.microsoft.com/zh-tw/library/microsoft.visualbasic.powerpacks.aspx Microsoft.Visual ...
逆向 Framework.jar
Ref:http://www.addictivetips.com/mobile/what-is-odex-and-deodex-in-android-complete-guide/ Ref:http: ...
Java流读写
写: package com.wjy.write; import java.io.BufferedWriter; import java.io.FileOutputStream; import jav ...
三星galaxy S4快捷功能
你不知道的s4那些快捷操作全面挖掘 1.截屏:S4有三种截屏方法: 一种是常见的同一时候按住home键和电源键大概2秒左右时间. 另外一种是打开手势感应,设定→我的设备→动作与手势→手掌动作→截取屏幕 ...

HTML——博客页面布局

HTML——博客页面布局的更多相关文章

随机推荐

热门专题