如何用DIV+CSS做漂亮的横排导航栏

html-css0158

如何用DIV+CSS做漂亮的横排导航栏,第1张

先码好导航栏所需要的基本的HTML代码

这个就不必多说具体的代码如下:

<html>

<head>

<title>横向导航栏</title>

<style>

<!---->

</style>

</head>

<body>

<div class="nav">

<ul>

<li><a href="#">首页</a></li>

<li><a href="#">导航1</a></li>

<li><a href="#">导航2</a></li>

<li><a href="#">导航3</a></li>

<li><a href="#">导航4</a></li>

<li><a href="#">导航5</a></li>

<li><a href="#">导航6</a></li>

</ul>

</div>

</body>

</html>

测试结果应为下图(1)

下面我们通过CSS 来改变他的样式。

首先我们先让导航在浏览器的中间。不过在让他居中前得先设置一个宽度,没有宽度就没法居中,这个的原因我就不用赘述了吧!

现在常用的网站宽度为960或980(当然也有其他的,一些网站会根据访客的显示器大小有不同宽度的样式,原因我就不在这多废话了)我们在这就用980吧。

方法是在<style></style>之间加入如下代码来改变他的宽度。为了让结果明显,我们给它又加了一个边框。

<style>

<!--

.nav ul{

width:980px/*设置元素宽度为980px*/

border:1px solid #000/*设置一个颜色为#000,宽度为1px的边框*/

}

-->

</style>

测试结果如图2

接下来我们让他居中。我们在样式中加入以下代码。

.nav ul{

width:980px/*设置元素宽度为980px*/

border:1px solid #000/*设置一个颜色为#000,宽度为1px的边框*/

margin:0px auto 0px auto/*也可以简写为margin:0 auto*/

}

测试结果应为图3。

因为我们要做的是横向的导航栏,所以现在我们要把它变成横向排列。我们在样式中加入以下代码。

.nav ul li{

float:left/*让li元素左浮动*/

}

我们看到测试结果如图4。

边框之所以挤到一起了是因为浮动以后 li就变成了联级元素,就没有宽和高了,所以也就没法把边框撑起来了啊。(具体的原因想知道可以百度)当然稍后我们可以给ul或.nav加上高度。

接下来,我们通过给元素<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

我们再加入点互动,当访客鼠标放到某个元素上的时候,这个元素要有别于其他元素。要实现这个我们就要用到:hover这个伪类。在样式中加入以下代码。

.nav ul li a:hover{ /*这个大概的意思就是当鼠标放到这个a元素的上面时,这个a元素的样式就按下面的代码执行*/

width:78px

height:26px

line-height:28px

border:1px solid red

color:red

background:#FFF

}

测试结果如图6

最后稍微整理一下代码

.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

}

看看效果,成功没?

思路就是这样的,其中还可以再加一些自己的元素,比如背景图片之类,效果就更好了。

在ul标签下li的默认样式为一个实心圆(disc)   可忽略不写li样式的改变是用 list-style:属性值 来改变的我们给li设置css,去除默认样式(实心圆)将li的样式设置为空心圆将li的样式设置为实心正方形其他:  decimal   :   CSS1 阿拉伯数字   lower-roman   :   CSS1 小写罗马数字     upper-roman   :   CSS1 大写罗马数字     lower-alpha   :   CSS1 小写英文字母     upper-alpha   :   CSS1 大写英文字母     armenian   :   CSS2 传统的亚美尼亚数字     cjk-ideographic   :   CSS2 浅白的表意数字     georgian   :   CSS2 传统的乔治数字     lower-greek   :   CSS2 基本的希腊小写字母    hebrew   :   CSS2 传统的希伯莱数字     hiragana   :   CSS2 日文平假名字符     hiragana-iroha   :   CSS2 日文平假名序号     katakana   :   CSS2 日文片假名字符     katakana-iroha   :   CSS2 日文片假名序号     lower-latin   :   CSS2 小写拉丁字母   upper-latin   :  CSS2 大写拉丁字母 

题目有点简单,不清楚具体问题是什么。

下面写了一下关于鼠标移入移出,li变色的例子,仅供参考。

思路:当鼠标移入时,修改li的背景色,直接用background修改就可以。

鼠标移出时,恢复原来li的背景色。

 <body>

     <ul id="ul">

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </body>

    <script>

  var oUl = document.getElementById('ul')

var aLi = oUl.children

for(var i=0i<aLi.lengthi++){

aLi[i].onmouseover = function(){

this.style.background = 'red'

}

aLi[i].onmouseout = function(){

this.style.background = ''

}

}

</script>