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

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

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

【 tulaoshi.com - Web开发 】

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

其实原理非常简单:

(本文来源于图老师网站,更多请访问http://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来分别:

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

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

}

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

延伸阅读
标签: PS PS基础
效果 1, 在PS中新建文件,宽度定义为1000px,实际上我们所要用到的宽度一般在950px-980px之间。为了方便更好的展示网站的整体效果。所以文件的宽度应大于网页实际的宽度。高度自定,但最好要大于整个页面的高度,在没有办法确定页面的高度范围时,我们可以把高度定到大于网页高度。这样,整个页面制作好了。我们可以使用裁切工具。将多余的...
标签: Web开发
div div jquery1274844839136="1"标题1/div div jquery1274844839136="2"标题2/div div jquery1274844839136="3"标题3/div div jquery1274844839136="4"标题4/div div jquery1274844839136="5"标题5/div div jquery1274844839136="6"标题6/div /div div进入之后才能看到效果!/div script type="text/javascript" src="http://code.jquery.com/...
最终效果: 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...
标签: PS PS基础
最终效果 步骤 步骤2,创建导航背景,下面忘记写了,颜色是#5a5a5a 设置灰色块的图层样式,内阴影+渐变 设置完渐变的时候效果出来啦 好,复制背景,行距是3px 为导航条写上标题 下面设置圆圈的样式 图层样式设置完毕把图层不透明°设置为70% 加上箭头得到效果 最终效果

经验教程

582

收藏

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