横版:
css代码
CSS中值得注意的是以下几点:
- 让ul 里的 li 浮动到左侧。ul也要浮动。a的浮动是为了修复IE/MAC的bug。
- a的left top背景是分割线。其中.first a 没有背景。
- link:连接平常的状态 active:连接被按下的时候 visited:连接被访问过之后 hover:鼠标放到连接上的时候
#clear { clear:both;}
ul {
margin: 0;
padding: 0;
float: left;
width: 720px;
background: #FAA819 url(images/mainNavBg.gif) repeat-x;
list-style: none;
text-transform: uppercase;
}
ul li {
float: left;
}
ul a {
padding: 0 2em;
line-height: 2.1em;
background: url(images/mainNavBorder.gif) repeat-y left top;
text-decoration: none;
color: #fff;
float: left;
display: block;
}
ul a:link {
color: yellow;
}
ul a:visited {
color: black;
}
ul a:hover {
color: green;
}
ul a:active{
color: blue;
}
ul .first a {
background: none;
}
html代码
<ul>
<li class="first selected"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Blueidea</a></li>
<li><a href="#">ALA</a></li>
</ul>
a :link、a:hover、a:visited这几个元素,定义CSS时候的顺序不同,也会直接导致链接显示的效果不同。
我想,原因就在于浏览器解释CSS时遵循的“就近原则”。
举例来说:
我想让未访问链接颜色为蓝色,活动链接为绿色,已访问链接为红色:
第一种情况:我定义的顺序是a:visited、a:hover、a:link,这时会发现:把鼠标放到未访问过的蓝色链接上时,它并不变成绿色,只有放在已访问的红色链接上,链接才会变绿。
第二种情况:我把CSS定义顺序调整为:a:link、a:visited、a:hover,这时,无论你鼠标经过的链接有没有被访问过,它都会变成绿色啦。
这是因为,一个鼠标经过的未访问链接同时拥有a:link、a:hover两种属性,在第一种情况下,a:link离它最近,所以它优先满足a:link,而放弃a:hover的重复定义。
在第二种情况,无论链接有没有被访问过,它首先要检查是否符合a:hover的标准(即是否有鼠标经过它),满足,则变成绿色,不满足,则继续向上查找,一直找到满足条件的定义为止。
一句话:在CSS中,如果对于相同元素有针对不同条件的定义,宜将最一般的条件放在最上面,并依次向下,保证最下面的是最特殊的条件。
这样,浏览器在显示元素时,才会从特殊到一般、逐级向上验证条件,才会使你的每一个CSS语句都起到效果。
当然,如果故意打乱顺序,也会造成一些特殊的效果。比如,可以为链接制造出下划线颜色与文字颜色的差异。
近日突然发现,原来这个CSS问题早已有高人提出啦。还是个老外呢。他给总结了一个便于记忆的“爱恨原则”(LoVe/HAte),即四种伪类的首字母:LVHA。
再重复一遍正确的顺序:a:link、a:visited、a:hover、a:active .
分享到:
相关推荐
http://www.yiyacn.com/sucai/daima/test/cssxhtml/css-dock-menu/index.html 演示 解压密码:yiyacn.com CSS+JS实现苹果机(MAC)OS系统导航条(眩目+逼真)
我们知道了什么是“内容块状元素和内联元素”,以及XHTML+CSS布局的核心概念“盒子模型”,同时又学习了一下页面布局中两种方法中的一种方法“浮动”,这次我们就利用这三个概念,来制作一款,经典的导航条,别看它...
【第四课】导航条 【第五课】浮动(float)页面布局 【第六节】定位 【第七节】定位应用 【第八课】CSS Hack ================================= 小技巧 【单张图片按钮实例】 【首行文字两文字缩进】
本文实例讲述了DIV+CSS实现仿京东商城导航条效果。分享给大家供大家参考。具体如下: 这里演示了DIV+CSS实现仿京东商城导航条功能代码,鼠标滑过导航条选项即可弹出对应的子菜单列表,界面简洁大方。 运行效果截图...
5.1 创建垂直导航条 126 5.2 创建“滑动门”标签式导航栏 128 5.2.1 滑动门技术 128 5.2.2 “滑动门”标签式导航栏实例 129 5.3 打造个性折叠菜单 132 5.4 创建下拉菜单 137 5.5 CSS图像映射 141 5.6 小结 149 第6章...
),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国... [显示全部] 《CSS网站布局实录:基于Web标准的网站设计指南...
本文实例讲述了JS+CSS实现带有碰撞缓冲效果的竖向导航条代码。分享给大家供大家参考。具体如下: 这是一款碰撞缓冲效果的导航条,JavaScript妙味课堂奉献给大家的作品,很不错的竖向菜单,希望大家喜欢。所用技术是...
本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果。分享给大家供大家参考。具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用...
CSS Code复制内容到剪贴板 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> <html xmlns=http://www.w3.org/1999/xhtml>...
html 仿百度百科导航下拉菜单功能,具体代码如下所示: 演示图1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
本文实例讲述了js实现适用于素材网站的...这是一款适用于素材网站的黑色多级菜单导航条,无需jQuery,采用CSS+javaScript来实现,整体效果非常棒,用来学习CSS也是很不错的。 运行效果截图如下: 在线演示地址如下: ...
一般情况下导航菜单的背景图片都是比较有规则的,但是平时我们也会遇到很多背景图片形状不规则导航条(比如但鼠标移上的时候,背景图片不规则,本例只讨论此种类型),如下图所示: (图一) 当鼠标移上去的时候背景...
本文实例讲述了jquery+css实现的红色线条横向二级...这是一款带导航的菜单,当前是哪一项菜单,会很个性的显示出来,鼠标放上后会显示菜单缺口,挺有意思的吧,希望大家喜欢。 运行效果截图如下: 在线演示地址如下: ...
这里用CSS控制文字显示在一条线的中间,常见于网站首页的各个版块导航处,给人的感觉是结构更清淅,这是一段实现这种功能的CSS代码,举一返三,你可以把它用到其它地方。 复制代码代码如下:<!DOCTYPE ...
关于CSS中的命名规则(其实我觉得是XHTML元素的命名规则更加合理些)这个问题,已经有很多人在说了,其中也不乏一些真知灼见。不过这种东西也是仁者见仁,智者见智,只要一个团队有统一的命名规则要求,在日常开发和...
这是一款基于JS实现下拉菜单,是一款灵巧的网站导航条,支持二级显示,向下滑动显示,经典的下拉菜单,JS和CSS共同编写实现,Li菜单列表风格,便于修改,兼容各大主流浏览器,相信你也会喜欢的。 运行效果截图如下:...
采用XHTML和CSS设计可重用可换肤的WEB站点 asp.net的网址重定向方法的比较:面向搜索引擎友好 也谈 ASP.NET 1.1 中 QueryString 的安全获取写法 ASP.NET运行模式:PageHandlerFactory 利用搜索引擎引用来高亮页面...
1、一般的地图打开都有放大、缩小和全图的导航条,以便于用户对地图的查看,下面我们将在OpenLayers中实现这一功能; 2、在之前创建的空白站点下面新建一个html的页面,引入ol.js和ol.css文件,然后在body标签中创建...
一 Jeecms安装过程 将解压后得到的jeecms-3.0.2-final文件夹下的root文件夹更名为jeecms拷贝到tomcat 安装目录下的webapps 文件夹下(例如: D:\Tomcat 6.0\webapps\),启动tomcat,在地址栏中输入...
媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。 GCF 谷歌内嵌浏览器框架, 使用此插件,用户可以通过Internet Explorer的用户界面,以Chrome内核的渲染方式...