《网页设计与制作》课件第4章 HTML列表与表格（全）_第1页
《网页设计与制作》课件第4章 HTML列表与表格（全）_第2页
《网页设计与制作》课件第4章 HTML列表与表格（全）_第3页
《网页设计与制作》课件第4章 HTML列表与表格（全）_第4页
《网页设计与制作》课件第4章 HTML列表与表格（全）_第5页
已阅读5页，还剩25页未读， 继续免费阅读

下载本文档

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

文档简介

教学目标一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序、条

理清晰，通过本章的学习学生能掌握列表的使用，掌握表格的使用，能够完成页面的排版。【知识目标】掌握无序、有序及定义列表的使用，可以制作常见的网页模块。掌握表格标签的应用，能够创建表格并添加表格样式。【技能目标】掌握列表的使用。掌握表格的使用。能够为列表和表格创建样式并应用。能够完成页面的排版。第四章HTML列表与表格4.0任务描述及工作单4.1列表标签4.2CSS控制列表样式4.3表格4.4CSS控制表格样式4.5任务案例——制作学院网站主页第四章HTML列表与表格4.0任务描述及工作单一个复杂的网页，版面的排版比较重要，而且是一项比较繁重的工作，设计过程中每个版块的定位等由为重要。一个网页设计质量的优劣和版面设计有很大的关系，如包头职业技术学院首页的网页所示。页面包含很多版块，需要进行合理的设计，设计完成的效果如图所示。4.1.1无序列表<ul>4.1.2有序列表<ol>4.1.3定义列表<dl>4.1.4列表的嵌套应用4.1列表标签4.1.1无序列表<ul>

ul是英文unorderedlist的缩写，翻译为中文是无序列表。无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分。无序列表使用<ul〉标签定义，内部可以嵌套多个<li>标签（<li>是列表项）。定义无序列表的基本语法格式如下：<ul><li>列表项l</li><li>列表项2</li><li>列表项3</li>……</ul>【例4-1】无序列表基本语法和type属性，Example4-1.html，代码如下：<htmllang="en"><head><metacharset="UTF-8"><title>无序列表</title></head><body><ul><litype="square">春</li><li>夏</li><li>秋</li><li>冬</li></ul></body></html>运行代码,效果如图所示：注意：

1.不建议成使用无序列表的type属性，一般通过CSS样式属性替代。2.<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入文字的做法是不被允许的。ol是英文orderedlist的缩写，翻译为中文是有序列表。有序列表是一种强调排列顺序的列表，使用<ol>标签定义，内部可以嵌套多个<li>标签。例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下：<ol><li>列表项l</li><li>列表项2</li><li>列表项3</li>……</ol>

在上面的语法中，<o1></o1〉标签用于定义有序列表，<li></li>为具体的列表项，和无序列表类似，每对<ol></ol>中也至少应包含一对<li></li>。4.1.2有序列表<ol>

在有序列表中，除了type属性之外，还可以为<ol>定义start属性、为<li>定义value属性,它们决定有序列表的项目符号，其取值和含义如表6-2所示。属性属性值/属性值类型描述type1（默认）项目符号显示为数字123…a或A项目符号显示为英文字母abcd…或ABC…i或I项目符号显示为罗马数字iiiiii…或IIIIII…start数字规定项目符号的起始值value数字规定项目符号的数字【例4-2】无序列表基本语法和type属性，Example4-2.html，代码如下：<!doctypehtml> <html><head> <metacharset=nutf-8n> <title>有序列表</title> </head> <body> <ol> <li>大师兄孙悟空</li> <li>二师兄猪八戒</li> <li>三师弟沙和尚</li> </ol> <ol> <litype="1"value="1">第一名状元</li> <!--阿拉伯数制序--><litype="a">第二名榜眼</li> <!--英文字母排序--><litype=T>第三名探花</li> <!--罗马数字排序--></ol> </body> </html> 在例4-2中，定义了两个有序列表。其中，第8~12行代码中的第1个有序列表没有应用任何属性，第13~17行代码中有序列表的，第2个列表项应用了type和value属性，用于设置特定的列表项目符号。运行例4-2,效果如图所示。4.1.3定义列表<dl>dl是英文definitionlist短语的缩写，翻译为中文是定义列表。定义列表与有序列表、无序列表父子搭配的不同，它包含了3个标签，即dl、dt、dd。定义列表的基本语法格式如下：<dl><dt>名词l</dt><dd>dd是名词1的描述信息1</dd><dd>dd是名词1的描述信息2</dd>……<dt>名词2</dt><dd>dd是名词2的描述信息l</dd><dd>dd是名词2的描述信息2</dd>……</dl>在上面的语法中，<dl></dl>标签用于指定定义列表，<dt></dt>和<dd></dd>并列嵌套于<dl></dl>中。其中，<dt></dt>标签用于指定术语名词，<dd></dd>标签用于对名词进行解释和描述。一对<dt></dt>可以对应多对<dd></dd>,也就是说可以对一个名词进行多项解释。【例4-3】自定义列表，Example4-3.html，代码如下：<!doctypehtml><html><head><metacharset="utf-8"><title>定义列表</title></head><body><dl><dt>红色</dt><dd>可见光谱中长波末端的颜色。</dd><dd>是光的三原色和心理原色之一。</dd><dd>表着吉祥、喜庆、热烈、奔放、激情、斗志、革命</dd><dd>红色的补色是青色。</dd></dl></body></html>

运行例4-3,效果如图4-3所示。4.1.4列表的嵌套应用

在网上购物商城中浏览商品时，我们经常会看到某一类商品被分为若干小类，这些小类通常还包含若干的子类。同样，在使用列表时，列表项中也有可能包含若干子列表项，要想在列表项中定义子列表项就需要将列表进行嵌套。列表嵌套的方法十分简单，我们只需将子列表嵌套在上一级列表的列表项中，例如下面代码是在无序列表中嵌套一个有序列表：<ul><li>列表项l</li><li>列表项2</li><li><ol><li>列表项l</li><li>列表项2</li></ol></li></ul>【例4-4】ol元素的使用，Example4-4.html，代码如下：<!doctypehtml><htmllang="en"> <head> <metacharset="UTF-8"> <title>ol元素的使用</title> </head> <body> <h2>饮品</h2> <ul> <li>咖啡

<ol> <!--有序列表的嵌套--><li>拿铁</li> <li>摩卡</li> </ol> </li> <li>茶

<ul> <!--无序列表的嵌套--><li>碧螺春</li> <li>龙井</li> </ul> </li> </ul> </body> </html> 运行例4-4,效果如图所示。本知识点内容结束PPT模板下载：/moban/

网页设计与制作

第4章HTML列表与表格4.2CSS控制列表样式

定义无序或有序列表时，可以通过标签的属性控制列表的项目符号，但该方式不符合结构表现分离的网页设计原则，为此css提供了一系列的列表样式属性，来单独控制列表项目符号，本节将对这些属性进行详细的讲解。4.2.1 list-style-type属性在CSS中，list-style-type属性用于控制列表项显示符号的类型，其取值有多种，它们的显示效果各不相同，【例4-5】列表项显示符号，Example4-5.html，代码如下：<!doctypehtml><html><head><metacharset="utf-8"> <title>列表项显示符号</title><styletype="text/css"> ul{list-style-type:square;} ol{list-style-type:decimal;}</style></head><body><h3>红色</h3><ul><li>大红</li><li>朱红</li><li>嫣红</li></ul><h3>蓝色</h3><ol><li>群青</li><li>普蓝</li><li>湖蓝</li></ol></body></html> 运行例6-5,效果如图所示。4.2.2 list-style-image属性一些常规的列表项显示符号并不能满足网页制作的需求，为此CSS提供了list-style-image属性，其取值为图像的url。使用list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观【例4-6】控制列表项目图像，Example4-6.html，代码如下：<!doctypehtml><html><head> <metacharset="utf-8"> <title>list-style-image控制列表项目图像</title> <styletype="text/css">ul{list-style-image:url(./pic/Dot1.gif);}</style></head><body><h2>栗子功效</h2> <ul><li>抗衰老</li><li>益气颇</li><li>预防骨质疏松</li> </ul></body></html>运行例4-6,效果如图所示。4.2.3 list-style-position属性设置列表项目符号时，有时需要控制列表项目符号的位置，即列表项目符号相对于列表项内容的位置。在CSS中，list-style-position属性用于控制列表项目符号的位置，其取值有inside和outside两种，对它们的解释如下。Inside：列表项目符号位于列表文本以内。Outside：列表项目符号位于列表文本以外(默认值)【例4-7】列表项目符号位置，Example4-7.html，代码如下：<!doctypehtml><html><head> <metacharset="utf-8"> <title>列表项目符号位置</title> <styletype="text/css"> .in{list-style-position:

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

温馨提示

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

最新文档

评论

0/150

提交评论