《HTML5与CSS3网页设计》-《HTML5与CSS3网页设计》-HTML5 与CSS5 网页设计（第二版）第七章

第7章列表7.1有序列表7.2无序列表7.3定义列表7.4列表嵌套7.5使用CSS样式表美化列表7.6用于导航的行内列表7.7设置嵌套列表样式7.8综合实例返回7.1有序列表1.基本语法<ol><li>列表项一</li><li>列表项二</li><li>列表项三</li></ol>在此语法中，<ol></ol>标记表示有序列表的开始和结束，而<li></li>标记表示一个列表项的开始和结束。2.有序列表的起始值start有序列表的默认起始编号为数字1，通过start属性可以自定义编号的初始值。其语法格式为下一页返回7.1有序列表<olstart=”起始数值”><li>列表项一</li><li>列表项二</li><li>列表项三</li></ol>上一页返回7.2无序列表无序列表没有设置编号，而是在每个列表项前，以项目符号作为分项标识，各个列表项之间没有顺序之分。其定义标记为<ul></ul>，在默认情况下，无序列表的项目符号是●。无序列表的基本语法如下:<ul><li>列表项一</li><li>列表项二</li><li>列表项三</li></ul>返回7.3定义列表在HTML中还有一种列表形式，称为定义列表，其标记为<dl></dl>，用于解释名词。定义列表的每个列表项都由两部分组成:需要解释的名词及其具体解释。列表项也不再使用<li>标记，而是用<dt>标记来指定需要解释的名称，用<dd>标记来指定具体的解释。其基本语法如下:需要说明的是，定义列表的<dl>标记必须成对出现，而<dt>和<dd>的结束标记，即</dt>和</dd>是可以省略的。实例如图7-4所示。返回7.4列表嵌套列表嵌套是指列表中还有列表，把一个列表看作是一个新列表中的一行列表项，例如无序列表中再嵌入无序列表，或者无序列表中嵌入有序列表等，但无论是哪种嵌套方式，都应遵从HTML代码的使用规则。将一个列表的标记完全放在另一个标记内，这是一种父子级的关系。列表嵌套的形式灵活，常用来表示复杂的导航，应用广泛。返回7.5使用css样式表美化列表1.列表符号样式list-style-type列表符号样式默认的是实心圆，如果要定义其他符号效果，可以通过list-style-type属性来设置。这个属性可以定义整个列表的符号样式，也可以针对其中的某个列表项<li>来定义，表7-1为其属性取值。2.列表图像符号list-style-image列表图像属性list-style-image用来设置列表符号的图像类型，使列表符号不局限于规定的那些样式，丰富和美化了列表符号。本属性有两个可选值，如下所述:(1)none:表示不设置列表图像，是默认值。(2)url:指定图像的名称或者路径。如果指定的图像路径不正确，系统会按none处理;另外也要注意图像下一页返回7.5使用css样式表美化列表的大小，如太大会影响列表的美观(图像是按其原始大小显示的)。3.列表缩进list-style-position列表缩进属性用于设置列表项缩进的位置。本属性同样有两个可选值，如下所述:(1)inside:表示列表符号缩进，即列表项目标记放置在文本以内，且环绕文本根据标记对齐。(2)outside:表示保持标记位于文本的左侧，即列表标记放置在文本以外，且环绕文本不根据标记对齐，是默认值。4.复合属性list-style以上三种属性的组合即复合属性list-style。上一页下一页返回7.5使用css样式表美化列表它的基本语法格式是:list-style:list-style-type‖list-style-position‖list-style-image三个属性间用空格分隔，其默认值为:list-style:discoutsidenone;上一页返回7.6用于导航的行内列表对于一个网站来说，导航菜单是不可缺少的，导航菜单的风格往往也决定了整个网站的风格，所以制作样式各异的导航条是网页设计者非常重要的工作。首先来看一个网页的效果截图，如图7-10所示是人人影视网站的页眉。图中框出来的部分就是网页的主导航条。制作这样的导航条，可以通过列表及CSS属性设置来实现，这也是列表最大的用处之一。本节将主要讨论用于导航的行内列表。创建如图7-10所示的导航条的操作步骤如下:(1)首先建立HTML相关结构，将菜单的各个项用无序列表<u1>表示。(2)然后开始设置CSS样式，首先定义<nav>相关属性以及文字的字体，再将项目列表<ul>的list-style-type属性设置为none(不显示项目符下一页返回7.6用于导航的行内列表号)，将<li>的内边距设置为padding以及将display的属性设置为inline(列表项显示在一行内)，这是实现行内导航非常重要的设置。设置完成时运行代码，效果如图7-12所示。(3)最后对超链接<a>标记进行样式设置，包括字体颜色color、下划线等。完成后的网页导航条效果如图7-13所示。上一页返回7.7设置嵌套列表样式在本章7.4节中我们已经介绍了列表嵌套，即列表里面还有列表。本节主要结合CSS样式表，利用列表嵌套，实现复杂的导航，如图7-14所示。这张网页包含两个导航栏，即页头部分的主导航以及右侧的侧边栏导航。这个侧导航可以通过列表嵌套制作出来。其步骤如下:(1)首先建立HTML相关结构，通过无序列表的嵌套，搭建出导航条的层次关系。(2)然后开始设置CSS样式，首先定义外层<div>的相关属性如背景等，再通过.linklu1选择器将外层无序列表<ul>的list-style-image属性设置为指定的小图标，然后定义<li>的相关属性，包括字体颜色、内间距等。下一页返回7.7设置嵌套列表样式(3)最后定义内层<div>样式，.link2u1设置内层无序列表<ul>的属性，并定义<li>的相关属性。完成后的嵌套列表效果如图7-16所示。上一页返回7.8综合实例本章主要介绍了各种列表及其在网页中的应用，围绕这个核心，完成如图7-17所示页面的设计，这个网页综合运用了多种列表。具体操作步骤如下:(1)新建页面，在title标记中输入“葡萄酒庄园”作为页面标题。(2)观察整个页面的内容，根据语义来选择使用哪个标记。页面最上方的部分使用header和nav，主体文字内容使用artile。(3)为了方便设置整个页面内容的样式，使用id为content的div将所有元素包裹起来。(4)各部分内容的代码按照从上到下的顺序书写。