当前位置：文档之家› 第二章 CSS网页排版技术 第四节 导航设计(2011-11-16更新)

第二章 CSS网页排版技术 第四节 导航设计(2011-11-16更新)

第二章 CSS网页排版技术 第四节 导航设计(2011-11-16更新)
第二章 CSS网页排版技术 第四节 导航设计(2011-11-16更新)

第二章CSS网页排版技术

第四节导航设计

一、伪类

1.概述

伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特

殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。

伪类和类不同，是CSS 已经定义好的，不能象类选择符一样随意用别的名字，根

据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。

2.格式

选择符:伪类{属性: 值}

3.伪类列表

1): link

语法：Selector : link { sRules }

说明：设置对象在未被访问前的样式。默认值由浏览器决定。

2):hover

语法：Selector : hover { sRules }

说明：

设置对象在其鼠标悬停时的样式。

3): active

语法：Selector : active { sRules }

说明：

设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

4): visited

语法：Selector : visited { sRules }

说明：

设置对象在其链接地址已被访问过时的样式。

例：设置超链接无下划线，以及4个状态时的颜色

a:link {

text-decoration: none;

}

a:visited {

text-decoration: none;

color: #F0C;

}

a:hover {

text-decoration: none;

color: #F00;

}

a:active {

text-decoration: none;

color: #090;

}

二、横向导航

1.先利用