HTML5+CSS3网页设计与制作课件：设置菜单和列表格式

HTML5+CSS3网页设计与制作设置菜单和列表格式能够叙述列表类型特点，使用list-style-type属性设置列表样式。能够叙述列表项图像特点，使用list-style-image属性设置列表样式。能够叙述列表标志位置特点，使用list-style-position属性设置列表样式。能够综合运用列表样式设置D清单页面导航菜单及列表元素格式。任务目标

设置菜单和列表格式本次任务要求根据D清单页面内容，使用CSS样式，在基础上设置菜单列表和版权列表格式。完成后的效果图如图1-16所示。任务描述图1-16设置菜单列表格式后的网页效果图

设置菜单和列表格式D清单宣传网页导航栏部分的列表内容默认是隐藏不可见，当鼠标指针经过导航栏的图标时，列表内容自动显示，鼠标离开时又自动隐藏。要完成D清单页面菜单和列表格式的设置，需要：学习list-style-type、list-style-image、list-style-position列表样式属性。分析D清单页面中的菜单列表格式内容，正确使用CSS样式完成D清单网页内容制作。使用列表样式美化D清单页面底部的列表元素。D清单列表格式设置分析如图1-16-1所示。任务分析

设置菜单和列表格式任务分析图1-16-1D清单菜单列表格式设置分析图

设置菜单和列表格式知识与技能准备要影响列表的样式，最简单的办法就是改变其标志类型。例如，在一个无序列表中，列表项的标志(marker)是出现在各列表项旁边的圆点。要修改用于列表项的标志类型，可以使用属性list-style-type。说明：disc为默认的标记，设置none可以去除标记1、标记类型语法：list-style-type:标记内容；课堂练习1-16-1在无序列表中添加不同类型的列表标记HTML代码：CSS代码：1234567891011121314151617181920<ulclass="disc"><li>咖啡</li><li>茶</li><li>可口可乐</li></ul><ulclass="circle"><li>咖啡</li><li>茶</li><li>可口可乐</li></ul><ulclass="square"><li>咖啡</li><li>茶</li><li>可口可乐</li></ul><ulclass="none"><li>咖啡</li><li>茶</li><li>可口可乐</li></ul>1234ul.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-2list-style-image的取值范围语法：list-style-image:url(图片文件的路径);课堂练习1-16-2将图像作为列表项标记HTML代码：CSS代码：12345<ul><li>咖啡</li><li>茶</li><li>可口可乐</li></ul>1ul{list-style-image:url(images/biao.png);}显示效果如图1-16-3所示。图1-16-3将图像作为列表项标记知识与技能准备列表标志位置可以确定标志出现在列表项内容之外还是内容内部。该属性用于声明列表标志相对于列表项内容的位置。如果位置是外部(outside)，则会放在离列表项边框边界一定距离处；如果位置是内部(inside)，则相当于是插入在列表项内容最前面的行内元素一样。3、列表标志位置表1-16-3list-style-position的取值范围语法：list-style-position:位置的值;课堂练习1-16-3根据素材制作如图1-14-3所示效果的列表样式HTML代码：CSS代码：123456<ulclass="list"><li>百度搜索引擎</li><li>谷歌搜索引擎</li><li>360搜索引擎</li><li>bing搜索引擎</li></ul>1234567.listli{margin:5px;background:#FFF;list-style-position:inside;list-style-image:url(../images/biao.png);font-size:20px;}显示效果如图1-16-4所示。图1-16-4列表样式效果知识与技能准备列表标志的综合设置list-style是一个简写属性，它涵盖了所有其他列表样式属性。可以按标记样式、标记位置、标记图片的顺序设置。说明：将以上三个属性的综合写法，每个参数都是选填，如果不填写，则默认为该属性的默认值。注意顺序是固定的，不能改变，否则该设置无效。从效果图可以看出，采用list-style设置列表样式效果和图1-16-4完全一致。4、列表标志的综合设置语法：list-style:list-style-typelist-style-positionlist-style-image;任务实施1、为header模块添加导航效果除了前面分析的显示和隐藏菜单列表，还要为导航栏列表中文字“首页”添加默认的背景，和其它列表项有所不同。鼠标经过列表文字时，文字的颜色产生变化。

显示效果如图2-6-9所示：HTML代码：CSS代码：1234567891011121314151617181920212223header{padding:20px;}header.logo{float:left;font-size:2.6rem;}headernav{float:right;width:54px;margin:4px;border-radius:3px;}headernavspan{display:block;text-align:center;font-size:2rem;line-height:55px;color:#888;}headernavspan:hover{background:#ddd;}242526272829303132333435363738394041424344headernavul{position:absolute;top:80px;/*注意该设置*/left:0;width:100%;font-weight:bold;color:#000;padding:0;margin:0;}headernavli{padding:15px;margin:010px;list-style-type:none;}headernava{color:rgb(53,60,62);}headernava:hover{color:#4FCCE2;}任务实施显示效果如图如图1-16-6和1.16-7所示：图1-16-6导航条效果-鼠标经过前图1-16-7导航条效果-鼠标经过时任务实施2、为contact模块设置列表效果在D清单宣传网页的底部“联系我们”部分，设置列表的排版效果，同时设置联系邮箱的颜色效果。设置导航条效果时，注意导航图标的底部和列表项内容的顶部务必要重合。该设置可以在绝对定位的top属性中进行设置。在实际应用中，特别要注意的是，综合设置list-style中标记类型、标记位置、标记图片必须按照顺序进行设置，顺序位置不可更改。显示效果如图2-6-10所示：图1-16-8联系我们模块效果CSS代码：123456789101112.contact{background:#000000;text-align:left;color:#FFFFFF;padding:30px;margin:40p