《CSS网站布局实录》学习笔记（四）

第四章 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;来让这部分被隐藏。