网页设计-列表项目_第1页
网页设计-列表项目_第2页
网页设计-列表项目_第3页
网页设计-列表项目_第4页
网页设计-列表项目_第5页
已阅读5页，还剩16页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第5章

列表项目网页设计-列表项目全文共21页，当前为第1页。第5章列表项目5.1无序列表ul5.2有序列表ol5.3嵌套列表5.4定义列表dl/dt/dd

网页设计-列表项目全文共21页，当前为第2页。无序列表样本网页设计-列表项目全文共21页，当前为第3页。无序列表（Unorderedlist）也称强调式列表，它是一种在表的各项前显示有特殊项目符号的列表。定义无序列表需要使用无序列表标记符<UL></UL>和列表项（Listitem）标记符<LI></LI>（结束标记符可省略）5.1无序列表ul网页设计-列表项目全文共21页，当前为第4页。1．格式：

<ultype=值><li>项目符号

<li>项目符号

……</ul>

2．说明：①使用type属性来控制标号的类型，见表5.1②在同一个无序列表中，下一个<li>的出现，就表明上一个列表项的结束。无序列表ul网页设计-列表项目全文共21页，当前为第5页。设定一个方形实心的行标号■type=square设定一个空心圆点的行标号○type=circle设定一个实心圆点的行标号●，默认项type=disc含义type取值无序列表的type属性表网页设计-列表项目全文共21页，当前为第6页。无序列表示例<ul>

<li>奥运加油

<li>中国加油</ul><ultype=square>

<li>奥运加油

<li>中国加油</ul>网页设计-列表项目全文共21页，当前为第7页。

有序列表（Orderedlist）：也称数字式列表，它是一种在表的各项前显示有数字或字母的缩排列表。5.2有序列表ol网页设计-列表项目全文共21页，当前为第8页。定义有序列表需要使用有序列表标记符<OL></OL>和列表项（Listitem）标记符<LI></<LI>（结束标记符可省略），语法如下：

<oltype=值1start=值2><li>项目符号

<li>项目符号

……</ol>有序列表的定义网页设计-列表项目全文共21页，当前为第9页。

①在同一个有序列表中，下一个<li>的出现，就表明上一个列表项的结束。②顺序编号是由属性type和start来设置的。type表示标号的类型，比如数字、字母以及罗马字母；start属性表示列表清单的标号从第几项开始 表5.2列出了type属性的取值及含义。说明：网页设计-列表项目全文共21页，当前为第10页。表示列表项用大写罗马字母标号（I，II，III…）type=I表示列表项用小写罗马字母标号（i，ii，iii…）type=i表示列表项用小写字母标号（a,b,c…）type=a表示列表项用大写字母标号（A，B，C…）type=A表示列表项用数字标号（1，2，3…），默认项type=1含义type取值

有序列表的TYPE属性表网页设计-列表项目全文共21页，当前为第11页。有序列表示例<ol><li>湖南<li>长沙理工大学</ol><oltype=a><li>湖南<li>长沙理工大学</ol><oltype=I><li>湖南<li>长沙理工大学</ol>网页设计-列表项目全文共21页，当前为第12页。定制列表元素定制表中的标记<litype=#>#=disk,circle,square示例：<ul>

<litype=disc>ONE

<litype=circle>TWO

<litype=square>THREE</ul>网页设计-列表项目全文共21页，当前为第13页。定制列表元素定制有序列表表中的序号

<litype=#>#=A,a,I,i,1

示例：<ol><litype=A>ONE-ONE

<li>ONE-TWO</ol><ol><litype=I>ONE-ONE

<li>ONE-TWO</ol>网页设计-列表项目全文共21页，当前为第14页。定制列表元素定制有序列表表中的序号的起始值

<olstart=#>#=number示例：<olstart=5><litype=A>ONE-ONE<li>ONE-TWO</ol>网页设计-列表项目全文共21页，当前为第15页。

将一个列表嵌入另一个列表中，作为另一个列表的一部分，叫做嵌套列表。HTML可以用层层嵌套的方式来实现多层列表。无论是有序列表还是无序列表的嵌套，浏览器都可以自动地分层排列。5.3嵌套列表网页设计-列表项目全文共21页，当前为第16页。嵌套列表示例<ol><li>One-One<li>One-Two<ul><li>Two-One<li>Two-Two<ol><li>Three-One<li>Three-Two</ol></ul><li>One-Three</ol>网页设计-列表项目全文共21页，当前为第17页。

定义列表(DefinitionList)允许比较复杂的列表说明，不只可以分项说明，还可以针对每一个小项目再加以说明。1．格式：

<dl><dt>项目1<dd>项目1的说明1……<dt>项目2<dd>项目2的说明1……</dl>5.4定义列表dl/dt/dd网页设计-列表项目全文共21页，当前为第18页。①首标签<dl>和尾标签</dl>之间的内容就是描述性列表的内容，由一系列用描述项标签<dt>或解释项标签<dd>标识的列表项组成。②<dt>和<dd>标签都是单独标签，位于列表项的开头，分别表示该项是描述项和解释项。③<dt>和<dd>标签通常是成对出现的，即一个描述项对应于一个解释项。一个描述项也可以对应于几个解释项，但最好不要出现几个描述项对应于同一个解释项的情况。④在显示时，解释项的内容会自动缩进一定的距离，使列表的结构更加清晰。说明：网页设计-列表项目全文共21页，当前为第19页。定义列表示例<html><body><h4>定义列表(DefinitionList)：</h4><dl><dt>野生动物</dt><dd>所有非经人工饲养而生活

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论