CSS标示导航条当前所在频道

2016-02-19 23:53 8 1 收藏

下面图老师小编跟大家分享CSS标示导航条当前所在频道,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

【 tulaoshi.com - Web开发 】

利用CSS在导航条上标示当前所在频道的技术,已经有很长时间了,在很多CSS的书中都介绍过,不过还是总被问到,因此写一个简单的示例来讲解一下。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

其实原理非常简单:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)


1) 按照不同的频道(栏目),分别为body定义id。例如:

首页:body id="p_home"
Blog频道:body id="p_blog"
相册频道:body id="p_ablum"
频道内的所有页面都要统一定义id。

2) 导航条的相应栏目,也定义id或者class:

ul id="nav"
li class="nav_home"a href="index.html"首页/a/li
li class="nav_blog"a href="blog.html"Blog/a/li
li class="nav_album"a href="album.html"相册/a/li
/ul

3) 当前位置通过不同的body的id来分别:

#p_home .nav_home a,
#p_blog .nav_blog a,
#p_album .nav_album a {

}

来源:https://www.tulaoshi.com/n/20160219/1630806.html

延伸阅读
标签: SQLServer
  这里有几个关于SQL SERVER的问题想向您请教(服务器端脚本编程): (1)如何在SQL SERVER中用SQL语句获得当前的数据库名称? (2)如何在定义一个全局变量而不是局部变量,因为我在这里定义了 一个循环,在这个循环里有对一个临时表加字段和对临时表插入数据 的操作。但这两个操作必须放在不同的批次里.(需要用GO语句分开)。 这时控制循...
本教程来源于pscloud作者未知 (原创翻译转载请注明出处表明链接谢谢) 利用web2.0风格创建一个令人惊奇的网站导航条。 1. 创建一个新文件600 * 140px。现在选择圆角矩形工具制作一个圆角矩形如下图。 2. 应用层样式:内发光 混合模式:滤色 方法:柔和 3. 渐变叠加:颜色设置为 #5e80a3 ,#839db8 and #b8c7d6 4.描边: #5e80a3 5. ...
标签: PS PS基础
效果 1, 在PS中新建文件,宽度定义为1000px,实际上我们所要用到的宽度一般在950px-980px之间。为了方便更好的展示网站的整体效果。所以文件的宽度应大于网页实际的宽度。高度自定,但最好要大于整个页面的高度,在没有办法确定页面的高度范围时,我们可以把高度定到大于网页高度。这样,整个页面制作好了。我们可以使用裁切工具。将多余的...
最终效果: 1.新建一个600*150的文件,背景填充黑色。选择“圆角矩形工具”画一个同样填充黑色的圆角矩形, 选择“添加图层样式—斜面浮雕—描边”: 得到如下效果: 2.制作高光区。新建图层,选择钢笔工具,绘出一个方框如下: 右键单击钢笔路径转换成选取并填充白色。 黑色的圆角矩形框载入选区--ctrl+左击图层,选...
标签: Web开发
不少朋友通过各种方式问我要 Blog 顶部的滚动导航菜单的代码。其实也没什么特别的,但既然有需求,我就还是把这部分代码整理出来,供大家参考。 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html&nb...

经验教程

283

收藏

62
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部