企业网站优化与美化-PPT04-v1.0.pptVIP

需求描述 掌握列表的样式属性 掌握浮动、清除属性 实现思路 新建页面，使用分区标签构建网页 在分区标签中输入相应的内容 按照页面效果，设置顶部、中部、底部样式 包括超链接、文本、列表、列表符号等 设置清除属性 实验案例二：列表制作表格效果2-1 学员练习 新建页面，使用分区标签构建网页 在分区标签中输入相应的内容 按照页面效果，设置顶部、中部、底部样式 设置清除属性 保存页面，在浏览器中浏览 实验案例二：列表制作表格效果2-2 45分钟完成 * 第三题，使用背景变换实现，同时当鼠标经过时设置不同的字体颜色实现。 * * * 此处使用a:hover实现背景图片变换，也可以使li:hover实现 * * * 此处简单讲解出现异常的原因，主要是由于浮动的标签不占父标签高度所致！ * 绝对定位出为2种情况，1、父标签均为默认定位方式，绝对定位为相对浏览器的位置；2、更改某一父标签定位方式，绝对定位为相对与该父标签的定位。 相对定位不设置位置即在原位置显示。 * 第四题主要说明浮动以及列表宽度即可 * 注意超链接的鼠标经过样式与正常显示样式相同 * 本案例没有详细列出具体的步骤和代码，教员讲解完成后带领学员一起做一边案例可以加深学员的理解。 简单说明填充与边距含义 * * * * * * * B e n e t BENET 4.0 B e n e t BENET 4.0 */29 BENET 4.0 B e n e t BENET 4.0 */35 B e n e t BENET 4.0 */35 第四章 CSS设置项目列表效果 —— 理论部分 超链接伪类别属性有哪几种，分别代表什么含义？ 鼠标常见样式有哪几种，其属性值是什么？ 如何实现如下图所示的超链接效果？ 课程回顾 会使用CSS设置列表标签导航栏效果 会使用CSS设置列表标签制作表格效果 技能展示 本章结构 使用列表 制作页面特效 使用列表制作导航栏 制作适应文字长度的导航栏 使用列表制作表格效果 CSS设置项目列表效果 列表的HTML标签 CSS相关列表属性 使用CSS 设置项目列表样式 有序列表 无序列表 列表的HTML标签 ul li列表项1/li …… /ul ol li列表项1/li … … /ol 无序列表 有序列表 列表的符号 使用list-style-type属性设置列表符号 列表的CSS样式属性2-1 属性值 方式 语法实现（常用缩写） 示例 none 去掉修饰符号 list-style-type:none; 刷牙 洗脸 disc 实心圆（ul默认类型） list-style-type:disc; ● 刷牙 ● 洗脸 circle 空心圆 list-style-type:circle; ○ 刷牙 ○ 洗脸 square 实心正方形 list-style-type:square; ■ 刷牙 ■ 洗脸 decimal 数字（ol默认类型） list-style-type:decimal 1. 刷牙 2. 洗脸 style type=text/css .one { list-style-type:disc; } .two { list-style-type:circle; } .three { list-style-type:square; } .four { list-style-type:decimal; } .other { list-style-type:none; } /style ul class=other li class=one田径/li li class=two游泳/li li class=three跳水/li li class=four马术/li li篮球/li li足球/li /ul 各种列表符号的显示效果 图片列表符号 list-style-image:url(图片地址); 列表的CSS样式属性2-2 style type=text/css .image { list-style-image:url(image/ico.JPG); } /style body ul class=image li田径/li li游泳/li li跳水/li li马术/li li篮球/li li足球/li /ul /body 图片列表符号显示效果 页面制作要求 使用列表制作商品分类 字符间距5px，带下划线 字号14px，橘色 左浮动 字号12px 有一定间距 使用的背景图片 内容部分代码 设置页面样式 设置欢迎词样式 设置分区标签样式 设置空白列表样式 设置列表项样式 设置商品分类样式 设置商品列表项样式 body p你