关于CSS在Blog中的应用（一）

CSS，Cascading Style Sheets（层叠样式表单）的简称，顾名思义，是一种设计网页样式的工具。借助CSS的强大功能，网页将在您丰富的想象力下千变万化。下面就几个方面谈一谈如何Blog中应用CSS满足要求。

1、CSS与Blog布局

对于每一个Blog模板（不管是什么类型的Blog系统），仔细分析一下它的页面代码，你可能得到类似这样的几部分：

我们通常采用DIV元素来将这些结构定义出来
<div id="header"></div>	页眉部分（作为一个大的容器）
<div id="siteinfo"></div>	Blog信息（标志、名称、描述等）
<div id="search"></div>	搜索框
<div id="navigation"></div>	导航条（或者主菜单）
<div id="content"></div>	主页面部分（作为容器）
<div id="posts"></div>	Posts内容（title、正文、页脚等等）
<div id="comments"></div>	评论部分
<div id="sidebar"></div>	侧边栏（作为容器，包含Widgets,功能件等）
<div id="footer"></div>	页脚（版权，相关声明等）

要特别强调的是这些不是布局，只是结构；我们在进行web设计时要基于这样一种思想：HTML只负责内容、框架，而CSS负责修饰、布局；也就是说要尽量发挥CSS样式语言的优势（至于具体那些好处可以参考这里）。

利用CSS对页面进行布局需要我们对block块元素（HTML块级元素属性说明）的结构有所了解，清楚CSS属性的修改对应到块元素（如DIV标签）的哪些变化。对于初学者与其反复实验解决这类问题，还不如先花点时间了解其原理。这里我们需要理解的最重要的概念之一是所谓的CSS“盒状模型”，它是大多数CSS布局与定位的基础。

通过下面的“盒子”模型，我们可以有一个清晰的认识，进而帮助我们设计出更佳的网页。
盒模型平面结构图：

盒模型层次3D结构示意图：

基于上面的模型，作以下说明：

块元素的内容Content 位于中心位置；
块的边长width 和 height 的值不包括border的宽度；
border为可见区域划分界限；
padding 基于border的内侧边界向内延伸，不可见；
margin 值可取正负数，且都基于border的外侧边界，不可见；
块元素实际所占的空间由margin决定（这并不等价于它看上去有多大面积）。

2、利用CSS实现导航

基于上面提到的思想（HTML只负责内容、框架，而CSS负责修饰、布局），我们进行导航的设计，可视部分代码如下：

<ul id="navigation">　　　 // 和表格布局相比，这样的结构看上去清晰明了
<li><a >Home</a></li>
<li><a >Albums</a></li>
<li><a >Forum</a></li>
<li><a >Apps</a></li>
<li><a >Tips</a></li>
<li><a >About</a></li>
</ul>

Home
Albums
Forum
Apps
Tips
About

左边是上面代码的显示效果，因为ul标签默认是block元素，所以每个项目都是另起一行排列的。

这样的显示效果是不符合导航条要求的，于是我们为其加上CSS代码进行调整修饰：

/* Navigation
---------------------------------------*/

#navigation {
width:500px;
background: #b70908 url(images/md_nav.gif);
background-repeat:repeat-x;
background-position:top;
height:47px;
margin-bottom:0px;
font-size: 1.0em;
font-weight:bold;}

#navigation ul {
list-style: none;
padding: 0px;
margin: 0px;}

#navigation li {
display: inline;
margin: 0px;}

#navigation li a {
height:32px;
padding-top: 15px;
color: #FFFFFF;
padding-right: 20px;
padding-left: 20px;
text-decoration: none;
float: left;
margin-right: 1px;
background: url(images/md_nav_split.gif) no-repeat right bottom;}

#navigation li a:hover {
background: url(images/md_nav_hover.gif) repeat-x left top;
}

下面是应用CSS后的效果：

通过上面的示例，我们可以看到CSS+<ul>设计导航的一些优点：结构清晰，内容与样式相独立，以后修改更新都非常方便。

Tech Note

Search This Blog