第9课CSS基础(五).pptx

第九课 CSS基础（五）;知识要点 用CSS设置链接样式 用CSS设置列表样式 用CSS设置简单导航菜单 用CSS滑动门技术设置背景和导航条 ;第16章 用CSS制作链接与网站导航;16.1 丰富的超链接特效;例16-01.htm a:link;例16-01.htm a:visited;例16-01.htm a:hover;可设置a以及a的这四种伪类的字体、颜色、背景、下划线（text-decoration:none;）、边框、定位等样式 例第16章/16-01.htm 注意事项见P251;16.2 创建按钮式超链接;16.3 创建荧光灯效果的菜单;16.4 控制鼠标指针;16.5 设置项目列表样式;2、图形符号 （1）list-style-image 属性 语法： 如ul{属性1：属性值1；属性2：属性值2；list-style-image:url（图形地址）；} 例 04/icon-style1.htm （2）list-style-type 属性及li的background属性（推荐） 语法： 如ul{属性1：属性值1；属性2：属性值2；list-style-type:none;} li {background:url（图形地址）；} 例04/ icon-style.htm;2014/5/4;2014/5/4;16.6 创建简单的导航菜单;2、横竖自由转换菜单 将竖排导航做如下两处改动： （1）将 width:120px 放到 #navigation li a 中 （2）在 #navigation li 的样式中增加一条 float:left ;16.7 设置图像翻转链接;16.8 应用滑动门技术的玻璃效果菜单;设置 img 元素的 :hover 伪类 例第16章/07/hover-border-ie.htm 例第16章/07/hover-border-FireFox.htm ;步骤： （1）确定菜单的整体位置 （2）设置ul的样式，包括文字的字体、字号和内外边距等 （3）设置#menu中的li的属性 （4）将a元素设置为块级元素 （5）设置a元素的鼠标指针经过效果 （6）对strong标记的属性进行设置 （7）设置在鼠标经过时的strong标记样式 （8）增加空白，使得文字对称 ;2014/5/4