第四章 CSS网站元素设计

4.1 网站导航

　　网站导航是网站中最重要的元素。从形式上看，网站导航主要分横向导航、纵向导航、下拉及多级菜单导航灯3种常见形式。

• 横向导航：作为门户网站的设计而言，主导航一般采用横向导航。
• 纵向导航：纵向导航更倾向于表达产品的分类。
• 下拉导航：主要用于功能复杂的网站。

　　总的来说，导航的核心目标就是设计一个简单、快捷的操作入口，帮助用户快速地到达网站中的 内容。这里将使用CSS来对这3种常见的导航进行设计。

4.1.1 横向导航

　　假设目前有6个频道，如果用传统的表格式布局的导航制作，则需要设计一个具有一行就列的表格，然后再每个单元格<td></td>标签中插入导航文字，再让每个单元格的文本居中。实现代码如下：

 1 [html]
 2 
 3 <table width="740" height="24" border="0" cellpadding="0" cellspacing="0" b    gcolor="#FFFFFF">
 4     <tr align="center">
 5         <td bgcolor="#ececec"><a href="#">首页</a></td>
 6         <td bgcolor="#ececec"><a href="#">文章</a></td>
 7         <td bgcolor="#ececec"><a href="#">参考</a></td>
 8         <td bgcolor="#ececec"><a href="#">Blog</a></td>
 9         <td bgcolor="#ececec"><a href="#">论坛</a></td>
10         <td bgcolor="#ececec"><a href="#">联系</a></td>
11     </tr>
12 </table>

　　可以看到，设定了表格的宽高，并把边框边距都设置为0，以便隐藏表格线，然后让每个单元格中的文字居中对齐。

　　再来看一下如何使用CSS来设计同样的导航系统。XHTML代码如下：

1 <ul id="nav">
2     <li><a href="#" id="current">首页</a></li>
3     <li><a href="#">文章</a></li>
4     <li><a href="#">参考</a></li>
5     <li><a href="#">Blog</a></li>
6     <li><a href="#">论坛</a></li>
7     <li><a href="#">联系</a></li>
8 </ul>

　　这段代码使用了ul元素（无序列表）。ul是CSS布局中使用得较为广泛的元素之一，主要是用来描述列表型内容，每个<ul></ul>表示其中的内容为一个列表块，块中的每一条列表数据则用<li></li>来描述。ul默认样式是加上了圆点项目序号，而且默认形式为从上至下排列。CSS代码如下：

 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>CSS</h1>
 3         <h2>CSS入门</h2>
 4         <h2>CSS进阶</h2>
 5         <h2>CSS高级</h2>
 6     <h1>WebUI<h1>
 7         <h2>理论知识</h2>
 8         <h2>实战应用</h2>
 9         <h2>高级技巧</h2>
10     <h1>DOM</h1>
11         <h2>DOM入门</h2>
12         <h2>DOM应用</h2>
13         <h2>DOM与浏览器</h2>
14     <h1>XHTML</h1>
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 下拉及多级弹出式菜单

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

　　早期的下拉或弹出式菜单，是通过隐藏的<layer>或<div>块来实现对内容的隐藏，并且通过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="">XHTML</a></li>
13             <li><a href="">XML</a></li>
14             <li><a href="">CSS</a></li>
15         </ul>
16     </li>
17     <li><a href="">Blog</a>
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>

　　如上述代码，这里涉及了嵌套，在第一层<li></li>之间，插入了另一个<ul></ul>结构，这就是多级菜单的代码构成模式。设置CSS样式，让菜单变成横向式，CSS代码如下：

 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 <script type="text/javascript">
 2     startList = function() {
 3         if (document.all && document.getElementById) {
 4             navRoot = document.getElementById("nav");
 5             for (i=0; i<navRoot.childNodes.length; i++) {
 6                 node = navRoot.childNodes[i];
 7                 if (node.nodeName=="LI") {
 8                     node.onmouseover=function() {
 9                         this.className+="over";
10                     }
11                     node.onmouseout=function() {
12                         this.className=this.className.replace("over", "");
13                     }
14                 }
15             }
16         }
17     }
18     window.onload=startList;
19 </script>

4.2 背景控制

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

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

4.2.1 背景颜色

　　下面是XHTML代码：

　　<h1>十六进制颜色值</h1>

　　<h2>RGB颜色值</h2>

　　<h3>颜色名称</h3>

　　<h4>透明背景</h4>

　　下面是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代码：

　　<div id="content"></div>

　　下面是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 使用列表元素

　　早期表格式布局网页设计中，列表恰恰是表格用处最大之处。如果需要在列表头部加上圆标或者箭头等元素，那每一行必须在左侧增加一个单元格来存放箭头图片，每个箭头图片就是一个<img>标签。而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中，可以借助下拉列表的<option>对象实现。

4.4.3 改变按钮样式

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

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

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

　　<label for="c1">点击此文件</label>

　　<input type="checkbox" name="c1" id="c1" value="http://www.mamicode.com/checbox" />

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

4.5 字体及段落样式设计

4.5.1 应用字体样式

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

4.5.2 应用段落样式

　　CSS的大部分段落样式属性如下：

4.6 链接样式控制

4.6.1 链接控制

　　CSS提供了4个伪类，用于对链接进行样式控制。可以进行以下4种状态的样式设置。

• a: link状态：用于设置a对象在没有被访问时的样式。在实际中，为了编码上的简单，经常直接使用a而不是a: link来编写。
• a: visited状态：用于设置a对象被访问后的样式。
• a: active状态：用于设置a对象在用户点击链接时的样式，而且是在释放之前的样式设定。实际应用中，用的很少。
• a: hover状态：用于设置a对象在鼠标悬停在链接上时的样式。

注：

• 关于这4种伪类一定要注意顺序！顺序必须为LVHA。
• a: active状态一般不用写。
• a: link也可以简写为a。

4.6.2 面包屑导航链接

　　这里所指的面包屑导航(crumb)，就是指网站上经常出现的路径式导航。XHTML代码如下：

1 <div id="crumb">
2     <a href="#">CSS: Designer</a>
3     <a href="#">CSS 文章</a>
4     <a href="#">hack 技术</a>
5 </div>

　　CSS代码如下：

 1 [css]
 2 
 3 #crumb a {
 4     float: left;
 5     color: #333333;
 6     font-size: 14px;
 7     font-family: arial;
 8     text-decoration: none;
 9     display: block;
10     background: url(img/ar.gif) no-repeat 3px 3px;
11     padding: 1px 2px 1px 20px;
12     margin: 0px 5px;
13     border: 1px solid #FFFFFF;
14 }
15 
16 #crumb a: hover {
17     border: 1px solid #578c12;
18     background-color: #f8f8f8f8;
19 }