A-A+

十、css网站元素设计——横向导航制作

2007年11月14日 网站运维 暂无评论 阅读 2,813 views 次

导航在网站中起着举足轻重的作用,常见的导航形式主要有横向导航、纵向导航和下拉式导航等三种形式。
传统的导航是表格式布局,不仅代码量大,后期维护起来也不方便,而且也没有实现表现与内容的分离,显然不符合web2.0的标准。下面我们重点来看css是如何实现横向导航的。
先看代码:

CSS代码
  1. <ul id="nav">
  2. <li><a href="#">首页</a></li>
  3. <li><a href="#">心路</a></li>
  4. <li><a href="#">历程</a></li>
  5. <li><a href="#">设计</a></li>
  6. <li><a href="#">代码</a></li>
  7. <li><a href="#">优化</a></li>
  8. </ul>

这里我们引入了一个新的元素ul。ul是CSS中使用相当广泛的一种元素,主要用来描述列表型内容。每一个<ul></ul>相当于一个列表块,块中的每一条列表数据用<li></li>来描述,下图是一个不加样式的ul实现的样式效果:
如图:导航对比

image

显然,ul默认加上了圆点序号,而且自上而下排列。实际上导航可以理解为导航列表,每一个列表数据就可以看做是一个频道,当然也可以用二层嵌套div来实现导航代码结构,但相对于ul来说,div显然过于复杂,而且我们之前也说过,div主要是用来大范围的样式布局。而类似于导航的块状型区域则主要交给ul来处理。
下面我们来看为其实现样式的css代码:

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. <!--
  7. ul{list-style-type:none;}     /*去除列表项前端的项目符号*/
  8. ul li{float:left;}  /*使列表项不再遵循默认的自上而下样式,而类似于div的向左浮动属性,使右侧对象紧贴左侧最终形成横向排列样式*/
  9. ul li a{display:block;/*块状显示,在第三节讲div的时候曾提过,此处的作用就是把a链接对象由一段文本改为块状对象,使其具备div的一些特性,从而实现内外边距,边框背景等属性*/
  10. margin-left:10px;    /*左外边距*/
  11. width:60px;          /*块宽度*/
  12. height:16px;         /*块高度*/
  13. padding-top:4px;     /*上内边距*/
  14. text-align:center;   /*文本距中显示*/
  15. background-color:#cecece;    /*块背景色*/
  16. color:#009900;               /*字体颜色*/
  17. font-size:12px;              /*字体大小*/
  18. text-decoration:none;}       /*字体装饰无下划线*/
  19. ul li a:hover{color:#fff;            /*伪类:指向链接时的字体颜色*/
  20. background-color:#33ccff;    /*伪类:指向链接时的背景色*/
  21. text-decoration:underline;   /*伪类:指向链接时的字体装饰*/
  22. }
  23. -->
  24. </style>
  25. </head>
  26. <body>
  27. <ul id="nav">
  28. <li><a href="#">首页</a></li>
  29. <li><a href="#">心路</a></li>
  30. <li><a href="#">历程</a></li>
  31. <li><a href="#">设计</a></li>
  32. <li><a href="#">代码</a></li>
  33. <li><a href="#">优化</a></li>
  34. </ul>
  35. </div>
  36. </body>
  37. </html>

特别说明:
1、以下两句都使用了包含选择符。
ul li{}
ul li a{}
2、用ul实现的横向导航显然用了极少的代码量实现了丰富的效果,这是表格所不及的。而且在后期增删频道更为方便。

下面我们对代码修改以实现如下样式:
如图:导航示例
因为有图片,所以要下载示例文件。

image

代码如下:

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>横向分类导航-css系列教程-超级宝贝-http://www.chaojibaby.com</title>
  5. <style type="text/css">
  6. <!--
  7. body{margin:0px;}
  8. #header{margin:0px auto;width:780px;height:90px;background-color:#000;padding:0px;}
  9. #header img{position:relative;top:20px;left:30px;}  /*相对定位,位置根据前一对象进行偏移*/
  10. #nav{
  11. list-style:none;
  12. position:relative;  /*相对定位,位置根据前一对象进行偏移*/
  13. top:37px;
  14. left:300px;
  15. width:500px;/*此处须设定宽度,否则在IE与Firefox里不一致且不正常*/
  16. }
  17. #nav li{float:left;}
  18. #nav li a{display:block;
  19. margin-left:10px;
  20. width:69px;
  21. height:16px;
  22. padding-top:4px;
  23. text-align:center;
  24. background-image:url(nav.gif);
  25. background-position:0px -22px; /*背景绝对定位,只显示背景图片的下部分*/
  26. color:#009900;
  27. font-size:12px;
  28. letter-spacing :10;
  29. text-decoration:none;}
  30. #nav li a:hover{color:#fff;
  31. background-image:url(nav.gif);
  32. background-position:0px 0px;/*背景绝对定位,只显示背景图片的上部分,此代码不能省略,因为上面曾指定了背景样式,帮在此处覆盖*/
  33. text-decoration:underline;
  34. }
  35. -->
  36. </style>
  37. </head>
  38. <body>
  39. <div id="header">
  40. <a href="http://www.chaojibaby.com"><img src="css_desiger.gif" alt="超级宝贝" border="0" /></a>
  41. <div id="nav">
  42. <li><a href="#">首页</a></li>
  43. <li><a href="#">心路</a></li>
  44. <li><a href="#">历程</a></li>
  45. <li><a href="#">设计</a></li>
  46. <li><a href="#">代码</a></li>
  47. <li><a href="#">优化</a></li>
  48. </div>
  49. </div>
  50. </body>
  51. </html>

特别说明:
此处顺便讲解了如何应用了背景图片的绝对定位属性,把原本两个不同色调的图片合二为一,然后定位显示。从而丰富导航的样式。当然背景属性此处不做重点,我们会在以后的教程中详细讲解。

通过这两个示例的练习,想必大家都能做出漂亮的横向导航了吧。下一节我们将来制作纵向导航

原文地址:http://www.chaojibaby.com/blog/article.asp?id=115

给我留言

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。

Copyright © 寂寞部屋 保留所有权利.   Theme  Ality

用户登录