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" ...

随机推荐

PHP中如何实现 “在页面中一边执行一边输出” 的效果
<?php set_time_limit(0); //在有关数据库的大量数据的时候,可以将其设置为0,表示无限制. ob_end_clean(); //在循环输出前,要关闭 ...
python语言学习9——使用list和tuple
list Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 位置用索引来访问list中每一个位置的元素,记得索引是从0开始的,到 len-1结 ...
MySql数据库SQL语句将编码
-- 查看所有字符编码 SHOW CHARACTER SET; -- 查看创建数据库的指令并查看数据库使用的编码 show create database dbtest; -- 查看数据库编码: sh ...
2014ACM/ICPC亚洲区西安站 F题 color (组合数学，容斥原理)
题目链接:传送门题意: n个格子排成一行.我们有m种颜色.能够给这些格子涂色,保证相邻的格子的颜色不同问,最后恰好使用了k种颜色的方案数. 分析: 看完题目描写叙述之后立刻想到了一个公式 :C(m ...
hosts文件导致无法访问网站
前段时间有人反映无论怎么样都无法在自己的电脑上访问法兰克官网,那台电脑的DNS也无法解析,通过查看hosts文件后发现,原来该电脑的hosts文件木马修改过了,屏蔽了相关的域名,删除新增的或者用其他机 ...
Groovy常见语法汇总
一.groovy是什么简单地说,Groovy 是下一代的java语言,跟java一样,它也运行在 JVM 中. 作为跑在JVM中的另一种语言,groovy语法与 Java 语言的语法很相似.同时,G ...
Python做的眼睛护士
搞了两天终于搞定了,虽然还存在一点点小问题(窗口的显示位置应该设在(0,0)).但基本可以用了. 代码分两个部分.主界面和遮挡屏幕界面.主界面设置完时间后调用遮挡屏幕界面. 1.主界面(设置工作时间 ...
JsonCpp Documentation
JsonCpp - JSON data format manipulation library JsonCpp Documentation 0.6.0-rc2 Introduction JSON (J ...
Android判断应用程序从后台回到前台
MainActivity如下: package cc.testbackgroundtofront; import java.util.List; import android.app.Activity ...
hdu 4836 The Query on the Tree（线段树or树状数组）
The Query on the Tree Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...

HTML——博客页面布局

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

随机推荐

热门专题