今天来学习CSS网页结构进门教程10：带以后标识的标签式横导游航

显示全部楼层 · 发表于 2015-1-16 10:39:01

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

方便性：课外，我们了解到现在流行的LBS系统、PJBLOG、php下面的WP、MT，都是采用Div+CSS构架。在平时的练习中我们就遇到过

本站2010年9月新增《十天学会web尺度（div+css）》系列教程，接待进修！
以后标识指用户点击该频道或栏目，该栏目标标签出现出与其他标签分歧的色彩用以提醒用户所处的地位。
这类计划是网站计划中相称复杂并且是相称典范的一种促进网站可用性的体例。网站让用户利用时是应当思索到用户扫瞄的思索历程，糟的网页计划只顾及页面自己而不往思索用户感觉，优异的计划应该是以用户为中央动身的，如许一种复杂确当前频道的标识常常是很多计划师所疏忽的内容，用户必要晓得自已的地位，和晓得自已还能往那里，经由过程对以后地位的标识，有助于让用户认清本人在网站中的方位，并引诱用户会见别的频道。
从上一篇中的代码持续编写，为了让某一个频道成为一个以后所属的频道，这个频道必需有一个和别的频道纷歧样的背景色彩或笔墨，但今朝我们是针对一切的a标签一致设置的背景，因而主要义务是计划一个破例情形，即以后频道，如许一个特别的频道，我们对HTML中的标签做一些修正：

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

我们在第一个a标签中到场了一个新的id，名为current，持续看css部分的编写，先为current这个id做个色彩计划：

#navlia#current{background-color:#2788da;color:#fff;}

预览一下效果，首页的背景致已酿成蓝色了。
<style>#navli{float:left;}#navlia{color:#000000;text-decoration:none;padding-top:4px;display:block;width:120px;height:22px;text-align:center;background-color:#ececec;margin-left:2px;}#navlia:hover{background-color:#bbbbbb;color:#ffffff;}#navlia#current{background-color:#2788da;color:#fff;}</style><ulid="nav"><li><aid="current"href="/index.asp">主页</a></li><li><ahref="/Sort/List_4.html">DIV+CSS教程</a></li><li><ahref="/Sort/List_5.html">经常使用代码</a></li><li><ahref="/Sort/List_6.html">水晶图标</a></li><li><ahref="/Sort/List_7.html">幻灯图片</a></li><li><ahref="/Sort/List_10.html">软件下载</a></li><li><ahref="/css2/">CSS2.0有用手册</a></li></ul>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
持续来完美我们的导航，页菜单下加一条横线

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

我们给ul标签设置了高度，而且给它的底部加上了2px的实线，再次预览一下效果，和我们现在想像的标签式导航已迥然不同了，回到nav元素的界说，border-bottom是我们新到场的一个属性，指的是元素的下边框的设置，它的参数指的是2px的宽度、单实线款式、色彩值为#2788da，经由过程如许的设置，我们的ul标签就具有了2px带色采的下边框。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title></title><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><style>#nav{height:26px;border-bottom:2pxsolid#2788da;list-style:none;}#navli{float:left;}#navlia{color:#000000;text-decoration:none;padding-top:4px;display:block;width:120px;height:22px;text-align:center;background-color:#ececec;margin-left:2px;}#navlia:hover{background-color:#bbbbbb;color:#ffffff;}#navlia#current{background-color:#2788da;color:#fff;}</style></head><body><ulid="nav"><li><aid="current"href="/index.asp">主页</a></li><li><ahref="/Sort/List_4.html">DIV+CSS教程</a></li><li><ahref="/Sort/List_5.html">经常使用代码</a></li><li><ahref="/Sort/List_6.html">水晶图标</a></li><li><ahref="/Sort/List_7.html">幻灯图片</a></li><li><ahref="/Sort/List_10.html">软件下载</a></li><li><ahref="/css2/">CSS2.0有用手册</a></li></ul></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
复杂的标签式的导航经由过程一组css的计划就算完成了，每当换一个频道页面时，只必要将id="current"挪动到以后频道地点的a元素中，便可完成色彩的切换。不必要从头编写色彩属性，并且必要修正时也能够便利在css中修正完成。

有关本例中使用XHTML中元素间的CSS属性承继的成绩。
作甚承继呢？承继指的是每个元素能够有多个款式，在一般情形下，他恪守最外层的款式计划，假如碰到对其本身的款式计划，他将承继外层款式的基本上，优先思索本身的款式。
假如内层的款式和外层的款式有抵触，则终极显现的是内层的款式效果。

本例中还打仗到一个新的属性：list-style:none;在预览用的款式代码内。
在默许情形下，ul内的li列表情势前边带有圆点的，从之前的章节能够看到。本句的意义是往失落前边默许的圆点。

方便性：课外，我们了解到现在流行的LBS系统、PJBLOG、php下面的WP、MT，都是采用Div+css构架。在平时的练习中我们就遇到过

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 今天来学习CSS网页结构进门教程10：带以后标识的标签式横导游航

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子