1 [css]
 2 
 3 #nav {
 4    height: 26px;
 5     border-bottom: 2px solid #2788da;
 6 }
 7  
 8 #nav li {
 9     float: left;
10 }
11    
12 #nav li a {
13     color: #000000;
14     text-decoration: none;
15     padding-top: 4px;
16     display: block;
17     width: 97px;
18     height: 22px;
19     text-align: center;
20     background-color: #ececec;
21     margin-left: 2px;
22 }
23  
24 #nav li a#current {
25     background-color:#2788da;
26     color: #ffffff;
27 }
28  
29 #nav li a: hover {
30     backgroud-color: #bbbbbb;
31     color: #FFFFFF;
32 }

　　给#nav添加一个border-bottom属性，用来指示元素的下边框。通过这样的设置，ul标签就拥有了2px带色彩的下边框。

　　#nav li指定了float: left;属性使得列表中的每一个列表项不再遵循其默认的从上至下的排序方式。如同div的float:left;一样，它也是通过浮动定位的原理，使得自身向左浮动，从而使下一个对象贴近该对象的右边。最终所有的li都具有向左浮动的特性，从而形成了横向排列的形式。

　　导航的关键在于，a链接对象的样式控制。这里使用#nav li a {}给li下的每一个a链接对象编写了样式。

　　display: block;使得a链接对象的显示方式由一段文本改变为一个块状对象，就和div的特性相同。默认状态下，div就是一个块状对象，而默认状态下的a链接对象只显示为一个普通文本。使用display: block;属性后，a链接对象就能像div和其他元素一样成为一个块状对象(block)。

　　display属性是CSS中对对象显示模式操作的一个属性，主要用于改变对象的显示方式。在CSS中，所有对象都有自己默认的显示方式。比如a与span等对象，他们默认为一种行间内联对象，显示时不会影响其他任何对象。当应用span后，span后面的内容会自动排在span的右边，就像一段一段文本；而div这类对象的默认显示为块状对象，默认状态下便占据一行的空间，就像一个方块显示在页面中。

　　a: hover{}鼠标上移。当用户鼠标移动到导航的某个频道时，可以看到效果。

注：上述代码要注意XHTML中元素间的CSS属性继承关系，即继承中的优先权。

　　对比一下使用表格布局与CSS布局在简单导航上的优劣：

　　虽然前面已经完成了标签式导航，但是方块状的导航似乎并不能顺应现在的设计潮流。下面进行改善：

　　首先考虑去掉单一的方块状背景元素，使用带色彩的圆角标签来完成。CSS代码如下：

 1 [css]
 2 
 3 body {
 4     background-color: #000000;
 5 }
 6 
 7 #nav {
 8     height: 26px;
 9     border-bottom: 2px solid #FFFFFF;
10     list-style: none;
11 }
12 
13 #nav li {
14     float: left;
15     font-size: 14px;
16     font-weight: bold;
17 }
18 
19 #nav li a {
20     color: #FFFFFF;
21     text-decoration: none;
22     padding-top: 7px;
23     display: block;
24     width: 97px;
25     height: 19px;
26     text-align: center;
27     background-image: url(img/normal.gif);
28     margin-left: 2px;
29 }
30 
31 #nav li a: hover {
32     background-image: url(img/hover.gif);
33     color: #FFFFFF;
34 }
35 
36 #nav li a#current {
37     background-image: url(img/active.gif);
38     color: #000000;
39 }

　　这里已经去掉了背景色的设定，并给页面body标签加上了深色背景，a对象被放置了3张透明的gif图片，分别为normal.gif、hover.gif、active.gif。分别用于表示普通、鼠标上移、当前页3种交互状态，并重新设定了导航中文字的字体及a对象的边距高度等元素，使其能够适应背景图片。

4.1.2 纵向导航

　　所谓纵向导航就是把网站导航放置在网页左边或者右边的、从上至下排列的一种导航形式。XHTML代码如下：

 1 div id="category">
 2     h1>CSSh1>
 3         h2>CSS入门h2>
 4         h2>CSS进阶h2>
 5         h2>CSS高级h2>
 6     h1>WebUIh1>
 7         h2>理论知识h2>
 8         h2>实战应用h2>
 9         h2>高级技巧h2>
10     h1>DOMh1>
11         h2>DOM入门h2>
12         h2>DOM应用h2>
13         h2>DOM与浏览器h2>
14     h1>XHTMLh1>
15         h2>XHTML参考手册h2>
16         h2>XHTML论坛h2>
17 div>

　　这次采用的标签是div+h1+h2的形式，先使用div标签来设定一个导航的结构区域。在这个区域中，再使用h1来作二级分类的标题，并且还使用h2来做二级分类下面的细节内容。下面来看CSS代码：　　

 1 [css]
 2 
 3 #category {
 4     width: 100px;
 5     border-color: #c5c6c4;
 6     border-style: solid;
 7     border-width: 0px 1px 1px 1px;
 8 }
 9 
10 #category h1, #category h2 {
11     margin: 0px;
12     padding: 4px;
13     font-size: 12px;
14 }
15 
16 #category h1 {
17     border-top: 1px solid #c5c6c4;
18     background-color: #f4f4f4;
19 }
20 
21 #category h2 {
22     font-weight: normal;
23 }

　　上述代码中，对#category的border-width分别设置了上、右、下、左四边的宽度，并且使用了border-color及border-style属性来定义其颜色及边框样式。

4.1.3 下拉及多级弹出式菜单

　　下拉及多级弹出式菜单能够充分利用页面现有空间来隐藏或显示更多的内容，并能够对内容进行合理的分类显示。

　　早期的下拉或弹出式菜单，是通过隐藏的或

块来实现对内容的隐藏，并且通过JavaScript脚本来响应用户操作。目前还采用JavaScript+div或其他元素的形式来制作此类导航。不同的是，整个导航都使用符合Web标准的CSS布局来打造，不再使用表格来制作这类菜单。

　　实际上，下拉式菜单就是横向导航与纵向导航的结合，并且通过CSS对属性的众多支持，同一个菜单不再需要多个div相互配合完成，而是使用CSS布局来制作下拉菜单元件，甚至可以直接控制ul和li元素。XHTML代码如下：

 1 ul id="nav">
 2     li>a href="">文章a>
 3         ul>
 4             li>a href="">CSS教程a>li>
 5             li>a href="">DOM教程a>li>
 6             li>a href="">XML教程a>li>
 7             li>a href="">Flash教程a>li>
 8         ul>
 9     li>
10     li>a href="">参考a>
11         ul>
12             li>a href="">XHTMLa>li>
13             li>a href="">XMLa>li>
14             li>a href="">CSSa>li>
15         ul>
16     li>
17     li>a href="">Bloga>
18         ul>
19             li>a href="">全部a>li>
20             li>a href="">网页技术a>li>
21             li>a href="">UI技术a>li>
22             li>a href="">Flash技术a>li>
23         ul>
24     li>
25 ul>
26 ul>
27      li>a href="">摇滚a>li>
28      li>a href="">纯音乐a>li>
29      li>a href="">古典金曲a>li>
30      li>a href="">电影原声a>li>
31 ul>

　　如上述代码，这里涉及了嵌套，在第一层

 1 [css]
 2 
 3 ul {
 4     padding: 0;
 5     margin: 0;
 6     list-style: none;
 7 }
 8 
 9 li {
10     float: left;
11     width: 160px;
12 }
13 
14 li ul {
15     display: none;
16     top: 20px;
17 }
18 
19 li: hover ul, li.over ul {
20     display: block;
21 }

　　第一步：对导航系统的所有ul元素进行基本设置。list-style: none;属性能去掉ul中的所有圆点标识。

　　第二步：通过对li设置float: left;属性，使得所有li向左浮动，便形成了横向的布局。

　　第三步：对li下面的ul元素进行设置。使用top属性来设置整个ul的上边距，并使用display: none;来让这部分被隐藏。

　　第四步：li: hover ul定义了li元素在hover状态下，ul元素的显隐模式。即是当鼠标上移到li元素时，使其下的ul元素显现出来。同样，li.over ul则是定义了class为over的li元素下ul元素的显隐模式。

　　最后，需要为菜单的显隐加入一段JavaScript代码：

 1 

4.2 背景控制

　　HTML的各个元素基本上都支持background属性，但是形式比较单一，所以可以用CSS的background背景属性来替代传统表格式布局中background的方法。

　　CSS为背景提供的属性定义如下：

4.2.1 背景颜色

　　下面是XHTML代码：

十六进制颜色值

RGB颜色值

颜色名称

透明背景

　　下面是CSS代码：

　　body {background-color: #EDEDEDED;}

　　h1 {background-color: #6E768F;}

　　h2 {background-color: rgb(53,161,32);}

　　h3 {background-color: mediumslateblue;}

　　h4 {background-color: transparent;}

　　body设置背景为灰色，再分别对h1、h2、h3、h4进行了background-color属性不同方式的设置：

• h1使用的是十六进制颜色表示方式。（推荐）
• h2直接应用了RGS值。（推荐）
• h3使用一种颜色的名称。颜色名称是指不同浏览器所支持的一些特定的颜色名称，可以直接使用，但可能出现浏览器不兼容情况。所以，这不推荐使用。
• h4使用transparent透明模式，该元素在页面中的背景显示为透明效果。如果遇到某元素的父级元素被设置了背景色，那么这个元素就可以使用这种形式来恢复成透明背景色。

4.2.2 背景图片

　　先来看看最基本的设置背景图片的方法：

　　下面是XHTML代码：

　　下面是CSS代码：

　　#content {

　　　　border: 1px solid #000FFF;

　　　　height: 500px;

　　　　background-image: url(img/bg.gif);

　　}

　　默认情况下，背景同样以平铺的方式出现在元素之中。然而使用CSS来控制背景需要更多属性。改进后的CSS代码：需要再加入：background-repeat: repeat-x;这样背景就只能在x轴即横向进行平铺。

4.2.3 背景定位

　　除了平铺方式外，CSS还提供了另一个强大的功能，即对背景的定位。在传统表格式布局中，往往是通过透明gif图片来强迫图片到达某一位置。而在CSS中，即使背景，也能够做到精确定位。在上述CSS代码中加入：background-position: left bottom;并将repeat模式设为no-repeat，使背景图片只出现一次，不进行平铺，这样图片在背景中被放置到左下角。background-position属性用于设置图片的x轴和y轴方向的定位，可以使用top、right、bottom、left及center这5种标准对齐方式来进行设定。

　　background-position的设置方式为：background-position: 左对齐方式 上对齐方式

　　除了使用对齐式方式外，background-position的值还可以通过百分比及绝对像素单位进行精确控制。如：background-position: 30% 20px;这里指的是背景在元素中对于其左侧、上侧空间的距离。

4.2.4 背景滚动

　　在传统背景定义中，如果定义了一个网页的body背景，那么网页背景往往会自动根据滚动条的下拉而变化。而在CSS中，针对body元素上背景的控制，提供了另一个选择，即固定背景模式。使用固定背景模式，背景就不再跟着滚动条的下拉而进行位移，而始终保持在固定的位置上。background-attachment属性就是用于控制背景滚动方式。默认为scroll，也可以使用fixed值来表示背景为固定位置。

4.2.5 背景属性缩写

　　基本语法为：background: 背景色 背景图片 背景平铺模式 背景滚动模式 背景定位

　　只要遵循这样的书写顺序，直接将参数写在background里面，即可完成背景设置。

4.3 使用列表元素

　　早期表格式布局网页设计中，列表恰恰是表格用处最大之处。如果需要在列表头部加上圆标或者箭头等元素，那每一行必须在左侧增加一个单元格来存放箭头图片，每个箭头图片就是一个标签。而CSS布局中的列表设计，提倡使用HTML中自带的ul及ol标签。

4.3.1 ul无序列表

　　无序列表是指列表中的各个元素现在逻辑上没有先后顺序。ul与li元素配合使用，每个li标签 均为一条列表项。

4.3.2 ol有序列表

　　有序列表是指列表中的各个元素存在顺序区分，从上至下可以有序地编号为1、2、3、4或者a、b、c、d等。

　　ul/ol元素所支持的属性：

4.3.3 改变项目符号样式

　　通过使用格式：list-style-type: 样式名称来设置默认样式。CSS提供了包含无符号在内的9种默认样式，针对ul无序列表的有4中样式：disc/none/circle/square。

　　针对这4种不同类型的默认样式，可以分别通过list-style-type的取值得以实现。

　　ul {list-style-type: disc}       /* 实心圆 */

　　ul {list-style-type: circle}       /* 空心圆 */

　　ul {list-style-type: square}       /* 实心方块 */

　　ul {list-style-type: none}       /* 不显示项目符号 */

　　而对于ol有序列表，除了none外，CSS还提供5种类型的样式：decimal/lroman/uroman/lalpha/ualpha。

　　ol {list-style-type: decimal}       /* 阿拉伯数字 */

　　ol {list-style-type: lower-roman}       /* 小写罗马数字 */

　　ol {list-style-type: upper-roman}       /* 大写罗马数字 */

　　ol {list-style-type: lower-alpha}       /* 小写英文字母 */

　　ol {list-style-type: upper-alpha}       /* 大写英文字母 */

4.3.4 使用图片自定义项目符号

　　无须更改HTML代码，只需使用CSS提供的list-style-image属性就能完成图片替代项目符号。如：list-style-image: url(arrow.gif);

　　不过，一般不设置list-style-image属性，这是因为虽然使用list-style-image就能简单地达到目的，但同时也失去了一些常用特性。那正确的CSS代码如下：

 1 [css]
 2  
 3 ul {
 4     list-style-type: none;
 5 }
 6  
 7 li {
 8     background-image: url(arrow.gif);
 9     background-repeat: no-repeat;
10     background-position: 0px 3px;
11     padding-left: 20px;
12 }

　　上述代码中，首先使用list-style-style: none;属性来取消默认的圆点项目符，然后对li标签定义一个不平铺的背景，并设置其在每个li中的位置，距上边为3px高度。为防止li中的文字压住背景，可以将li元素的左内边距设置成20px，使得背景图片可以展示出来。

　　上述li中的background代码还可以缩减为：background: url(arrow.gif) no-repeat 0px 3px;

4.3.5 使列表变为段落

　　在display的可用值中，还有一个常用的参数inline。display: inline;XHTML中的大部分可视为对象的默认方式，都是基于block及inline的。对于div而言，其默认为一个block；对a及span而言，它们则是inline显示方式。CSS为页面对象提供了一些可定义的显示方式：

　　但是，在导航设计中，使用float: left;模式同样可以使列表显示在一行中，但为什么还要使用display: inline模式呢？

　　实际上，float: left;对对象在页面中浮动的控制，而不是对象上下文关联的显示模式。使用float：left;来制作段落型文本，如果浮动对象较多而且复杂的话，很容易造成浏览器解析混乱。所以，float: left;更适合对象的布局模式，而不是信息的组织。如果希望让信息显示为段落，特别是这种上下文需要进行关联的段落，最好实用display: inline;不提倡实用float。

4.3.6 列表缩进排版

　　对列表项的段落缩进，可以使用CSS针对文本控制的一个公用属性：text-indent: value;该属性的参数除了可以使用像素表示，还可以用其他单位（如50%或0.8em等），如果希望列表中的项目显示特别一些，还可以通过负数值来实现。负数值表示非缩进而是向左推进。

4.4 表单设计

　　几个重要的表单元素是：button（按钮）、 input（单行文本框）、 textarea（多行文本框）、 listbox（列表框）、 select（下拉列表）、 radio（单选按钮）、 checkbox（复选按钮）等。也可以用小图片来代替按钮，只要将图片做成按钮样式，再为它添加click事件即可。

4.4.1 改变输入框及文本域样式

　　改变输入框外观的最基本方法是使用border及background-color，可以使用二者的组合来实现样式的改变。

　　border的属性从样式上看主要由三部分，即color、style及width。如下：

4.4.2 改变下拉列表样式

　　在CSS中，可以借助下拉列表的对象实现。

4.4.3 改变按钮样式

　　对于按钮，同样可以通过与文本框相同的边框、背景色及图片等方式，可以方便地进行外观式设计。

4.4.4 使用label标签提升表单可用性

　　label标签用来与表单元件进行配合，其使用形式如下：

　　点击此文件

　　其中，for属性用于指定该标签所关联的表单元件。当for所指的名称与表单某元件的id值相同时，该标签将与该元件关联，点击该标签的同时，该元件也得到响应。

4.5 字体及段落样式设计

4.5.1 应用字体样式

　　CSS所支持的字体属性如下：