企业网站优化与美化-PPT04-v10

1、第四章 CSS设置项目列表效果 理论部分理论部分BenetBENET 4.02/29BENET 4.0v超链接伪类别属性有哪几种，分别代表什么含义？超链接伪类别属性有哪几种，分别代表什么含义？v鼠标常见样式有哪几种，其属性值是什么？鼠标常见样式有哪几种，其属性值是什么？v如何实现如下图所示的超链接效果？如何实现如下图所示的超链接效果？课程回顾BenetBENET 4.03/29BENET 4.0v会使用会使用CSS设置列表标签导航栏效果设置列表标签导航栏效果v会使用会使用CSS设置列表标签制作表格效果设置列表标签制作表格效果技能展示BenetBENET 4.04/29BENET 4.0本章结构

2、使用列表使用列表制作页面特效制作页面特效使用列表制作导航栏使用列表制作导航栏制作适应文字长度的导航栏制作适应文字长度的导航栏使用列表制作表格效果使用列表制作表格效果CSS设置项目列表效果设置项目列表效果列表的列表的HTML标签标签CSS相关列表属性相关列表属性使用使用CSS设置项目列表样式设置项目列表样式BenetBENET 4.05/29BENET 4.0v有序列表有序列表v无序列表无序列表列表的HTML标签 列表项列表项1 列表项列表项1 无序列表无序列表有序列表有序列表BenetBENET 4.06/29BENET 4.0v列表的符号列表的符号 使用使用list-style-type属性

3、设置列表符号属性设置列表符号列表的CSS样式属性2-1属性值属性值方式方式语法实现（常用缩写）语法实现（常用缩写）示例示例none去掉修饰符号list-style-type:none; 刷牙 洗脸disc实心圆（默认类型）list-style-type:disc; 刷牙 洗脸circle空心圆list-style-type:circle; 刷牙 洗脸square实心正方形list-style-type:square; 刷牙 洗脸decimal数字（默认类型）list-style-type:decimal1. 刷牙2. 洗脸.one list-style-type:disc; .two list

4、-style-type:circle; .three list-style-type:square; .four list-style-type:decimal; .other list-style-type:none; 田径田径 游泳游泳 跳水跳水 马术马术 篮球篮球 足球足球各种列表符号各种列表符号的显示效果的显示效果BenetBENET 4.07/29BENET 4.0v图片列表符号图片列表符号 list-style-image:url(图片地址图片地址);列表的CSS样式属性2-2.image list-style-image:url(image/ico.JPG); 田径田径 游泳游泳

5、 跳水跳水 马术马术 篮球篮球 足球足球 图片列表符号图片列表符号显示效果显示效果BenetBENET 4.08/29BENET 4.0v页面制作要求页面制作要求使用列表制作商品分类字符间距字符间距5px5px，带下划线带下划线字号字号14px14px，橘色，橘色左浮动左浮动字号字号12px12px有一定间距有一定间距使用的背景图片使用的背景图片v内容部分代码内容部分代码v设置页面样式设置页面样式 设置欢迎词样式设置欢迎词样式 设置分区标签样式设置分区标签样式 设置空白列表样式设置空白列表样式 设置列表项样式设置列表项样式 设置商品分类样式设置商品分类样式 设置商品列表项样式设置商品列表项样式

6、 你好，欢迎访问贵美商城！你好，欢迎访问贵美商城！ 家用电器家用电器 日用百货日用百货 p letter-spacing:5px; text-decoration:underline; #menu width:200px; height:280px; background:url(images/bg.gif) no-repeat; .space height:15px; li font-size:12px; list-style-type:none; line-height:25px; .menu-class font:bold 14px 宋体宋体; color:#ff7300; line-h

7、eight:35px; .menu-li color:#636362; float:left; width:50px; 在背景图片顶部插入空白行，在背景图片顶部插入空白行，并设置高度并设置高度字符间距字符间距5px5px，有下划线，有下划线设置分区标签宽设置分区标签宽高以及背景图片高以及背景图片背景图片顶部对应的背景图片顶部对应的空白行设置高度空白行设置高度无列表符号无列表符号除商品分类列表项除商品分类列表项外，设置左浮动外，设置左浮动 #menu width:200px; height:280px; background:url(images/bg.gif) no-repeat; li fo

8、nt-size:12px; list-style:none; line-height:25px; .menu-class font:bold 14px 宋体宋体; color:#ff7300; line-height:35px; .menu-li color:#636362; float:left; width:50px; .space height:15px; p letter-spacing:5px; text-decoration:underline; 你好，欢迎访问贵美商城！你好，欢迎访问贵美商城！ 家用电器家用电器 大家电大家电 BenetBENET 4.09/29BENET 4.0

9、v页面效果分析页面效果分析 每一个菜单项为一个列表每一个菜单项为一个列表 使用超链接伪类别实现背景图片变换使用超链接伪类别实现背景图片变换 使用的背景图片使用的背景图片 默认显示背景图片初始位置为默认显示背景图片初始位置为0，-29px 鼠标经过时背景图片初始位置为鼠标经过时背景图片初始位置为0，0使用列表制作导航栏2-1BenetBENET 4.010/29BENET 4.0v页面内容结构页面内容结构v设置页面样式设置页面样式 设置列表项样式设置列表项样式 设置超链接样式设置超链接样式使用列表制作导航栏2-2 首页首页 鲜花鲜花 蛋糕蛋糕 绿植花卉绿植花卉 会员中心会员中心 在线咨询在线咨询

10、 赠品赠品 帮助中心帮助中心li width:80px; height:29px; text-align:center; float:left; list-style-type:none; a:link,a:visited color:#fff; text-decoration:none; font-size:14px; font-weight:700; line-height:30px; display:block; background:url(image/menubg.gif) 0px -29px no-repeat;a:hover text-decoration:none; backg

11、round:url(image/menubg.gif) 0 0 no-repeat;设置块状显示设置块状显示一个列表项为一个一个列表项为一个导航按钮导航按钮列表项左浮动列表项左浮动设置无列表符号设置无列表符号设置宽、高、对齐设置宽、高、对齐设置背景图片设置背景图片BenetBENET 4.011/29BENET 4.0v页面效果分析页面效果分析 页面包含三部分，顶部、中间以及底部页面包含三部分，顶部、中间以及底部 页面中超链接部分页面中超链接部分 中间内容部分使用列表实现中间内容部分使用列表实现使用列表制作表格效果4-1顶部顶部中部中部底部底部一个列表一个列表一个列表项一个列表项BenetBE

12、NET 4.012/29BENET 4.0v页面内容结构页面内容结构 页面顶部部分内容页面顶部部分内容 页面中间部分内容页面中间部分内容 页面底部部分内容页面底部部分内容使用列表制作表格效果4-2 Featured Classes | New Classes | Upcoming Classes Sun,Sep 26 - 11:59 PM GRE Advantage - Anywhere By Kaplan TestPrep and Amissions pro $699.00 Explore upcoming classes >>超链接超链接第二行为图片超链接第二行

13、为图片超链接超链接超链接BenetBENET 4.013/29BENET 4.0v设置页面样式设置页面样式 设置最外层设置最外层ID为为main分区标签样式分区标签样式 设置顶部设置顶部ID为为top分区标签样式分区标签样式 设置中间设置中间ID为为btm的分区标签样式的分区标签样式 设置底部设置底部ID为为mid的分区标签样式的分区标签样式使用列表制作表格效果4-3小图标对齐方式小图标对齐方式#top background:#f0f5f9; width:100%; #top a:link text-decoration: none; #top a:hover text-decoration:

14、 underline; #btm width: 100%; text-align: right; #btm a:link color: #0066FF; text-decoration:none; #btm a:hover text-decoration:underline; #mid ul float: left; width: 142px;#mid ul li font-size: 13px; list-style-type: none;#mid img border:0; #mid span a:link font-size: 10px; color: #A8A8A8; font-wei

15、ght: normal; text-decoration:none;#mid span a:hover text-decoration:underline;#mid span img vertical-align:top;#main width:960px; border: 1px solid #ced3d7; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;设置整体宽度设置整体宽度设置边框样式设置边框样式设置顶部背景色和宽度设置顶部背景色和宽度设置顶部超链接效果设置顶部超链接

16、效果设置底部宽度和对齐方式设置底部宽度和对齐方式设置底部超链接样式设置底部超链接样式设置列表宽度、左浮动设置列表宽度、左浮动设置列表项无列表符号设置列表项无列表符号清除超链接图片边框清除超链接图片边框#mid a:link color: #0066FF; text-decoration:none;#mid a:hover text-decoration:underline;设置图片下方标设置图片下方标题超链接样式题超链接样式超链接样式超链接样式BenetBENET 4.014/29BENET 4.0vCSS样式清除属性（样式清除属性（clear） 和前一个浮动标签换行隔开和前一个浮动标签换行隔

17、开 只对块级元素有效只对块级元素有效使用列表制作表格效果4-4显示异常显示异常常见的清除常见的清除属性属性值值含义含义clear:left在左侧不允许有浮动元素clear:right在右侧不允许有浮动元素clear:both在左右两侧均不允许有浮动元素clear:none默认值，允许两侧都有浮动元素body font-size:20px; font-weight:bold; color:#FFF; #one background:#00f; width:100px; height:100px; float:left; #two background:#f00; width:100px; hei

18、ght:100px; float:left; #three background:#0fF; width:300px; height:200px; 第一块第一块 第二块第二块 第三块第三块clear:both;浮动显示效果浮动显示效果设置清除属性设置清除属性后的显示效果后的显示效果v为列表制作表格效果添加清除属性为列表制作表格效果添加清除属性 在中间部分最后添加一个分区标签在中间部分最后添加一个分区标签设置清除属性，并设置高度为设置清除属性，并设置高度为0px0px，不影响显示效果不影响显示效果BenetBENET 4.015/29BENET 4.0vCSS样式定位属性（样式定位属性（posi

19、tion） 确定标签定位位置确定标签定位位置 常用属性值常用属性值 absolute：绝对定位，相对于第一个非默认定位的父标签的定位：绝对定位，相对于第一个非默认定位的父标签的定位 fixed：固定定位，相对于浏览器窗口进行定位：固定定位，相对于浏览器窗口进行定位 relative：相对定位，相对于标签原始位置进行的定位：相对定位，相对于标签原始位置进行的定位 static：默认值，没有定位根据正常情况显示：默认值，没有定位根据正常情况显示 使用使用“left”、“top”、“right”、“bottom”设置位置设置位置CSS样式定位属性3-1BenetBENET 4.016/29BENET

20、 4.0v相对定位相对定位v绝对定位绝对定位v固定定位固定定位CSS样式定位属性3-2#main border:2px solid #000; width:300px; #one background:#FF0; width:200px; height:100px; #two background:#00F; width:50px; height:30px; 3 3个分区标签个分区标签相互嵌套相互嵌套#two position:relative; left:50px; top:20px; 设置相对定位设置相对定位设置定位位置设置定位位置20px20px50px50px#two position

21、:absolute; right:50px; bottom:20px; 设置绝对定位设置绝对定位设置定位位置设置定位位置20px20px50px50px#main position:relative; 更改父标签定位方式更改父标签定位方式20px20px50px50px#main position:relative; #two position:fixed; right:50px; bottom:20px; 设置相对定位设置相对定位设置定位位置设置定位位置20px20px50px50pxBenetBENET 4.017/29BENET 4.0v同级标签定位显示效果同级标签定位显示效果 标签设置

22、相对定位标签设置相对定位 不影响其他标签的显示情况不影响其他标签的显示情况 标签设置固定定位或绝对定位标签设置固定定位或绝对定位 标签显示效果类似于浮动属性标签显示效果类似于浮动属性 标签所占的父标签高度为标签所占的父标签高度为0CSS样式定位属性3-3默认显示情况默认显示情况第一块设置第一块设置相对定位相对定位第一块设置第一块设置绝对定位绝对定位第二块设置第二块设置绝对定位绝对定位BenetBENET 4.018/29BENET 4.0vz-index属性设置标签的堆叠顺序属性设置标签的堆叠顺序 较高堆叠顺序标签显示在较低堆叠顺序标签的前面较高堆叠顺序标签显示在较低堆叠顺序标签的前面 默认属

23、性值为默认属性值为0CSS样式z-index属性img position:absolute; z-index:-1; p color:#f00; font-size:20px; font-weight:bold; z-index属性设置标签的堆叠顺序，由于较高堆叠顺序的标签显示在较属性设置标签的堆叠顺序，由于较高堆叠顺序的标签显示在较低堆叠顺序的标签的前面显示。低堆叠顺序的标签的前面显示。设置图片的堆叠顺序为设置图片的堆叠顺序为-1-1图片显示在文本下方图片显示在文本下方img position:absolute; z-index:2; 将图片的堆叠顺序改为将图片的堆叠顺序改为2 2图片显示在

24、文本上方图片显示在文本上方BenetBENET 4.019/29BENET 4.0v请思考请思考 哪些哪些CSS属性可以设置列表项目符号？属性可以设置列表项目符号？ 清除属性的含义和作用是什么？清除属性的含义和作用是什么？ 定位属性的属性值、含义，及其显示效果是什么？定位属性的属性值、含义，及其显示效果是什么？ 如何使用列表制作表格（简述步骤）？如何使用列表制作表格（简述步骤）？小结BenetBENET 4.020/29BENET 4.0v页面效果分析页面效果分析制作适应文本长度的导航栏3-1根据文本内容长度不同，导航根据文本内容长度不同，导航栏按钮的长度也不同栏按钮的长度也不同背景图片背景图

25、片使用使用spanspan标签截取背标签截取背景前部分，并覆盖在景前部分，并覆盖在lili标签的背景之上标签的背景之上使用使用lili标签截标签截取后部分取后部分BenetBENET 4.021/29BENET 4.0v页面内容结构页面内容结构制作适应文本长度的导航栏3-2 首页首页 鲜花鲜花 点击率点击率 会员中心会员中心 BenetBENET 4.022/29BENET 4.0v设置页面样式设置页面样式 设置统一的样式，包括列表符号、字体、对齐、背景等设置统一的样式，包括列表符号、字体、对齐、背景等 填充属性填充属性padding设置的目的是为文本设置一定的宽度设置的目的是为文本设置一定的宽度 边距属性边距属性margin用于设置导航栏按钮之间的间距用于设置导航栏按钮之间的间距 设置范围标签样式设置范围标签样式 设置超链接样式设置超链接样式 设置第一项样式，背景、字体颜色等与其他项不同设置第一项样式，背景、字体颜色等与其他项不同制作适应文本长度的导航栏3-3BenetBENET 4.023/29BENET 4.0本章总结使用列表使用列表制作页面特效制作页面特效使用列表制作导航栏使用列表制作导航栏制作适应文字长度的导航栏制作适应文字长度的导航栏使用列表制作表格效果使用列表制作表格效果CSS设置项目列表效果设置项目列表效果列表的列表的HTML标签标签CSS相