专注于互联网--专注于架构

 最新标签
网站地图
文章索引
Rss订阅

首页 »Html教程 » ulli横向:如何应用ul、li标签 创建css横向导航菜单？ »正文

ulli横向:如何应用ul、li标签 创建css横向导航菜单？

来源: 发布时间:星期四, 2009年2月12日 浏览:298次 评论:0


　　
　　我们制作导航条按照传统思路方法由放在行表格单元里图形图像构成或者由单元格内文字所组成由于人们不再推荐用表格来定位任何非表格页面内容所以很多制作Web人正在寻找新思路方法用结构化XHTML标记和CSS格式来创建导航条这样创建方式也更对搜索引擎蜘蛛友好这对我们来说是非常重要

　　创建CSS样式文本导航条最简单解决思路方法也许就是把所有链接都放在行文本里这种思路方法看起来很合理也很直观但问题在于把所有链接都放在行文本里就很难控制链接的间以及前后空白所以为了避免所有链接都挤在起你最后通常都不得不插入些东西或者非换行空白作为分隔让这些文字分离开来不至于混在起但这样有意义吗？

　　现在我们正常做法是应用ul、li标签把链接作为无序列表(unorderedlist)来标识再应用CSS样式对其进行控制按我们预想形式在容器中显示出来对导航条使用无序列表似乎是不符合直观感受我们习惯于把无序列表作为个竖着推起来列表项目每个前面都放着个列表预设标记这似乎不符合导航条水平方向习惯但作为独立列表项目集合列表逻辑结构能够适用于导航条里链接；而CSS规则让你能够强制取代列表项目缺省表现形式以消除它们并安排列表项在容器内按水平方向排列而不是从上而下规则现在让我们来看看例子根据无序列表创建CSS样式和XHTML标签横向导航菜单

　　我们看看下面xhtml代码:

\" 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>


　　我们再看看有关这段xhtmlCSS代码:

\" 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;
padding:7px10px;
color:#FFF;
}
#navlia:hover{
color:#ff0;
background-color:#f00;
}


　　我们来看看上面代码运行效果:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run [www.52css.com]

=\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]


　　或许你并不能完全理解这些代码都是什么意义都用来控制什么达到什么效果
　　下面我们来解析上面代码:

　　xhtml代码首先定义了个容器divid=\"nav\"这个容器用来放置这个无序列表横向导航菜单内容但也有人认为这个容器是多余直接定义ulid=\"nav\"就可以了我们不建议你这样做要知道我们站点是可扩展我们要为将来扩展留有足够余地如果我们导航样式设计更加复杂仅有ul是不能满足需要我们定义这样容器也更符合我们编写代码习惯

　　#nav定义了窗口宽高及背景颜色#navul包含有margin和padding声明字体及颜色声明line-height:30px;是非常重要定义如果取消掉行高定义我们链接文字垂直居中就可能受到影响white-space:nowrap;或许大家并不能理解有什么作用它定义了强制在同行内显示所有文本直到文本结束或者遭遇br对象有关white-space属性可以参考这里
　　#navli中list-style-type:none;去除了列表项所使用预设标记使其更象是纯文本而没有列表标记display:inline;声明则能够让列表项目在页面上从左向右浮动而不会让每个项目显示在单独行里而从上至下排列这两项声明是我们实现无序列表横向导航菜单关键
　　#navlia和#navlia:hover定义了链接样式其中内容就不作深入了唯要讲就是:padding:7px10px;它是用来控制链接文字的间空白间隔你可以试着改变数值试试看

　　至此无序列表创建css横向导航菜单工作就结束了更多内容欢迎你关注我们网站WebSite
　　
标签：css横向导航条 css横向导航 cssulli ulli横向
0
我顶

相关文章

读者评论

发表评论

  • 昵称：
  • 内容：

热门标签

精华推荐

最新标签

Dig排行

阅读排行

最新文章