Web前端开发（HTML5+CSS3+JavaScript） 课件 第3章 3.1- 列表.pptx

Web前端基础技术CSSJSHTML第3章3.1-列表

Contents目录无序列表有序列表列表嵌套定义列表综合案例

1.列表概述列表分类一般作用：简要的列出数据项；局部布局。无序列表有序列表定义列表

更多用途【局部布局】：结合CSS-导航；商品列表

2.无序列表(UnOrderList，符号列表)ultype=“符号类型”litype=“符号类型”列表项/lili列表项/li……/ulul：列表项容器；除了列表项标记，不要放置其他任何标记；li：列表项(块标记，容器)，可以放置其他HTML标记，如文本、标题、段落、图片等，注意所有这些内容必须放在li之间type符号类型属性：type=none(无符号)|disc（实心圆,默认）|circle（空心圆）|square（正方形）语法格式

示例：无序列表应用-实现如下效果素材：爬行动物飞禽类动物鱼类动物家禽类动物ulli爬行动物/lili飞禽类动物/lili鱼类动物/lili家禽类动物/li/ulultype=circleli爬行动物/lili飞禽类动物/lili鱼类动物/lili家禽类动物/li/ulultype=circleli爬行动物/lilitype=“square飞禽类动物/lilitype=“square鱼类动物/lili家禽类动物/li/ulabc

3.有序列表(OrderList,编号列表)oltype=“编号类型”start=“数字”litype=“编号类型”value=“数字”列表项/lili列表项/li……/olol：列表项容器；除了列表项标记，不要放置其他任何标记；li：块标记，可以放置其他HTML标记，如标题、段落等属性：type=none|1（默认，数字列表）|A|a|I|i单独设置列表项属性（很少使用，了解）：start，数字，表示列表项的起始位置；value：当前项的起始编号，注意，将改变后续编号。语法格式

示例4-2：有序列表应用-实现如下效果---阅读理解，了解olli列表项1/lili列表项2/lili列表项3/li/ololtype=Astart=1li列表项1/lili列表项2/lili列表项3/li/ololtype=Astart=1litype=Ivalue=2列表项1(value=2)/lili列表项2/lilitype=1value=1列表项3(value=1)/lili列表项4/li/olabc

4.嵌套列表任何一个列表项，都可以包含其他类型的列表(有序/无序列表);注意：只能在列表项LI中嵌套其他列表。列表1（标题项）

5.定义列表（DefinitionList）dldt项标题/dtdd描述项/dd…dl特点：去掉符号/编号；标题不缩进，描述项缩进，用以列出一组分类信息dl：定义列表definitionlistdt：标题项definitiontitle(term)dd：描述项definitiondata(description)语法格式

示例定义列表的应用dldt学校名称/dtdd广州交通大学/dddt学校地址/dtdd广州黄埔区红山三路101号/dddt联系电话/dtdd020dddd020dddt相关院校/dtdd上海海事大学/dddd大连海事大学/dddd集美航海学院/dd/dl素材学校名称广州交通大学学校地址广州黄埔区红山三路101号联系电话020020相关院校上海海事大学大连海事大学集美航海学院

练习：使用嵌套列表（有序/无须均可）和定义列表实现。思路：每一大的部分都先作为列表项，保留标题，在标题下插入新列表。练习时刻素材朴朴超市是一家30分钟即时配送的移动互联网购物平台。蔬菜豆制品类肉禽类猪肉排骨瘦肉猪肚鸡肉鸭肉牛肉海鲜水产类朴朴客服全国免费热线:400-777-1313工作时间：周一~周日8：00-22：00

练习一、填空1.列表有三种类型，分别是