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

CSS Beauty 风格的分类列表导航样式

作者: CSS Beauty     来源: cssBeauty.com     时间: 2006-10-29 09:48:24
摘要: 这是一个典型的用 UL 和 LI 的方法制作的栏目导航样式,摘自CSS Beauty, 风格完全由 CSS 控制, 可以方便的修改其代码以统一到自己网站的整体风格之中, 可用于栏目导航和分类列表等应用.
归类: (X)HTML/CSS,

关键词: 分类列表, 导航, css, 栏目导航,

这是一个典型的用<ul>和<li>的方法制作的栏目导航样式,摘自CSS Beauty, 风格完全由 CSS 控制, 可以方便的修改其代码以统一到自己网站的整体风格之中, 可用于栏目导航和分类列表等应用.


--------------------------------------------------
点此查看示例文件
--------------------------------------------------


先看看效果:
CSS Beauty 风格的分类列表导航样式

CSS 部分的代码:
CSS:
  1.  
  2. <style type="text/css"> 
  3. <!-- 
  4. body, td, div, p, span, textarea, select { 
  5.     font-size: 12px; font-family: verdana, arial, helvetica, sans-serif 
  6. } 
  7. a { 
  8.     color: #DCB20C; text-decoration: none; font-size: 12px; 
  9. } 
  10. a:hover { 
  11.     color: #CC9933; text-decoration: underline; font-size: 12px; 
  12. } 
  13. h2 { 
  14.     font-size: 1.1em; 
  15.     margin:0; 
  16.     line-height: 1; 
  17. } 
  18. #categories { 
  19.     width: 170px; 
  20.     float: left; 
  21.     margin: 0 5px 10px 5px; 
  22. } 
  23. #categories ul { 
  24.     font-size: 1.0em; 
  25.     margin:0; 
  26.     padding:0; 
  27.     list-style: none; 
  28. } 
  29. #categories li { 
  30.     margin: 0; 
  31.     padding: 0; 
  32.     border-bottom: 1px dotted #BBE0EB; 
  33. } 
  34. #categories a { 
  35.     display: block; 
  36.     text-decoration: none; 
  37.     padding: 3px 5px 3px 10px; 
  38.     height: 17px; 
  39.     color: #4896AC; 
  40. } 
  41.  
  42. #categories a:hover { background:#F0FDE2; } 
  43.  
  44. #categories h2 { 
  45.     padding: 10px 0 10px 0; 
  46.     clear: both; 
  47.     margin: 0; 
  48.     color: #83CDE1; 
  49. } 
  50.  
  51. .clear { clear: both; } 
  52.  
  53. --> 
  54. </style> 
  55.  



HTML 部分的代码:
HTML:
  1.  
  2. <div id="categories"> 
  3.     <h2>Categories</h2> 
  4.     <ul> 
  5.         <li><a href="#">Business</a></li> 
  6.                  
  7.         <li><a href="#">Entertainment</a></li> 
  8.                  
  9.         <li><a href="#">Other</a></li> 
  10.                  
  11.         <li><a href="#">Personal</a></li> 
  12.                  
  13.         <li><a href="#">Photography</a></li> 
  14.                  
  15.         <li><a href="#">Portal / Magazine</a></li> 
  16.                  
  17.         <li><a href="#">Sports</a></li> 
  18.                  
  19.     </ul> 
  20. </div> 
  21.  





本文只是摘录原网站的部分代码, 目的是整理其实现技巧, 如果您有其他目的或用途, 请联系原网站.




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