我们制作导航条按照传统
![](/icons/9163de.gif)
思路方法由放在
![](/icons/9163yi.gif)
行表格单元里
![](/icons/9163de.gif)
图形图像构成
![](/icons/9163dou.gif)
或者由单元格内
![](/icons/9163de.gif)
文字所组成
![](/icons/9163dou.gif)
由于人们不再推荐用表格来定位任何非表格
![](/icons/9163de.gif)
页面内容
![](/icons/9163dou.gif)
所以很多制作Web
![](/icons/9163de.gif)
人正在寻找新
![](/icons/9163de.gif)
思路方法
![](/icons/9163dou.gif)
用结构化
![](/icons/9163de.gif)
XHTML标记和CSS格式来创建导航条
![](/icons/9163dou2.gif)
这样
![](/icons/9163de.gif)
创建方式也更对搜索引擎蜘蛛友好
![](/icons/9163dou.gif)
这对我们来说是非常重要
![](/icons/9163de.gif)
![](/icons/9163dou2.gif)
创建CSS样式文本导航条
![](/icons/9163de.gif)
最简单解决思路方法也许就是把所有
![](/icons/9163de.gif)
链接都放在
![](/icons/9163yi.gif)
行文本里
![](/icons/9163dou.gif)
这种思路方法看起来很合理也很直观
![](/icons/9163dou2.gif)
但问题在于把所有
![](/icons/9163de.gif)
链接都放在
![](/icons/9163yi.gif)
行文本里就很难控制链接的间以及前后
![](/icons/9163de.gif)
空白
![](/icons/9163dou2.gif)
所以
![](/icons/9163dou.gif)
为了避免所有
![](/icons/9163de.gif)
链接都挤在
![](/icons/9163yi.gif)
起
![](/icons/9163dou.gif)
你最后通常都不得不插入
![](/icons/9163yi.gif)
些东西或者非换行
![](/icons/9163de.gif)
空白
![](/icons/9163zifu.gif)
作为分隔
![](/icons/9163dou.gif)
让这些文字分离开来
![](/icons/9163dou.gif)
不至于混在
![](/icons/9163yi.gif)
起
![](/icons/9163dou2.gif)
但这样有意义吗?
现在我们正常
![](/icons/9163de.gif)
做法是应用ul、li标签把链接作为无序列表(unorderedlist)来标识
![](/icons/9163dou2.gif)
再应用CSS样式对其进行控制
![](/icons/9163dou.gif)
按我们预想
![](/icons/9163de.gif)
形式在容器中显示出来
![](/icons/9163dou2.gif)
对导航条使用无序列表似乎是不符合直观感受
![](/icons/9163de.gif)
![](/icons/9163dou.gif)
![](/icons/9163yinwei.gif)
我们习惯于把无序列表作为
![](/icons/9163yi.gif)
个竖着推起来
![](/icons/9163de.gif)
列表项目
![](/icons/9163dou.gif)
每个前面都放着
![](/icons/9163yi.gif)
个列表预设标记
![](/icons/9163dou2.gif)
这似乎不符合导航条水平方向
![](/icons/9163de.gif)
习惯
![](/icons/9163dou2.gif)
但作为独立列表项目集合
![](/icons/9163de.gif)
列表逻辑结构能够适用于导航条里
![](/icons/9163de.gif)
链接;而CSS
![](/icons/9163de.gif)
规则让你能够强制取代列表项目缺省
![](/icons/9163de.gif)
表现形式
![](/icons/9163dou.gif)
以消除它们并安排列表项在容器内按水平方向排列
![](/icons/9163dou.gif)
而不是从上而下
![](/icons/9163de.gif)
规则
![](/icons/9163dou2.gif)
现在让我们来看看例子
![](/icons/9163dou.gif)
根据无序列表创建CSS样式和XHTML标签
![](/icons/9163de.gif)
横向导航菜单
![](/icons/9163dou2.gif)
我们看看下面
![](/icons/9163de.gif)
xhtml代码:
![](\"http://www./Files/BeyondPic/2007-5/24/0752416054061301.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code
[www.52css.com]<divid=\"nav\">
<ul>
<li><ahref=\"http://www.52css.com/\">HomePage</a></li>
<li><ahref=\"http://www.52css.com/\">Div+CSS教程</a></li>
<li><ahref=\"http://www.52css.com/\">CSS布局例子</a></li>
<li><ahref=\"http://www.52css.com/\">CSS2.0教程</a></li>
<li><ahref=\"http://www.52css.com/\">CSS在线手册</a></li>
<li><ahref=\"http://www.52css.com/\">Web标准</a></li>
<li><ahref=\"http://www.52css.com/\">XHTML教程</a></li>
</ul>
</div>
我们再看看有关这段xhtml
![](/icons/9163de.gif)
CSS代码:
![](\"http://www./Files/BeyondPic/2007-5/24/0752416054061301.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code
[www.52css.com]#nav{
height:30px;
width:100%;
background-color:#c00;
}
#navul{
margin:00030px;
padding:0px;
font-size:12px;
color:#FFF;
line-height:30px;
white-space:nowrap;
}
#navli{
list-style-type:none;
display:inline;
}
#navlia{
text-decoration:none;
font-family:Arial,Helvetica,sans-ser
![](/icons/9163if.gif)
;
padding:7px10px;
color:#FFF;
}
#navlia:hover{
color:#ff0;
background-color:#f00;
}
我们来看看上面
![](/icons/9163de.gif)
代码
![](/icons/9163de.gif)
运行效果:
![](\"http://www./Files/BeyondPic/2007-5/24/0752416054078087.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run
[www.52css.com] =\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]
或许你并不能完全理解这些代码都是什么意义
![](/icons/9163dou.gif)
都用来控制什么
![](/icons/9163dou.gif)
达到什么效果
![](/icons/9163dou2.gif)
下面我们来解析上面
![](/icons/9163de.gif)
代码:
xhtml代码首先定义了
![](/icons/9163yi.gif)
个容器divid=\"nav\"
![](/icons/9163dou2.gif)
这个容器用来放置这个无序列表横向导航菜单
![](/icons/9163de.gif)
内容
![](/icons/9163dou.gif)
但也有人认为这个容器是多余
![](/icons/9163de.gif)
![](/icons/9163dou.gif)
直接定义ulid=\"nav\"就可以了
![](/icons/9163dou2.gif)
我们不建议你这样做
![](/icons/9163dou.gif)
要知道我们
![](/icons/9163de.gif)
站点是可扩展
![](/icons/9163de.gif)
![](/icons/9163dou.gif)
我们要为将来
![](/icons/9163de.gif)
扩展留有足够
![](/icons/9163de.gif)
余地
![](/icons/9163dou.gif)
如果我们
![](/icons/9163de.gif)
导航样式设计
![](/icons/9163de.gif)
更加复杂
![](/icons/9163dou.gif)
仅有
![](/icons/9163de.gif)
ul是不能满足需要
![](/icons/9163de.gif)
![](/icons/9163dou2.gif)
我们定义这样
![](/icons/9163de.gif)
容器也更符合我们编写代码
![](/icons/9163de.gif)
习惯
![](/icons/9163dou2.gif)
#nav定义了窗口
![](/icons/9163de.gif)
宽高及背景颜色
![](/icons/9163dou2.gif)
#navul包含有margin和padding声明
![](/icons/9163dou.gif)
字体及颜色声明
![](/icons/9163dou2.gif)
line-height:30px;是非常重要
![](/icons/9163de.gif)
定义
![](/icons/9163dou.gif)
如果取消掉行高
![](/icons/9163de.gif)
定义
![](/icons/9163dou.gif)
我们
![](/icons/9163de.gif)
链接文字垂直居中就可能受到影响
![](/icons/9163dou2.gif)
white-space:nowrap;或许大家并不能理解有什么作用
![](/icons/9163dou.gif)
它定义了强制在同
![](/icons/9163yi.gif)
行内显示所有文本
![](/icons/9163dou.gif)
直到文本结束或者遭遇br对象
![](/icons/9163dou2.gif)
有关white-space属性可以参考这里
![](/icons/9163dou2.gif)
#navli中
![](/icons/9163de.gif)
list-style-type:none;去除了列表项所使用
![](/icons/9163de.gif)
预设标记
![](/icons/9163dou2.gif)
使其更象是纯文本
![](/icons/9163dou.gif)
而没有列表标记
![](/icons/9163dou2.gif)
display:inline;声明则能够让列表项目在页面上从左向右浮动
![](/icons/9163dou.gif)
而不会让每个项目显示在单独
![](/icons/9163de.gif)
行里而从上至下
![](/icons/9163de.gif)
排列
![](/icons/9163dou2.gif)
这两项声明是我们实现无序列表横向导航菜单
![](/icons/9163de.gif)
关键
![](/icons/9163dou2.gif)
#navlia和#navlia:hover定义了链接
![](/icons/9163de.gif)
样式
![](/icons/9163dou2.gif)
其中
![](/icons/9163de.gif)
内容就不作深入了
![](/icons/9163dou.gif)
唯
![](/icons/9163yi.gif)
要讲
![](/icons/9163de.gif)
就是:padding:7px10px;它是用来控制链接文字的间
![](/icons/9163de.gif)
空白间隔
![](/icons/9163de.gif)
![](/icons/9163dou.gif)
你可以试着改变数值试试看
![](/icons/9163dou2.gif)
至此
![](/icons/9163dou.gif)
无序列表创建css横向导航菜单
![](/icons/9163de.gif)
工作就结束了
![](/icons/9163dou2.gif)
更多
![](/icons/9163de.gif)
内容欢迎你关注我们
![](/icons/9163de.gif)
网站WebSite