网页设计与制作教程Web前端开发（第7版）课件：HTML5的块级元素-列表元素_第1页
网页设计与制作教程Web前端开发（第7版）课件：HTML5的块级元素-列表元素_第2页
网页设计与制作教程Web前端开发（第7版）课件：HTML5的块级元素-列表元素_第3页
网页设计与制作教程Web前端开发（第7版）课件：HTML5的块级元素-列表元素_第4页
网页设计与制作教程Web前端开发（第7版）课件：HTML5的块级元素-列表元素_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

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

文档简介

HTML5提供了3种列表模式，即有序列表、无序列表和定义列表。

HTML5的块级元素

列表元素目录块级元素2.1基本块级元素2.2列表元素2.3表格元素table2.4表单2.5分区元素div2.6缩排元素blockquote2.7实训—制作精选信息板块习题22.2.1无序列表元素ul无序列表（unorderedlist）定义格式为：<ul><li>第一个列表项</li><li>第二个列表项</li>…</ul>【例2-5】无序列表示例。本例文件2-5.html在浏览器中显示的效果如图2-5所示。2.2列表元素<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>无序列表示例</title></head><body><h4>征文排行</h4>

<ul>

<li>最佳图书奖</li>

<li>最佳创意奖</li>

<li>最具人气作品奖</li>

<li>最佳短篇奖</li>

<li>最烧脑作品奖</li>

</ul></body></html>2.2列表元素2.2.2有序列表元素ol有序列表（orderedlist）格式为：<ol><li>第一个列表项</li><li>第二个列表项</li>…</ol>【例2-6】有序列表示例。本例文件2-6.html在浏览器中显示的效果如图2-6所示。2.2列表元素<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>有序列表示例</title></head><body><h4>征文排行</h4>

<ol><!--列表样式为默认的数字-->

<li>最佳图书奖</li>

<li>最佳创意奖</li>

<li>最具人气作品奖</li>

<li>最佳短篇奖</li>

<li>最烧脑作品奖</li>

</ol></body></html>2.2列表元素2.2.3自定义列表元素dl自定义列表（definitionlist）元素的格式为：<dl>

<dt>第一个字典词语项</dt>

<dd>对第一个字典词语项的描述文字1</dd><dd>对第一个字典词语项的描述文字2</dd>…

<dt>第二个字典词语项</dt>

<dd>对第二个字典词语项的描述文字1</dd>…</dl>【例2-7】使用列表显示高分电影排行榜，本例文件2-7.html的浏览效果如图2-7所示。2.2列表元素<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>定义列表示例</title></head><body><h4>高分电影排行榜</h4><dl>

<dt>按类型排行</dt><dd>爱情</dd><dd>喜剧</dd><dd>其他类型</dd>

<dt>按年代排行</dt><dd>2020</dd><dd>2019</dd><dd>其他年代</dd></dl></body></html>2.2列表元素2.2.4嵌套列表所谓嵌套列表就是无序列表与有序列表嵌套混合使用。【例2-8】在无序列表中嵌套无序列表、有序列表和定义列表，本例文件2-8.html在浏览器中显示的效果如图2-8所示。2.2列表元素<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>青青博客</title></head><body><ul><!--无序列表--><li>点击排行</li><ol><!--无序列表--><li>十条设计原则教你学会如何设计网页布局</li><li>6条网页设计配色原则,让你秒变配色高手</li><li>三步实现滚动条触动css动画效果</li></ol>2.2列表元素<hr/><!--水平分隔线--><li>猜你喜欢</li><ul><!--嵌套有序列表--><li>安静地做一名爱设计的女子</li><li>个人博客，属于我的小世界</li></ul><hr/><!--水平分隔线--><li>欢迎联系</li><dl><dt>电话：</dt>

<dd>lt;/dd>

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

温馨提示

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

最新文档

评论

0/150

提交评论