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" ...
随机推荐
- AW笔记本升级SSD，外接双屏中的一些注意事项
自己留一个mark,以后提醒用. 1)机械硬盘状态下利用alien sprawn创建的系统恢复U盘,无法在SSD下使用,由于SSD中没有recovery分区,仅仅能使用随机携带的系统恢复光盘: 2)最 ...
- String、StringBuffer与StringBuilder差分
的位置不言而喻.那么他们究竟有什么优缺点,究竟什么时候该用谁呢?以下我们从以下几点说明一下 1.三者在运行速度方面的比較:StringBuilder > StringBuffer > ...
- VLC笔记 它 立志
不过,别忘了找工作的时候毕业,我说:"至少不会操心你会饿死了". 直到刚刚我才认为我妈有点过于乐观了. 今天下午,在做vlc如今播放器部分,一堆代码看的我头大. 正在此时,boss ...
- PHP SPL他们留下的宝石
Rafael Dohms 上面的篇文章 让我为之惊艳,忍不住就翻译了下来,同一时候补充了部分内容. SPL,PHP 标准库(Standard PHP Library) ,此从 PHP 5.0 起内置的 ...
- cisco路由器IPSEC VPN配置(隧道模式)
拓扑如下: R1配置hostname R1enable password cisco crypto isakmp policy 1 #创建IKE协商策略,编号为1 encr 3des ...
- undefined reference to `sin'问题解决
作者:zhanhailiang 日期:2014-10-25 使用gcc编译例如以下代码时报"undefined reference to `sin'": #include < ...
- 使用MYCAT作为Mysql HA的中间件（转）
记得在上一篇文章“Java集群--大型网站是怎样解决多用户高并发访问的”的结尾处本人阐述了数据库的高可用的一种方案----实现主从部署,那么今天,就让我聊聊本人关于数据库的一些所思所想吧! 下面是本人 ...
- hdu 4685 Prince and Princess（匈牙利算法 连通分量）
看了别人的题解.须要用到匈牙利算法的强连通算法 #include<cstdio> #include<algorithm> #include<vector> #pra ...
- Python的TkinterButton做为父窗口
#-*-coding:utf--*- import Tkinter,time,tkMessageBox,sys,BeBigModule class MainFrame: def __init__(se ...
- HYSBZ 2243（树链剖分）
题目连接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=28982#problem/D 题意:给定一棵有n个节点的无根树及点权和m个操作, ...