[网页设计与制作第7章课件.pptVIP

* 解释：.nav li a的含义，限定范围 * 强调：顺时针赋值 * 强调：顺时针赋值 * 强调：顺时针赋值 * * 说明重点讲解前两者的样式修饰，后两者的样式美化比较简单。 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 第七章 CSS样式表（三） Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 制作贵美横向主导航条 制作贵美顶部菜单 制作贵美新品上架板块 本章任务 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 使用div-ul-li实现局部布局 使用div-dl-dt-dd实现图文混编 使用伪类样式控制超链接样式 本章目标 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 超链接样式的特殊性 文本或图像加上链接，将失去原样式而继承链接的样式 超链接样式的特点 加链接后，图片/文本样式的变化 超链接样式的四种状态 未访问状态（a:link ） 已访问状态（a:visited ） 鼠标移上状态（a:hover ） 激活选定状态（a:active ） 可以分别设置链接的四种状态的样式 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 超链接伪类样式 超链接伪类样式 伪 类 a:link a:visited a:hover a:active 示 例 a:link{color:#999;} a:visited {color:#333;} a:hover {color:#ff7300;} a:active {color:#999;} 说 明 未访问状态 已访问状态 鼠标移上状态 激活选定状态（鼠标点击未释放时） 采用选择器：状态的方式分别定义样式，一般称为伪类 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 如何设置超链接的样式 style type=text/css .nav li a { padding:8px 15px;} .nav li a:hover { color:#ff7300;font-size:20px; } /style body div class=nav ul lia href=#家用电器/a/li lia href=“#”手机数码/a/li …… 1、先定义共有样式：表示.nav类下li标签中的链接样式 设置超链接样式的步骤： 1、确定页面所有链接样式是否相同，否则分开定义 2、先定义四个状态共有样式，再分别定义其他状态 2、再单独定义某个状态特有的样式 导航版块的链接样式一般和页面样式不同，需单独定义 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 三类应用样式的方式 内部样式表 外部样式表 行内样式 如何应用样式3-1 head style type=text/css ….. //样式定义 /style /head body ……//HTML内容 /body HTML和CSS在同一文件，方便开发时修改，样式和内容分离不够彻底，不利于页面复用 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client