css一个导航栏该怎么做

html-css07

css一个导航栏该怎么做,第1张

你的要求不难实现,通常情况下是这样处理的,你试下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>nav</title>

<style type="text/css">

<!--

.nav{ list-style:none}

.nav li{ display:inline}

.nav li a{ color:#000text-decoration:none}

.nav li a:hover{ color:#f00}

-->

</style>

</head>

<body>

<ul class="nav">

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

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

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

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

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

</ul>

</body>

</html>

代码这里发不全,好在这样也是可以的。

几个链接都要以,只要放得下;如果还有背景图,可以在样式里加上,通过background就可以,很简单的。

css定义一条导航栏

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

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

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

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

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

导航条的更多样式及详细步骤可去这里参考http://jingyan.baidu.com/article/da1091fb05fe93027849d600.html

如果是导航菜单可以使用ul无需列表来制作

同时使用CSS中的float:left来控制li靠左浮动即可实现横向菜单

注意UL或UL的父级容器宽度必须大于所有li宽度的和

例如<style>ul {padding:0margin:0list-style:nonewidth:600pxheight:50pxline-height:50pxtext-align:center}ul li {width:100pxheight:50pxfloat:left}<style><ul><li>菜单项目1</li><li>菜单项目2</li><li>菜单项目3</li><li>菜单项目4</li><li>菜单项目5</li><li>菜单项目6</li><ul>