如何用DIV+CSS做漂亮的横排导航栏
- 原创
- |
- 浏览： 66699
- |
- 更新：
62 条相关视频
-
如何用DIV+CSS做漂亮的横...
-
英雄联盟怎么联系客服
-
HTMLcss怎样让div固定在顶...
-
lol英雄联盟被盗误封号三...
-
Word怎么设置背景图片？
-
表格的内外框线怎么设置
-
在excel2010中rank函数的...
-
WPS中的柱形图上如何添加...
-
Excel怎样把柱状图和折线...
-
pdf中参考文献复制到word...
-
![如何用DIV+CSS做漂亮的横排导航栏]()
1
-
![如何用DIV+CSS做漂亮的横排导航栏]()
2
-
![如何用DIV+CSS做漂亮的横排导航栏]()
3
-
![如何用DIV+CSS做漂亮的横排导航栏]()
4
-
![如何用DIV+CSS做漂亮的横排导航栏]()
5
-
![如何用DIV+CSS做漂亮的横排导航栏]()
6
-
![如何用DIV+CSS做漂亮的横排导航栏]()
7
我们在做网站前端页面的时候，导航栏是必不可少的，我们如何才能用CSS做出漂亮的导航栏呢？那么就看下面的方法吧！
具体的步骤
-
![如何用DIV+CSS做漂亮的横排导航栏]()
-
下面我们通过CSS 来改变他的样式。
首先我们先让导航在浏览器的中间。不过在让他居中前得先设置一个宽度，没有宽度就没法居中，这个的原因我就不用赘述了吧！
现在常用的网站宽度为960或980（当然也有其他的，一些网站会根据访客的显示器大小有不同宽度的样式，原因我就不在这多废话了）我们在这就用980吧。
方法是在<style></style>之间加入如下代码来改变他的宽度。为了让结果明显，我们给它又加了一个边框。
<style>
<!--
.nav ul{
width:980px;/*设置元素宽度为980px*/
border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/
}
-->
</style>
测试结果如图2
![如何用DIV+CSS做漂亮的横排导航栏]()
-
接下来我们让他居中。我们在样式中加入以下代码。
.nav ul{
width:980px;/*设置元素宽度为980px*/
border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/
margin:0px auto 0px auto;/*也可以简写为margin:0 auto*/
}
测试结果应为图3。
![如何用DIV+CSS做漂亮的横排导航栏]()
-
因为我们要做的是横向的导航栏，所以现在我们要把它变成横向排列。我们在样式中加入以下代码。
.nav ul li{
float:left;/*让li元素左浮动*/
}
我们看到测试结果如图4。
边框之所以挤到一起了是因为浮动以后 li就变成了联级元素，就没有宽和高了，所以也就没法把边框撑起来了啊。（具体的原因想知道可以百度）当然稍后我们可以给ul或.nav加上高度。
![如何用DIV+CSS做漂亮的横排导航栏]()
-
接下来，我们通过给元素<a>添加样式，让他更美观。加入以下代码。
.nav ul li a{
width:80px;/*设置元素宽为80px*/
height:28px;/*设置高度为28px*/
line-height:28px;/*设置行距为28px，让文字在每行的中间位置*/
background:red;/*设置元素的背景为红色*/
color:#FFF;/*文字颜色是白色*/
margin:5px 10px;
font-size:12px;/*用12号字*/
display:block;/*这个比较关键，因为a本身就是联级元素，本身不具有宽高，用这个把它变成块级元素，这样前面设置的宽和高就能起作用了*/
text-align:center;/*让文本居中*/
text-decoration:none; /*去掉下划线*/
}
效果如图5
![如何用DIV+CSS做漂亮的横排导航栏]()
-
我们再加入点互动，当访客鼠标放到某个元素上的时候，这个元素要有别于其他元素。要实现这个我们就要用到:hover这个伪类。在样式中加入以下代码。
.nav ul li a:hover{ /*这个大概的意思就是当鼠标放到这个a元素的上面时，这个a元素的样式就按下面的代码执行*/
width:78px;
height:26px;
line-height:28px;
border:1px solid red;
color:red;
background:#FFF;
}
测试结果如图6
![如何用DIV+CSS做漂亮的横排导航栏]()
-
最后稍微整理一下代码
.nav ul{
width:980px;
margin:0px auto;
height:38px;
padding:0;
}
.nav ul li{
float:left;
}
.nav ul li a{
width:80px;
height:28px;
line-height:28px;
background:red;
color:#FFF;
margin:5px 10px;
font-size:12px;
display:block;
text-align:center;
text-decoration:none;
}
.nav ul li a:hover{
width:78px;
height:26px;
line-height:28px;
border:1px solid red;
color:red;
background:#FFF;
}
看看效果，成功没？
思路就是这样的，其中还可以再加一些自己的元素，比如背景图片之类，效果就更好了。
![如何用DIV+CSS做漂亮的横排导航栏]()
END
