七章节用CSS设置页面和浏览器元素备课讲稿.pptVIP

第七章用CSS设置页面和浏览器的元素 网络工程系 张红芳 qq：162038565 Tel主要内容： 用CSS设置丰富的超链接特效 鼠标特效 重点：用CSS设置超链接的特效 7.1 丰富的超链接特效 动态超链接（7-1.html） 按钮式超链接 （7-2.html） 浮雕式超链接 （7-3.html） 7.1.1 动态超链接 超链接标记a a href=“链接的具体地址”超链接文字/a 在默认的浏览器浏览方式下，超链接统一为蓝色并且 有下划线，被点击过的超链接则为紫色并且也有下划 线，如下图所示： 7.1.1 动态超链接 CSS的伪类别（7-1.html） 可制作动态效果的CSS伪类别属性 属性 说明 a:link 超链接的普通样式，即正常浏览状态的样式 a:visited 被点击过的超链接的样式 a:hover 鼠标指针经过超链接上时的样式 a:active 在超链接上单击时，即“当前激活”时，超链接的样式 7.1.2 按钮式超链接 按钮式超链接（7-2.html） 通过CSS的普通属性来模拟按钮的效果。 关键：加入CSS的3个伪属性，对a标记进行整体控制。对于普通超链接和点击过的超链接采用同样的样式，并且利用边框的样式模拟按钮效果。而对于鼠标指针经过时的超链接，相应地改变文字颜色、背景色、位置和边框，从而模拟按钮“按下去”的特效。 7.1.3 浮雕式超链接 浮雕式超链接（7-3.html） 通过超链接背景图片的变换，实现浮雕的效果。 7.2 鼠标特效 CSS控制鼠标箭头 CSS通过cursor属性可以设置各式各样的鼠标指针样式。该属性可以在任何标记里使用，从而可以改变各种页面元素的鼠标效果。 其他鼠标指针效果见书164页。 如： body{ cursor:pointer; } 7.2 鼠标特效 鼠标变换的超链接（7-4.html） * 通过超链接能够实现页面的跳转、功能的激活等，因此超链接也是与用户打交道最多的元素之一。 * * * 通过超链接能够实现页面的跳转、功能的激活等，因此超链接也是与用户打交道最多的元素之一。