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

第二章 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. 先利用ul标签制作导航条的内容，添加超链接，并为此列表赋予一个id 值 ul id=navi lia href=#人文学院/a/li lia href=#艺术学院/a/li lia href=#信电学院/a/li lia href=#土木学院/a/li lia href=#机电学院/a/li lia href=#环境学院/a/li /ul 2. 设置ul列表为横向，取消列表前面默认的小圆点标记 #navi li{ float:left; } #navi { list-style-type: none; } 3. 设置其中的超链接为块级元素，设置其边框、背景颜色等信息 #navi li a{ display:block; width:100px; hei