Web前端技术开发（HTML5+CSS3+JavaScript）课件 第八单元 列表的应用_第1页
Web前端技术开发（HTML5+CSS3+JavaScript）课件 第八单元 列表的应用_第2页
Web前端技术开发（HTML5+CSS3+JavaScript）课件 第八单元 列表的应用_第3页
Web前端技术开发（HTML5+CSS3+JavaScript）课件 第八单元 列表的应用_第4页
Web前端技术开发（HTML5+CSS3+JavaScript）课件 第八单元 列表的应用_第5页
已阅读5页，还剩13页未读， 继续免费阅读

下载本文档

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

文档简介

Web前端开发技术第八单元列表的应用了解列表类型、学会建立列表、掌握嵌套列表及列表应用嵌套列表、列表的应用1.1列表的建立与使用1.2嵌套列表1.3CSS设置列表样式1.4列表的应用列表的建立与使用11.1列表的建立与使用列表类型：

常用的列表种类有定义列表、有序列表和无序列表。常用的列表标记，如表8-1所示。1.1列表的建立与使用建立无序列表：

无序列表是一套组合标记，由<ul>和<li>这两种不同的标记组成。基本语法：说明：在HTML文件中，利用成对<ul></ul>标记可以插入无序列表，但<ul>标记之间必须使用成对<li></li>标记添加列表项值。这两种标记都不能单独使用。1.1列表的建立与使用无序列表项目符号类型：

无序列表的项目符号可以自行定义，需要设置<ul>标记的type属性，该属性的取值如表8-2所示。注意：type属性可用CSS替代了，不赞成使用该属性。本单元中的8.3节将结合CSS属性list-style-type来设置列表类型。1.1列表的建立与使用建立3个列表项的无序列表。默认的无序列表项为实心圆点。1.1列表的建立与使用建立有序列表：

有序列表除了列表项的符号与无序列表不同外，显示效果基本一致。在很多情况下，两者可以相互代替使用。基本语法：说明：在HTML文件中，利用成对<ol></ol>标记可以插入有序列表，但<ol>标记之间必须使用成对<li></li>标记添加列表项值。这两种标记都不能单独使用。1.1列表的建立与使用有序列表项目符号类型：与无序列表的定义项目符号的一样，推荐使用CSS来设置。1.1列表的建立与使用使用type属性设置项目符号，使用start属性设置起始值。嵌套列表21.2嵌套列表列表间可以相互嵌套使用。列表项内容可以是文本、标题、图片，甚至可以是列表等网页元素。列表嵌套实例

CSS设置列表样式31.3CSS设置列表样式设置列表样式—list-style-type使用CSS属性list-style-type设置列表项类型。

list-style-type属性的取值如下表所示。1.3CSS设置列表样式添加列表图像—list-style-image使用CSS属性list-style-image设置列表图像。属性值none表示不使用图像；URL指定图像的路径。1.3C

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论