HTML+CSS制作导航条
的有关信息介绍如下：
今天无意中看到一个网站的导航条，觉得效果还不错，而且制作也很简单，就自己试着用HTML+CSS做了个一模一样的，下面就把导航条的制作方法及步骤分享给大家！
首先在
标签中建立一个DIV，为其命名为“nav”，在DIV中建立一个无序列表，根据图中所示列表共分为9个项目，并且每个项目都带有超链接，因为是做演示，以下的每个链接就以空链接来做示范，代码如下：打开浏览器预览，看到的效果如下：
鼠标右键将导航条的背景图片先存入电脑，如下图：
现在来为导航条中的元素逐一设置CSS样式，先为ul规定样式；代码如下：
上列代码的意思依次为
#nav ul {
宽度：1000像素；
高度：40像素；
外边距：上下各30像素，左右相等；
内边距：0；
列表风格显示：无;（这一句代表去掉列表前面的黑点）
上边框线：实体线，5像素，颜色#DAA520；
下边框线：实体线，5像素，颜色#DAA520；
背景：URL（图片地址）；
}
打开浏览器预览，看到的效果如下：
再为
- 中的
- 规定样式，代码如下：
#nav ul li {
float:left;
text-align:center;
font:16px/2.5 "microsoft yahei";
}
上列代码的意思依次为
#nav ul li {
宽度：100像素；
浮动：左对齐；
文本对齐：居中；
文字：大小16像素，行高16×2.5，字体”微软雅黑”；
}
打开浏览器预览，看到的效果如下：
接下来就是为
- 里的链接标签规定样式了，代码如下：
#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（红色）；
到了这一步，这个导航条就已经完成了，当把鼠标移到“公司简介”这一链接时，链接就会显示为块级元素，文字显示白色，背景显示为红色，如下图所示：
所有的样式代码如下：
版权声明：文章由 酷酷问答 整理收集，来源于互联网或者用户投稿，如有侵权，请联系我们，我们会立即处理。如转载请保留本文链接：https://www.kukuwd.com/life/65821.html
