css常见导航样式,导航条css样式

CSS样式制作导航条的步骤

一、定义一个盒子（“menu”）,用来装这个导航的。

二、用无序列表（ul）中的列（li）放导航的内容。

三、把li的浮动（float）设置为向左浮动（float：left；），这样，就实现了水平导航条了。

四、在做其他的一些修饰。（下面我给我弄的一个简单的导航条给你理解）

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title无标题文档/title

style type="text/css"

#menu{

width:500px;

margin:0 auto; /*令盒子居中*/

font-size:20px; /*定义字体的大小*/

}

ul{

margin:0; padding:0; /*把浏览器默认的间隔去掉*/

list-style:none; /*把前面的序列号去掉*/

}

li{

float:left; /*向左浮动，这个是实现水平的重要步骤！！*/

padding:0 15px; /*li里面的字体和边框的距离*/

}

a{

text-decoration:none; /*去掉超链接的下划线*/

color:#333; /*超链接的字体颜色*/

}

a:hover{

color:#696;

}

/style

/head

body

div id="menu"

ul

lia href="#"菜单1/a/li

lia href="#"菜单1/a/li

lia href="#"菜单1/a/li

lia href="#"菜单1/a/li

/ul

/div

/body

/html

相关问答

Q1: 用css定义一条导航栏

css定义一条导航栏

首先建立一个DIV，为其命名为“nav”，在DIV中建立一个ul无序列表，导航共有几个栏目，就为列表添加几个li的列表项，为每个列表项中的内容加上超链接，链接到所需的项目页面。

然后设置CSS样式，为列表规定宽度和高度，去掉列表前面的符号，代码为：

ul {width:宽度值；height：高度值； list-style:none；}

如果是横向导航，还需为里面的列表项li标签设置左浮动的样式，代码为：li {float:left;}

每个栏目之间分隔的距离可通过margin（外边距）属性来设置。

导航条的更多样式及详细步骤可去这里参考

Q2: 网页导航条css样式的问题求教

比如点击的时间onclick="backColor()"

script type="text/javascript"

function backColor()

{

//第一种 DOM的方式

document.getElementById("你得ID").css({"background-color","blue"});

//第二种 jquery

$.("你的id").css({"background-color","blue"});

}

/script

Q3: css 导航条样式

js可以实现，如果不用js的话，那么需要切几张不同的图片，然后控制a:hover就行了

Q4: CSS样式导航栏

是应该是两个导航都用了float吧，我建议 你在一级导航和2级导航之间加上div style="clear:both;"/div

Q5: CSS导航样式

你知道li图片，就是list-style-image:XX.jpg。XX.jpg就是那个你说的那条线了，

还有一种方法，就是计算好导航的文字，把你那条线也一起做成背景图片，这样就不用管那么多了

假如你不是太懂，就百度一下“list-style-image”

我想这样你就明白了

假如还有什么不懂，就HI我，也可以继续追问。