七章节用CSS设置页面和览器元素
《七章节用CSS设置页面和览器元素》由会员分享,可在线阅读,更多相关《七章节用CSS设置页面和览器元素(11页珍藏版)》请在装配图网上搜索。
1、第七章第七章用用CSS设置页面设置页面和浏览器的元素和浏览器的元素网络工程系网络工程系 张红芳张红芳qqqq:162038565162038565Tel:15531199167Tel:主要内容:主要内容:v用CSS设置丰富的超链接特效v鼠标特效重点:用CSS设置超链接的特效7.1 丰富的超链接特效丰富的超链接特效 v动态超链接(7-1.html)v按钮式超链接(7-2.html)v浮雕式超链接(7-3.html)7.1.1 动态超链接动态超链接v超链接标记超链接文字在默认的浏览器浏览方式下,超链接统一为蓝色并且有下划线,被点击过的超链接则为紫色并且也有下划线,如下图所示:7.1.1 动态超链接
2、动态超链接v用CSS设置超链接的属性及动态效果 例如:a /*超链接的样式*/text-decoration:none;/*去掉下划线*/7.1.1 动态超链接动态超链接vCSS的伪类别(7-1.html)可制作动态效果的可制作动态效果的CSS伪类别属性伪类别属性属性属性说明说明a:link超链接的普通样式,即正常浏览状态的样式a:visited被点击过的超链接的样式a:hover鼠标指针经过超链接上时的样式a:active在超链接上单击时,即“当前激活”时,超链接的样式7.1.2 按钮式超链接按钮式超链接v按钮式超链接(7-2.html)通过CSS的普通属性来模拟按钮的效果。关键:加入CSS
3、的3个伪属性,对a标记进行整体控制。对于普通超链接和点击过的超链接采用同样的样式,并且利用边框的样式模拟按钮效果。而对于鼠标指针经过时的超链接,相应地改变文字颜色、背景色、位置和边框,从而模拟按钮“按下去”的特效。7.1.3 浮雕式超链接浮雕式超链接v浮雕式超链接(7-3.html)通过超链接背景图片的变换,实现浮雕的效果。7.2 鼠标特效鼠标特效vCSS控制鼠标箭头 CSS通过cursor属性可以设置各式各样的鼠标指针样式。该属性可以在任何标记里使用,从而可以改变各种页面元素的鼠标效果。其他鼠标指针效果见书164页。如:body cursor:pointer;7.2 鼠标特效鼠标特效v鼠标变换的超链接(7-4.html)
- 温馨提示:
1: 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2: 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
3.本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 装配图网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。