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;
}
版权声明：本文博客原创文章，博客，未经同意，不得转载。
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> <!-- saved from url=(0036)http://v3.bootcss.com/examples/blog/ --> <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" ...
随机推荐
- c语言数组应用－－统计随机数并打印直方图
C标准库中生成伪随机数的是rand函数,使用这个函数需要包含头文件stdlib.h,它没有参数,返回值是一个介于0和RAND_MAX之间的接近均匀分布的整数.RAND_MAX是该头文件中定义的一个常量 ...
- make 2>&1 | tee log.txt之小析
前言 接触过linux的人,或多或少都会了解一点make 2>&1 | tee log.txt这个命令. 1. make是什么? make是linux下一个非常强大的命令,简单点就是你要 ...
- 30天自制操作系统第九天学习笔记（u盘软盘双启动版本）
暑假学习小日本的那本书:30天自制操作系统 qq交流群:122358078 ,更多学习中的问题.资料,群里分享 environment:开发环境:ubuntu 第九天的课程已学完,确实有点不想写 ...
- Just learn how to use the JNI
JNITestProject Just learn how to use the JNI Refer : 1. ant usage http://lmbj.net/blog/ant-build-and ...
- TBDR缺点
TBDR全称Tile-based Deferred Rendering.它是Power VR独特的TBR技术的一种延伸实现手段.TBR/TBDR通过将每一帧画面划分成多个矩形区域,并对区域内的全部像素 ...
- POJ 2151 Check the difficulty of problems （动态规划-可能DP）
Check the difficulty of problems Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 4522 ...
- Android入门之简单短信发送器
效果图: manifest.xml 文件中加入 <uses-permission android:name="android.permission.SEND_SMS"/&g ...
- Android 网络通信框架Volley基本介绍
Volley主页 https://android.googlesource.com/platform/frameworks/volley http://www.youtube.com/watch?v= ...
- cocostudio内存释放
在使用cocostudio时,在释放内存时能够这样做: 在onExit()方法里加入例如以下: void LoadLayer::onExit() { // 释放本对象自己 removeFromPare ...
- linuxserver启动过程
随着Linux的应用日益广泛.特别是在网络应用方面,有大量的网络server使用Linux操作系统.因为Linux的桌面应用和Windows相比另一 定的差距.所以在企业应用中往往是Linux和Win ...