HTML+CSS制作导航条
今天无意中看到一个网站的导航条，觉得效果还不错，而且制作也很简单，就自己试着用HTML+CSS做了个一模一样的，下面就把导航条的制作方法及步骤分享给大家！
操作方法
- 01
首先在<body>标签中建立一个DIV，为其命名为“nav”，在DIV中建立一个无序列表，根据图中所示列表共分为9个项目，并且每个项目都带有超链接，因为是做演示，以下的每个链接就以空链接来做示范，代码如下： <html> <head> <title>制作网页导航条</title> <style> <!-- --> </style> </head> <body> <div id="nav"> <ul> <li><a href="#" />网站首页</a></li> <li><a href="#" />公司简介</a></li> <li><a href="#" />产品展示</a></li> <li><a href="#" />新闻动态</a></li> <li><a href="#" />企业文化</a></li> <li><a href="#" />招贤纳士</a></li> <li><a href="#" />联系我们</a></li> <li><a href="#" />来访路线</a></li> <li><a href="#" />收藏本站</a></li> </ul> </div> </body> </html> 打开浏览器预览，看到的效果如下：
- 02
鼠标右键将导航条的背景图片先存入电脑，如下图：
- 03
现在来为导航条中的元素逐一设置CSS样式，先为ul规定样式；代码如下： <style> <!— #nav ul { Width:1000px; height:40px; margin:30px auto; padding:0; list-style:none; border-top:solid 5px #DAA520; border-bottom:solid 5px #DAA520; background:url(img/navig-bg.jpg); } --> </style> 上列代码的意思依次为 #nav ul { 宽度：1000像素； 高度：40像素； 外边距：上下各30像素，左右相等； 内边距：0； 列表风格显示：无;（这一句代表去掉列表前面的黑点） 上边框线：实体线，5像素，颜色#DAA520； 下边框线：实体线，5像素，颜色#DAA520； 背景：URL（图片地址）； } 打开浏览器预览，看到的效果如下：
- 04
再为<ul>中的<li>规定样式，代码如下： #nav ul li { float:left; text-align:center; font:16px/2.5 "microsoft yahei"; } 上列代码的意思依次为 #nav ul li { 宽度：100像素； 浮动：左对齐； 文本对齐：居中； 文字：大小16像素，行高16×2.5，字体”微软雅黑”； } 打开浏览器预览，看到的效果如下：
- 05
接下来就是为<li>里的链接<a>标签规定样式了，代码如下： #nav ul li a { text-decoration:none; color:#800080; } 这句代码的意思是a 元素文字装饰：无（表示去掉下划线）； 默认下文字颜色：#800080（颜色代码）； #nav ul li a:hover { display:block; color:#FFFFFF; background:#DC143C; } 这句代码的意思是当鼠标移上a元素时，显示为：块；文字颜色#FFFFFF（白色）；背景颜色：#DC143C（红色）； 到了这一步，这个导航条就已经完成了，当把鼠标移到“公司简介”这一链接时，链接就会显示为块级元素，文字显示白色，背景显示为红色，如下图所示：
- 06
所有的样式代码如下： <style type="text/css"> #nav ul { Width:1000px; height:40px; margin:30px auto; padding:0; list-style:none; border-top:solid 5px #DAA520; border-bottom:solid 5px #DAA520; background:url(images/navig-bg.jpg) } #nav ul li { width:100px; float:left; text-align:center; font:16px/2.5 "microsoft yahei"; } #nav ul li a { color:#800080; text-decoration:none; } #nav ul li a:hover { display:block; color:#FFFFFF; background:#DC143C; } </style>
