项目一 第二阶段 任务16 设置菜单和列表格式-【鹑首文化】HTML5+CSS3网页设计与制作配套电子课件PPT

HTML5+CSS3网页设计与制作 使用CSS3设置网页格式 第二阶段 能够叙述列表类型特点，使用list-style-type属性设置列表样式。 能够叙述列表项图像特点，使用list-style-image属性设置列表样式。 能够叙述列表标志位置特点，使用list-style-position属性设置列表样式。 能够综合运用列表样式设置D清单页面导航菜单及列表元素格式。 任务目标 任务16 设置菜单和列表格式 本次任务要求根据D清单页面内容，使用CSS样式，在任务15基础上设置菜单列表和版权列表格式。完成后的效果图如图1-16所示。 任务描述 图1-16 设置菜单列表格式后的网页效果图 任务16 设置菜单和列表格式 D清单宣传网页导航栏部分的列表内容默认是隐藏不可见，当鼠标指针经过导航栏的图标时，列表内容自动显示，鼠标离开时又自动隐藏。 要完成D清单页面菜单和列表格式的设置，需要： 学习list-style-type、list-style-image、list-style-position列表样式属性。 分析D清单页面中的菜单列表格式内容，正确使用CSS样式完成D清单网页内容制作。 使用列表样式美化D清单页面底部的列表元素。 D清单列表格式设置分析如图1-16-1所示。 任务分析 任务16 设置菜单和列表格式 任务分析 图1-16-1 D清单菜单列表格式设置分析图 任务16 设置菜单和列表格式 知识与技能准备 要影响列表的样式，最简单的办法就是改变其标志类型。 例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。要修改用于列表项的标志类型，可以使用属性 list-style-type。 说明：disc为默认的标记，设置none可以去除标记 1、标记类型 语法：list-style-type:标记内容； 课堂练习1-16-1 在无序列表中添加不同类型的列表标记 HTML代码： CSS代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <ul class="disc"> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="circle"> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="square"> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="none"> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ul> 1 2 3 4 ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.none {list-style-type: none} 利用渐变背景色使导航栏有立体感，通过鼠标经过时渐变方向相反，使导航栏有动态感。如下表所示。 显示效果如图2-6-2所示： 图1-16-2在无序列表中添加不同类型的列表标记 知识与技能准备 列表项图像list-style-image是使用图像来替换列表项的标记。这个属性指定作为一个有序或无序列表项标志的图像。取值范围如表1-16-2所示。 注意：因为列表项图像涉及到图片的链接，为了防止图像不可用，一般情况下最好多设置一个 "list-style-type" 属性。 2、列表项图像 表1-16-2 list-style-image的取值范围 语法：list-style-image:url(图片文件的路径); 课堂练习1-16-2 将图像作为列表项标记 HTML代码： CSS代码： 1 2 3 4 5 <ul> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ul> 1 ul {list-style-image: url(images/biao.png);} 显示效果如图1-16-3所示。 图1-16-3 将图像作为列表项标记 知识与技能准备 列表标志位置可以确定标志出现在列表项内容之外还是内容内部。该属性用于声明列表标志相对于列表项内容的位置。如果位置是外部 (outside) ，则会放在离列表项边框边界一定距离处；如果位置是内部 (inside) ，则相当于是插入在列表项内容最前面的行内元素一样。 3、列表标志位置 表1-16-3 list-style-position的取值范围 语法：list-style-position: