一款简单另类的CSS导航菜单代码

发布于 2022-10-15 09:29:36 字数 3710 浏览 22 评论 0

一款简单另类的CSS导航菜单代码
代码简介:

很个性的一个CSS网站导航条,每个菜单的前端都有不同的颜色,有点与从不同,其实代码很简单,也容易修改。

代码内容:

view sourceprint?

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-  
  2.    
  3. transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  7. <title>一款简单另类的CSS导航菜单代码_网页代码站(www.webdm.cn)</title>  
  8. <style type="text/css">  
  9. <!--  
  10. #navlist  
  11. {  
  12. padding: 0 1px 1px;  
  13. margin-left: 0;  
  14. font: bold 12px Verdana, sans-serif;  
  15. }  
  16.    
  17. #navlist li  
  18. {  
  19. list-style: none;  
  20. margin: 0;  
  21. border-top: 1px solid gray;  
  22. display: inline;  
  23. }  
  24.    
  25. #navlist li a  
  26. {  
  27. padding: 0.25em 0.5em 0.25em 0.75em;  
  28. border-left: 1em solid #AAB;  
  29. background: #CCD;  
  30. text-decoration: none;  
  31. }  
  32.    
  33. #navlist li a:link { color: #448; }  
  34. #navlist li a:visited { color: #667; }  
  35.    
  36. #navlist li a:hover  
  37. {  
  38. border-color: #FE3;  
  39. color: #FFF;  
  40. background: #332;  
  41. }  
  42. -->
  43. </style>  
  44. </head>  
  45. <body>  
  46. <div id="navcontainer">  
  47. <ul id="navlist">  
  48. <li id="active"><a href="/" id="current">WebDm.Cn</a></li>  
  49. <li><a href="http://webdm.cn">ASP</a></li>  
  50. <li><a href="#">PHP</a></li>  
  51. <li><a href="#">JSP</a></li>  
  52. <li><a href="/">AJAX</a></li>  
  53. </ul>  
  54. </div>  
  55. </body>  
  56. </html>  
  57. <br>  
  58. <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>

复制代码代码来自http://www.webdm.cn/webcode/d9ac ... 6-bcb5b5013c46.html

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文