华山资源网

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

  <ul id="nav">
    <li id="current"><a 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;}

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

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
继续来完善我们的导航，页菜单下加一条横线

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

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

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
简单的标签式的导航通过一组css的设计就算完成了，每当换一个频道页面时，只需要将id="current"移动到当前频道所在的a元素中，即可完成颜色的切换。不需要重俗人编写颜色属性，而且需要修改进也可以方便在css中修改完成。

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

本例中还接触到一个新的属性：list-style:none;在预览用的样式代码内。
在默认情况下，ul内的li列表形式前边带有圆点的，从以前的章节可以看到。本句的意思是去掉前边默认的圆点。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com