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

用 UL 制作的纵向导航菜单效果

作者: 不详     来源: 不详     时间: 2006-12-22 13:34:27
摘要: 导航菜单可以说是网站制作中最常见的工作，当然，由于他的重要性（基本上整个网站所有页面都会显示），所以，有不少设计师在上面花费了很多心血。本文介绍的是对纵向导航菜单的最简单的实现，相信明白了实现原理后，你可以制作出属于自己的精彩的导航效果，到时，可别忘了和大家共享哟！
归类: (X)HTML/CSS,

关键词: UL, menu, vertical, 菜单, 导航,


导航菜单可以说是网站制作中最常见的工作，当然，由于他的重要性（基本上整个网站所有页面都会显示），所以，有不少设计师在上面花费了很多心血。本文介绍的是对纵向导航菜单的最简单的实现，相信明白了实现原理后，你可以制作出属于自己的精彩的导航效果，到时，可别忘了和大家共享哟！


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


CSS:
  1.  
  2. <style type="text/css"> 
  3. #navsite { 
  4.     font-family: Verdana, Helvetica, Arial, sans-serif; 
  5.     font-size: 0.7em; 
  6.     font-weight: bold; 
  7.     width: 12em;  
  8.     border-right: 1px solid #666;  
  9.     padding: 0;  
  10.     margin-bottom: 1em;  
  11.     background-color: #9cc;  
  12.     color: #333;  
  13. } 
  14. #navsite ul { 
  15.     list-style: none;  
  16.     margin: 0;  
  17.     padding: 0;  
  18. } 
  19. #navsite ul li { 
  20.     margin: 0;  
  21.     border-top: 1px solid #003; 
  22. } 
  23. #navsite ul li a { 
  24.     display: block;  
  25.     padding: 2px 2px 2px 0.5em;  
  26.     border-left: 10px solid #369;  
  27.     border-right: 1px solid #69c; 
  28.     border-bottom: 1px solid #369; 
  29.     background-color: #036;  
  30.     color: #fff;  
  31.     text-decoration: none;  
  32.     width: 100%;  
  33. } 
  34. html>body #navsite ul li a {  
  35.     width: auto;  
  36. } 
  37. #navsite ul li a:hover { 
  38.     border-left: 10px solid #036; 
  39.     border-right: 1px solid #69c; 
  40.     border-bottom: 1px solid #369;  
  41.     background-color: #69f;  
  42.     color: #fff;  
  43. } 
  44.  
  45. </style> 
  46.  



HTML:
  1.  
  2. <div id="navsite"> 
  3.     <ul> 
  4.         <li><a href="http://www.codebit.cn">首页</a></li> 
  5.         <li><a href="http://www.codebit.cn/pub/article.php">技术文章</a></li>  
  6.         <li><a href="http://www.codebit.cn/pub/contact.php">联系我们</a></li> 
  7.         <li><a href="http://www.codebit.cn/pub/submit.php">提交文章</a></li> 
  8.         <li><a href="http://feeds.feedburner.com/codebit">RSS 订阅</a></li> 
  9.     </ul> 
  10. </div> 
  11.  



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