用css制作一个网站导航栏

现在几乎所有的网站的导航栏都是用css来制作的，随着div与css完美搭档的流行，css在制作网站导航栏方面有其绝对的优势。
下面小编来讲一下怎样用css来制作一个网站的迷你导航栏。
首先我们先写好我们的导航栏HTML代码，代码如下：


首页
联系我们
产品展示
网站留言


下面是我们的css样式：
*{ //作用于所有标签，去掉内外边距
padding:0px;
margin:0px;
}
#nav{
width:100%; //根据你的情况来定
height:25px; //根据实际情况定
background:url("...."); //设置你想要的导航背景图片
}
#nav ul.no_ul{//去除内外边距和列表前小黑点
margin:0px;
padding:0px;
list-style:none;
}
#nav li{
width:60px;
height:25px; //与导航栏行高相同
float:left; //li是块标签，设置左浮动
}
#nav a{
width:60px;
height:25px;
display:block; //a标签不是块标签，设置为块
float:left; //设为左浮动
color:black; //导航链接字体颜色
font-weight:bold; //字体加粗
font-family:Arial, Helvetica, sans-serif; //链接字体
font-size:14px; //根据实际来定
}
#nav a:hover{ //鼠标移动要链接上链接变化的样式
color:white; //字体变白，可根据自己实际来定
background:url(" "); //当鼠标移到链接上链接的背景图片
}
总结：以上的样式是大部分网站都在采用的导航栏样式，只是所用的背景图片等比较绚丽罢了。大家可以根据自己的喜好来设置背景图片，如果网站主要是针对用户体验的话，就要设计成用户能接受和喜欢的样式。



有用  |  无用 取消

猜你喜欢