CSS无序列表导航

html-css015

CSS无序列表导航,第1张

设置li{float:left}是为了让列表在同一行中,text-decoration:

none是去除下划线的,list-style-type是去除列表项前的着重号的,起到美化的作用,设置很简单,用li标签就可以了

导航栏=链接列表

作为标准的HTML基础一个导航栏是必须的

。在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表,所以使用 <ul>和 <li>元素非常有意义:

<ul>

<li><a href="#home">主页</a></li>

<li><a href="#news">新闻</a></li>

<li><a href="#contact">联系</a></li>

<li><a href="#about">关于</a></li></ul>

从列表中删除边距和填充:

ul {

list-style-type: none margin: 0 padding: 0}

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

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

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

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

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