网页制作第七讲(张静)

《网页制作第七讲(张静)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第七章CSS样式表（三）制作贵美横向主导航条制作贵美顶部菜单制作贵美新品上架板块本章任务使用div-ul-li实现局部布局使用div-dl-dt-dd实现图文混编使用伪类样式控制超链接样式本章目标超链接样式的特殊性文本或图像加上链接，将失去原样式而继承链接的样式超链接样式的特点加链接后，图片/文本样式的变化超链接样式的四种状态未访问状态（a:link）已访问状态（a:visited）鼠标移上状态（a:hover）激活选定状态（a:active）可以分别设置链接的四种状态的样式超链接伪类样式超链接伪类样式伪类示例说明a:linka:link{col

2、or:#999;}未访问状态a:visiteda:link{color:#333;}已访问状态a:hovera:link{color:#ff7300;}鼠标移上状态a:activea:link{color:#999;}激活选定状态（鼠标点击未释放时）采用选择器：状态的方式分别定义样式，一般称为伪类如何设置超链接的样式.navlia{padding:8px15px;}.navlia:hover{color:#ff7300;font-size:20px;}

3、v">

• 家用电器
• 手机数码
……演示示例1：伪类1、先定义共有样式：表示.nav类下
• 标签中的链接样式设置超链接样式的步骤：1、确定页面所有链接样式是否相同，否则分开定义2、先定义四个状态共有样式，再分别定义其他状态2、再单独定义某个状态特有的样式导航版块的链接样式一般和页面样式不同，需单独定义三类应用样式的方式内部样式表外部样式表行内样式如何应用样式3-1…..//样式定义

  4、>……//HTML内容HTML和CSS在同一文件，方便开发时修改，样式和内容分离不够彻底，不利于页面复用三类应用样式的方式内部样式表外部样式表行内样式如何应用样式3-2.navlia{padding:8px10px;}…..//CSS样式定义…………//HTML内容分别定义*.css和*.html文件，样式和内容彻底分离，多个网页可共享同一CSS演示示例2：外部样式表三类应用样式的方式内部样式表外部样式表行内样式表如何应用样式3-3

• 日用百货
单独定义某个元素的样式，灵活方便。但因为内容与样式混写在一起，应尽量少用或不用演示示例3：行内样式表各类样式有继承各类样式的优先级浏览器默认设置外部样式表文件内部样式表行内样式表ID选择器类选择器标签选择器样式的优先级3-1由低到高，“近者优先”原则“日用百货”链接样式的优先级3-2…….n

6、avullia:link{color:blue;}

• 家用电器
• 手机数码
• 日用百货