一款简单另类的CSS导航菜单代码
一款简单另类的CSS导航菜单代码
代码简介:
很个性的一个CSS网站导航条,每个菜单的前端都有不同的颜色,有点与从不同,其实代码很简单,也容易修改。
代码内容:
view sourceprint?
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
- transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>一款简单另类的CSS导航菜单代码_网页代码站(www.webdm.cn)</title>
- <style type="text/css">
- <!--
- #navlist
- {
- padding: 0 1px 1px;
- margin-left: 0;
- font: bold 12px Verdana, sans-serif;
- }
- #navlist li
- {
- list-style: none;
- margin: 0;
- border-top: 1px solid gray;
- display: inline;
- }
- #navlist li a
- {
- padding: 0.25em 0.5em 0.25em 0.75em;
- border-left: 1em solid #AAB;
- background: #CCD;
- text-decoration: none;
- }
- #navlist li a:link { color: #448; }
- #navlist li a:visited { color: #667; }
- #navlist li a:hover
- {
- border-color: #FE3;
- color: #FFF;
- background: #332;
- }
- -->
- </style>
- </head>
- <body>
- <div id="navcontainer">
- <ul id="navlist">
- <li id="active"><a href="/" id="current">WebDm.Cn</a></li>
- <li><a href="http://webdm.cn">ASP</a></li>
- <li><a href="#">PHP</a></li>
- <li><a href="#">JSP</a></li>
- <li><a href="/">AJAX</a></li>
- </ul>
- </div>
- </body>
- </html>
- <br>
- <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
复制代码代码来自http://www.webdm.cn/webcode/d9ac ... 6-bcb5b5013c46.html
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论