百度空间CSS网页布局图片解析
百度空间布局解析【一】首先来了解一下百度空间的整体布局:[attach]50[/attach]
注:上图中中颜色相同的为同一级
百度空间的布局任务是通过“层”来完成的，高级别的层覆盖在低级别的层上面。
如上图，body是就是你看到的整个网页框架，它处于最底层。userbar，main和ft
覆盖在body上面，他们具体的位置和大小，可以通过控制参数来随意调整调整。
比如我通过调整可以使他们变成下面这样：
[attach]51[/attach]
对于这3个层，百度已经写好css了，样子就是第一张图所示，改不了，也没必要去改。
稍微介绍一下：
userbar就是最上头那个横条，用户登录管理用的。
ft就是最下面写着“2006 Baidu 使用百度前必读”这句话的部分，也没什么好改。
mian就是中间了，就是要我们对付的部分。
直接在mian上面的层（就是他的上一层拉），我也没去仔细看有多少层，反正对我们有
用的就是2块绿色的，header和stage。
header就是包括blog的标题，导航之类的那块。
stage像是个盘子，文章，分类，友情链接等等全都堆在里面。
————————————————————————————
百度空间布局剖析【二】
header这一层在css中的id是#header,在它上面的有5层：lc，tit，desc，tab，tabline，
这些名字我都是根据他们在css中的id取的，下同。 如图所示：
[attach]52[/attach]
同样，通过调整参数我们可以任意改变它们的大小和位置。在我的blog，他们的位置和大小是：
[attach]53[/attach]
下面具体来说一下css中是怎么写的：
#header{
background-image: url([img]http://hiphotos.baidu.com/lovinshe/pic/item/88399825aba3786035a80f3d.jpg[/img]); /* 我的背景，就是房子那个图 */
background-position: top;
height: 113px; /* header这个盘子的总高度 */
}
/* 下面的dd全都覆盖在header上 */
#header div.desc{/* 简介，写着简约、唯美 */
color: #FFFFFF;
font-size: 13px;
left: 88px; /* 距离header最左边88px，距离顶部67px。 */
top: 67px;
}
#header div.lc{} /* 啥都没写 */
#header div.rc{} /* 啥都没写 */
#header div.tit{ /* 空间标题，写着LinFY */ color: #FFFFFF;
font-size: 24px;
font-weight: bold;
line-height: 22px;
left: 11px; /* 距离header最左边11px，距离header顶部62px */
top: 62px;
}
/*导航条样式*/
#tab{ /* 导航条距离header顶部88px */
padding-top: 2px;
top: 88px;
}
#tabline{ /* 分割线距离header顶部113px */
background-color: #CCCCCC;
top: 113px;
z-index: 2; /* 由于线比较细，怕被导航条遮住了，我把它的层等级抬高了一级 */
}
#tab span{ /* 这个是导航条里面各个栏目之间的那个竖直的分割线 */
color:#ffffff;font-size:14px
}
lc和rc这两个层我并没有用，其实他们可以用来放Blog的logo，把他们的位置设置好，背景图片放logo的图片就行了。
完毕。。。
我的导航条超链接css代码是：
/*没选中的栏目,鼠标不在上面时的样子*/
#tab a,#tab a:link,#tab a:visited{
background-color: #404040;
color: #000000;
text-decoration: none;
}
/*没选中的栏目,鼠标在上面时的样子*/
#tab a:hover{
background-color: #BFBFBF;
border-bottom: 0px;
border-top: #CCCCCC 1px solid;
}
/*选中的栏目的样子*/
#tab a.on,#tab a.on:link,#tab a.on:visited,#tab a.on:hover{
padding-bottom: 1px;
background-color: #FFFFFF;
border-bottom: 1px;
border-top: 0px;
padding-top: 0px;}
header部分就这些了。
————————————————————————————
百度空间布局剖析【三】
剩下stage，照例先帖图，省得网友们又去翻前面的图。
[attach]54[/attach]
这次我多贴了一些header的内容，是为了方便说明stage的位置调节方法。其实，百度已经把stage和header之间的距离限定死了，我们从页面上看到的上下之间的距离，是header和stage里面这个粉色的表格之间的距离，这个粉色表格，包含网络日志、友情链接这些。调整距离方法：stage{margin-top:20px},即调节表格和stage边框的距离。
每个人的页面版式都不一样，这张表格的3个单元格内容也不一样。以我的版式作下说明。
我的c2t1里面放了media player，文章分类，友情链接等，每一个模块，对应着一个层，如下图所示：
[attach]55[/attach]
我的版式只有左右两栏，所以系统默认中间的表格什么都没有，虚线是自己加上去的。
绿颜色这些模块都是一样的，拿评论区模块来讲。这里层和表格互相嵌套，乱七八糟。我们就看颜色块。上下两个红、黄色块，是两个表格，每个表格有三列。如果你想要这些模块成圆角状，那么，modtl，modtr，modbl，modbr就放上一些转弯用的背景。
modtc是写着“最新评论”几个字的部分，同理modbc。这么理解：b就是bottom，t就是top，l就是left，r就是right。
日志这块，相当于评论区的白色块，毕竟大多数东西都是写在这里的，提出来讲一下：
[attach]56[/attach]
每块对应什么意思从图上就能看出来了，我不多说。
喜欢在标题上下功夫的朋友，可以在tit这个地方设置一个背景，方法是：
找到#m_blog div.tit ，你会看到有三个#m_blog div.tit ，把前两个分别替换为
#m_blog div.tit{
color:#8A3506;font-size:14px;font-weight:bold;
background:url([img]http://hiphotos.baidu.com/space163/pic/item/accc3dc75b69dddcd100603c.jpg[/img]) no-repeat top left;
text-indent: 22px;
height:70px;
}
#m_blog div.tit a{
color:#8A3506;font-size:14px;font-weight:bold;
background:url([img]http://hiphotos.baidu.com/space163/pic/item/accc3dc75b69dddcd100603c.jpg[/img]) no-repeat top left;
text-indent: 22px;
height:70px;
}
其中[img]http://hiphotos.baidu.com/space163/pic/item/accc3dc75b69dddcd100603c.jpg[/img] 是你需要的标题背景，改成你想要的图片地址就好了。
text-indent: 22px是标题左边缩进值
height:70px 是背景所占用的高度，根据你的背景图片的高度设置。看看效果：
[attach]57[/attach]
这东西转载自[url]http://hi.baidu.com/space163/blog/item/bed3f103dd51aaec08fa9386.html[/url]
关于正文的排版，建议大家去看我的另一篇文章：
利用重新定义标签，达到写文章时迅速排版的目的
终结。。。
希望能给你带来点什么！
页:
[1]