首页 - 文章 - (X)HTML/CSS - (X)HTML/CSS小技巧

一个效果不错的 TAB 样式

作者: 艺图     来源: YITU.org     时间: 2006-10-28 23:34:09
摘要: TAB 样式在网页设计中会经常用到，本文介绍的方法就是用 CSS 将 UL 和 LI 修饰成 TAB 样式，用CSS 控制显示的其中一个好处就是正文代码简洁，只需要修改 CSS 就能很方便的更换页面整体风格。
归类: (X)HTML/CSS,

关键词: 列表样式, TAB, CSS, 导航,

本文介绍一种将 <ul> 和 <li> 修饰成 TAB 风格的 CSS 样式。

先看看最终效果：

css tab

---------------------------------------------
点此查看代码示例
---------------------------------------------

现在我们可以结合效果来看看代码。

先看看 CSS 部分 :

CSS:
  1.  
  2. <style type="text/css"> 
  3.  
  4. body { 
  5.     font-family:verdana,arial,sans-serif,"宋体"; 
  6.     font-size:12px; 
  7.     margin:0px; 
  8.     padding:0px; 
  9.     background:#aaa; 
  10. } 
  11.  
  12. a { 
  13.     color: #003499;  
  14.     text-decoration: none; 
  15. } 
  16.  
  17. a:hover { 
  18.     color: #000000;  
  19.     text-decoration: underline; 
  20. } 
  21.  
  22. #tabnav { 
  23.     background:#d5d5d5; 
  24.     border-bottom:1px solid #333; 
  25.     padding-bottom:3px; 
  26. } 
  27.  
  28. #tabnav ul { 
  29.     padding:15px 0px 5px 0px; 
  30.     margin:5px 0px 5px 0px; 
  31.     list-style:none; 
  32.     background:#f1f1f1; 
  33.     border-bottom:1px solid #999; 
  34. } 
  35.  
  36. #tabnav ul li { 
  37.     display:inline; 
  38.     margin-left:10px; 
  39. } 
  40.  
  41. #tabnav ul li a { 
  42.     background:#fff;     
  43.     padding:5px 10px 5px 10px; 
  44.     border:1px solid #999; 
  45. } 
  46.  
  47. #tabnav ul li a:hover { 
  48.     background:#ccc;     
  49. } 
  50.  
  51. #tabnav ul li a.here { 
  52.     background:#d5d5d5; 
  53.     padding:5px 10px 5px 10px; 
  54.     border-top:1px solid #999; 
  55.     border-left:1px solid #999; 
  56.     border-right:1px solid #999; 
  57.     border-bottom:1px solid #d5d5d5; 
  58. } 
  59.  
  60. #tabnav ul li a.here:hover { 
  61.     background:#d5d5d5; 
  62. } 
  63.      
  64. </style> 
  65.  


代码中首先定义了整个文档的字体、文字大小及背景等信息，还定义了默认的链接样式。关键部分从 #tabnav 开始， #tabnav 就是要定义的 <ul> 的父元素，然后逐层定义 <li> <a> 等样式。

参照效果图我们可以看到：#tabnav ul li a.here 定义的是当前选中的链接样式。

对照着 (X)HTML 看看：

HTML:
  1.  
  2. <div id="tabnav"> 
  3. <ul> 
  4.     <li><a href="#">首页</a></li> 
  5.     <li><a href="#" class="here">技术文章</a></li> 
  6.     <li><a href="#">提交文章</a></li> 
  7.     <li><a href="#">联系我们</a></li> 
  8. </ul> 
  9. </div> 
  10.  



通过修改 CSS 我们可以很容易的改变整个 TAB 的显示风格。



相关文章
发表评论 有想法？点此发表评论？
推荐链接：(联系 QQ ：326801485)