当前位置:首页 > DIV+CSS教程 > 正文

CSS网页布局入门教程10:带当前标识的标签式横向导航

作者:不详 来源:aa25收集 【 】 浏览: 修改日期:2008-06-17 我要评论(108)     

本站2010年9月新增《十天学会web标准(div+css)》系列教程,欢迎学习!

当前标识指用户点击该频道或栏目,该栏目的标签呈现出与其他标签不同的颜色用以提示用户所处的位置。
这种设计是网站设计中相当简单而且是相当经典的一种增进网站可用性的方式。网站让用户使用时是应该考虑到用户浏览的思考过程,糟糕的网页设计只顾及页面本身而不去考虑用户感受,优秀的设计应当是以用户为中心出发的,这样一种简单的当前频道的标识往往是许多设计师所忽略的内容,用户需要知道自已的位置,以及知道自已还能去哪里,通过对当前位置的标识,有助于让用户认清自己在网站中的方位,并引导用户访问其它频道。
从上一篇中的代码继续编写,为了让某一个频道成为一个当前所属的频道,这个频道必须有一个和其它频道不一样的背景颜色或文字,但目前我们是针对所有的a标签统一设置的背景,因此首要任务是设计一个例外情况,即当前频道,这样一个特殊的频道,我们对HTML中的标签做一些修改:

  <ul id="nav">
    <li><a id="current" href="/index.asp">主页</a></li>
    <li><a href="/Sort/List_4.html">DIV+CSS教程</a></li>
    <li><a href="/Sort/List_5.html">常用代码</a></li>
    <li><a href="/Sort/List_6.html">水晶图标</a></li>
    <li><a href="/Sort/List_7.html">幻灯图片</a></li>
    <li><a href="/Sort/List_10.html">软件下载</a></li>
    <li><a href="/css2/">CSS2.0实用手册</a></li>
  </ul>

我们在第一个a标签中加入了一个新的id,名为current,继续看css部分的编写,先为current这个id做个颜色设计:

#nav li a#current { background-color:#2788da; color:#fff;}

预览一下效果,首页的背景色已经变成蓝色了。


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

继续来完善我们的导航,页菜单下加一条横线

#nav { height:26px; border-bottom:2px solid #2788da;}

我们给ul标签设置了高度,并且给它的底部加上了2px的实线,再次预览一下效果,和我们当初想像的标签式导航已经大同小异了,回到nav元素的定义,border-bottom是我们新加入的一个属性,指的是元素的下边框的设置,它的参数指的是2px的宽度、单实线样式、颜色值为#2788da,通过这样的设置,我们的ul标签就拥有了2px带色彩的下边框。


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

简单的标签式的导航通过一组css的设计就算完成了,每当换一个频道页面时,只需要将id="current"移动到当前频道所在的a元素中,即可完成颜色的切换。不需要重新编写颜色属性,而且需要修改时也可以方便在css中修改完成。

有关本例中应用XHTML中元素间的CSS属性继承的问题。
何为继承呢?继承指的是每一个元素可以有多个样式,在普通情况下,他遵守最外层的样式设计,如果遇到对其自身的样式设计,他将继承外层样式的基础上,优先考虑自身的样式。
如果内层的样式和外层的样式有冲突,则最终显示的是内层的样式效果。

本例中还接触到一个新的属性:list-style:none;在预览用的样式代码内。
在默认情况下,ul内的li列表形式前边带有圆点的,从以前的章节可以看到。本句的意思是去掉前边默认的圆点。
 

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS教程〗Tags: 横向导航 标签

所属专题:入门教程

更多评论(108)..会员评论

lv2997924(27.45.*.*) 发表于:2011-03-20 21:46:49
秦商(222.177.*.*) 发表于:2008-06-24 15:14:07 #nav li a#current { background-color:#2788da; color:#fff;}为什么要把#nav li a#current写完整才能表现出效果,而只定义#current不行,#current在逻辑上完全可以成为独立样式存在。望解答!谢谢 管理员回复:这个问题我也一直觉得蹊跷,单加个#current是不生效的,而且写成这样也不生效#nav li a #current(即在a和#之间加个空格),理论上加不加空格都不影响的 你好,我想请问这个问题现在有新的答案了么?为什么#current不能单独存在
管理员回复:没有
59wenwen(10.148.*.*) 发表于:2010-12-20 11:14:23
#nav { height:26px;这里26px是怎么算的啊,下面设置li的高度不是22px吗?
管理员回复:自己定的
xj206(218.94.*.*) 发表于:2010-10-19 19:09:24
#nav li a#current {……} 这个不太明白,这是ID选择器的嵌套用法吗?ID里面套另外一个ID? 请指教,谢谢
管理员回复:有关这咱写法,请参看css样式表手册
huyaling(58.210.*.*) 发表于:2010-09-06 20:41:39
每当换一个频道页面时,只需要将id="current"移动到当前频道所在的a元素中,即可完成颜色的切换,这个怎么切换呢?请指教!
管理员回复:复制粘贴到当前页面
13back(119.123.*.*) 发表于:2010-08-12 11:19:31
这个导航,我在本地做完,测试一切OK,但上传上去后,带数据库的,却无法打开,请问是怎么回事?
管理员回复:那应该是程序方面问题了
wind128(119.99.*.*) 发表于:2010-08-11 12:34:09
为什么页面不是最大化显示时,有的频道会排在其它频道的下面?又怎样解决这个问题?
管理员回复:定义个宽度
yaoyao(218.97.*.*) 发表于:2010-07-12 09:45:15
在火狐下,点运行代码没反应...火狐版本Firefox/3.5.10
管理员回复:是的,暂时不支持火狐
123(222.68.*.*) 发表于:2010-07-08 17:04:21
每当换一个频道页面时,只需要将id="current"移动到当前频道所在的a元素中,即可完成颜色的切换,,这是什么意思,还要手动切换呀,,
管理员回复:或者js

出差旅游免费预订酒店

【视频教程】新手常见问题