CSS美化其他页面元素.PPT

* 大家好 第12章 CSS美化其它页面元素 * 12.1 超链接特效 在HTML语言中，超链接通过标记a实现，在默认浏览方式下，超链接的表现形式是蓝色的并且有下划线，已访问链接则为紫色。很多情况下，这种传统的链接样式无法满足网页设计者的多种需求。 * 选择符 说明 a:link 超链接样式 a:visited 已访问超链接样式 a:hover 鼠标经过超链接时的样式 a:active 活动链接也就是在超链接上单击处于“当前激活”状态的样式 * 12.1.2 按钮式超链接 很多网页上都有各种按钮式超链接，这些效果一般是采用图片作为按钮，本节通过CSS样式来制作按钮效果。 实现方式主要是对链接的背景颜色和边框进行改变，如将链接和访问后链接样式设置为粉色，左上边框设置为浅色，右下边框设置为深色，营造出立体感；接着将鼠标经过链接背景色设置为相对粉色更深的颜色，左上边框设置为深色，右下边框设置为浅色，营造出按下去的感觉。 * 12.3 项目列表 列表的符号和位置可以使用CSS进行设置。 * 12.3.1 列表符号list-style-type 基本语法： list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin * 关键字 说明 关键字 说明 disc 实心圆 cjk-ideographic 浅白的表意数字 circle 空心圆 georgian 传统的乔治数字 square 实心方块 lower-greek 基本的希腊小写字母 decimal 阿拉伯数字 hebrew 传统的希伯莱数字 lower-roman 小写罗马数字 hiragana 日文平假名字符 upper-roman 大写罗马数字 hiragana-iroha 日文平假名序号 lower-alpha 小写英文字母 katakana 日文片假名字符 upper-alpha 大写英文字母 katakana-iroha 日文片假名序号 none 不使用项目符号 lower-latin 小写拉丁字母 armenian 传统的亚美尼亚数字 upper-latin 大写拉丁字母 list-style-type关键字 * 12.3.2 图片符号list-style-image 基本语法： list-style-image:none | url(图像文件); 语法说明： none：不指定图像 url：指定列表项标记图像。 * 12.3.3 列表位置list-style-position 基本语法： list-style-position: outside | inside; 语法说明： outside：默认值，列表项目符号放置在文本以外，且环绕文本不根据符号对齐。 inside：列表项目符号放置在文本以内，且环绕文本和项目符号对齐。 * 12.3.4 列表综合设置list-style 基本语法： list-style: [list-style-image ] | [ list-style-position] | [ list-style-type]; 语法说明： 复合属性，可以同时设置1项或多项。 若list-style-image属性为none或指定图像不可用时，list-style-type属性将发生作用。 * 12.3.5 使用列表制作菜单 当列表的项目符号通过list-style-type设置为none时，可以制作出各式各样的菜单和导航条，这也是列表最大的用处之一，结合CSS属性的变幻可以达到意想不到的导航效果。 * * 案例分析 设置背景颜色，不影响主体实现。 鼠标经过和未经过颜色变换，需要使用链接相关的伪类。 列表无项目符号。 列表所在块除了背景色外，左右具有宽度不同的深色边框。 不同列表项之间有分割线，可通过给列表项添加下边框实现。 *