网页设计基础与实战课件

上传人：1*** IP属地：广东上传时间：2025-02-16 格式：PPTX 页数：39 大小：1.29MB 积分：20 举报 版权申诉

已阅读5页，还剩34页未读，继续免费阅读

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

文档简介

第3章使用列表与表格布局3.1添加列表3.2添加表格了解列表与表格的特点掌握列表与表格的相关标签掌握列表与表格的使用引言在一个网页中经常能看到列表与表格的应用，网页中漂亮的导航、整齐规范的文章标题列表和图片列表等都是利用列表实现的。列表是指容器里面装载着结构、样式一致的文字或图表的一种形式。列表可分为有序列表、无序列表和自定义列表3种类型，它最大的特点就是整齐、规范、有序。表格是由行和列组成的结构化数据集（表格数据），用于呈现数据或统计信息，可以让数据的显示变得十分规整有条理，可读性好。列表与表格的应用可以使图片和文字变得整洁有序，数据也变得“有模有样”，整个网页更加规整。本章将重点学习列表与表格的制作，走进一个“整齐有序”的世界。3.1添加列表有序列表案例—新闻列表自定义列表无序列表3.1添加列表3.1.1有序列表有序列表（ordered-list）是有排列顺序的列表，其各个列表项按照一定的顺序排列。<ol><li>列表项目1</li><li>列表项目2</li>

......</ol>语法格式有序列表使用<ol>标签定义，包含一个或多个<li>列表项目，其语法格式如下。<ol>有序列表标签常用属性的具体说明如表所示。标签属性属性说明type定义列表中使用的标记类型，属性值有1（默认值）、A、a、I、istart定义有序列表的起始值，属性值为数值，表示自第N个数开始reversed定义列表顺序为降序3.1添加列表3.1.1有序列表3.1添加列表3.1.1有序列表利用有序列表将诗句降序排列显示。演示说明<body><oltype="i"start="10"reversed><li>空山新雨后，天气晚来秋。</li><li>明月松间照，清泉石上流。</li><li>竹喧归浣女，莲动下渔舟。</li><li>随意春芳歇，王孙自可留。</li></ol></body>代码

例3.1运行效果3.1添加列表3.1.2无序列表无序列表（unordered-listt）各个列表项之间没有顺序级别之分，是并列的。<ul><li>列表项目1</li><li>列表项目2</li>

......</ul>语法格式无序列表使用<ul>标签定义，包含一个或多个<li>列表项目，其语法格式如下。<ul>无序列表标签通常使用type属性修改其显示效果type属性属性取值显示效果disc（默认值）实心小黑圆点circle空心小圆点square实心小黑方块3.1添加列表3.1.2无序列表3.1添加列表3.1.2无序列表利用无序列表列举本章学习目标。演示说明<body><ultype="square"><p>本章学习目标</p><li>认识和了解列表与表格的用法</li><li>掌握利用列表制作彩色导航栏</li><li>掌握利用表格语义化制作成绩表</li><li>掌握制作简单个人简历表</li></ul></body>代码

例3.2运行效果3.1添加列表3.1.3自定义列表自定义列表（definition-list）常用于对术语或名词进行解释和描述，列表项的前面没有任何项目符号。<dl><dt>名词1</dt><dd>名词1描述一</dd><dd>名词1描述二</dd>语法格式自定义列表使用<dl>标签定义，列表中并列嵌套<dt>标签和<dd>标签，<dt>标签用于定义名词，<dd>标签用于定义名词的解释和描述。一对<dt></dt>里可以对应多对<dd></dd>，即一个名词可有多个解释和描述。自定义列表的语法格式如下。

<dt>名词2</dt><dd>名词2描述一</dd><dd>名词2描述二</dd></dl>3.1添加列表3.1.3自定义列表利用自定义列表定义HTML、CSS和JavaScript这三个名词，并对其进行解释和描述。演示说明<body><dl>

<dt>HTML超文本标记语言</dt>

<dd>超文本：页面内可以包含图片，链接，甚至音乐，程序等非文字元素。</dd>

<dd>标记：与之相对是的编译型语言，标记型语音无需编译，直接可以被解析展示。</dd>

</dl></body>代码

例3.3运行效果3.1添加列表3.1.4案例—新闻列表本实例是制作一个新闻列表，主要由<div>块元素、<ol>有序列表、<ul>无序列表和<img>图像标签构成。新闻列表的页面结构简图如图所示。3.1添加列表3.1.4案例—新闻列表代码实现<body><divid="news"><olclass="nav">

<li><aclass="present"href="/"target="_blank">头条</a></li></ol><divclass="image">

<imgsrc="../image/teacher.png"alt=""width="525"height="300"></div><ul>

</ul></div></body>主体代码

例3.43.1添加列表3.1.4案例—新闻列表代码实现在上述主体代码中，利用有序列表在头部制作一个简单的新闻导航条，点击导航条可跳转到百度新闻搜索网页。块元素里嵌入一张图片，用于修饰网页内容，并合理设置适应于页面结构的宽高。而<ul>无序列表用于添加新闻文本，通过这3个块元素来实现整个页面结构。3.1添加列表3.1.4案例—新闻列表代码实现<style>

/*为父容器整个新闻块设置宽高，清除浮动带来的影响*/#news{width:560px;height:800px;}.nav{width:520px;height:30px;

list-style:none;/*取消列表项目标记*/}ol>li{width:130px;height:30px;

float:left;/*<ol>中的列表项目li左浮动*/}

CSS代码

例3.4

ol>li>a{

text-decoration:none;/*取消超链接标签文本修饰下划线*/font-size:18px;/*超链接标签中的文本设置字体大小*/color:#aaa;}ol>li>.present{

color:#6495ef;/*为<ol>中当前浏览的导航条设置颜色*/}ul>li{

line-height:35px;/*为<ul>中的项目列表li设置行高*/}</style>3.1添加列表3.1.4案例—新闻列表代码实现在上述CSS代码中，首先为父容器整个新闻块设置宽高，清除浮动带来的影响，接着使用list-style属性取消有序列表项目标记，再为有序列表<ol>中的列表项目<li>设置向左浮动，关于元素浮动在第4章第2节内容中有详细讲解。然后为有序列表中的超链接取消下划线，并设置文本字体大小与颜色，且为特定的第一个超链接，即当前浏览的导航条设置颜色，最后为无序列表<ul>中的项目列表<li>设置行高。本节小结本节内容讲解了有序列表、无序列表和自定义列表的使用，并利用列表制作新闻列表页面，对其进行网页布局，让整个网页显得更规整。通过本节的学习，希望读者可以了解这3种列表的使用以及它们之间的区别。3.2添加表格表格基本标签案例—个人简历表合并行与列语义化标签单元格边距与间距表格其他属性3.2添加表格3.2.1表格基本标签<table>标签用于定义一个表格，<tr>标签用于定义表格中的行，可以有一行或多行，嵌套在<table>标签中，<td>标签用于定义表格中的单元格（列），一行里可以有一个或多个单元格（列），嵌套在<tr>标签中。<table><tr><td>单元格内容1</td><td>单元格内容2</td>......</tr>......</table>语法格式一个最基本的表格由<table>、<tr>和<td>这3个标签构成，其语法格式如下。3.2添加表格3.2.1表格基本标签除了<table>、<tr>和<td>这3个主要标签之外，表格的基本标签有<caption>、<th>等。<caption>标签用于定义表格的标题，标签必须紧随<table>标签之后，每个表格只能定义一个标题，通常这个标题会被居中于表格之上。<th>标签用于定义表格内的表头单元格，在<tr>标签内部使用。<th>和<td>是两种类型的单元格，<th>是表头单元格，里面包含表头信息，元素内部的文本通常为居中的粗体文本。<td>是标准单元格，里面包含数据，元素内部的文本通常为左对齐的普通文本。为了更深地对表格进行语义化，使网页内容更好地被搜索引擎理解，在使用表格进行布局时，HTML中引入了<thead>、<tbody>和<tfoot>这3个语义化标签，将表格划分为头部、主体和页脚3部分。用这3个部分来定义网页中不同的内容，让表格语义更加良好，结构更加清晰，代码更加有逻辑性，也更具有可读性和可维护性。概述标签说明<thead>用于定义表格的头部，一般包含网页的logo和导航等头部信息<tbody>用于定义表格的主体。位于<thead></thead>标签之后，一般包含网页中除头部和底部以外的其他内容<tfoot>用于定义表格的页脚。位于<tbody></tbody>标签之后，一般包含网页底部的企业信息等3.2添加表格3.2.2语义化标签<body><table>

<caption>班级成绩表</caption>

<thead>

<tr><th>序号</th>

</tr></thead><tbody><trclass="odd"><td>1</td>演示说明3.2添加表格3.2.2语义化标签主体代码

例3.5利用表格标签和语义化标签制作一个班级成绩表。<td>李华</td><td>124</td>

</tr>

</tbody>

<tfoot><trbgcolor="#ccc"><tdcolspan="6">语文、数学和英文三科分数均为150分</td></tr>

</tfoot></table></body><style>

/*设置整个表格*/table{width:520px;/*设置宽度和高度*/height:320px;text-align:center;/*文本居中*/

border:1pxsolid#cccccc;/*设置表格边框大小、样式和颜色*/

border-collapse:collapse;/*合并边框*/}td,th{

border:1pxsolid#cccccc;/*为单元格添加边框*/}

演示说明3.2添加表格3.2.2语义化标签CSS代码

例3.5利用表格标签和语义化标签制作一个班级成绩表。/*设置表头*/th{height:40px;background-color:#0099cc;color:white;}/*设置单数行*/.odd{

/*设置指定的背景颜色*/background-color:#C0C0C0;}/*设置双数行*/.even{background-color:#FFFFE0;}</style>利用表格标签和语义化标签制作一个班级成绩表，运行效果如图所示。演示说明3.2添加表格3.2.2语义化标签利用表格标签和语义化标签制作一个班级成绩表，表格标签定义表格的基本结构，语义化标签本身不会改变表格的内容与结构，而在表格中添加语义化标签的目的是使表格结构更清晰易懂。使用CSS属性为表格添加边框以及合并边框，为单数行和双数行表格分别设置不同的背景颜色以进行区分，设计表格样式，使其更美观。演示说明3.2添加表格3.2.2语义化标签在制作一个表格时，有时需要对表格的单元格进行合并行或列的操作，把两个或多个相邻单元格合并成一个单元格，这就需要使用到rowspan属性和colspan属性。标签语法格式说明rowspan<tdrowspan="数值">规定单元格可横跨的行数，即合并表格的列。colspan属性通常使用在<td>和<th>标签中，其属性值为数值，这个数值代表所要合并的单元格行数colspan<tdcolspan="数值">规定单元格可横跨的列数，即合并表格的行。colspan属性通常使用在<td>和<th>标签中，其属性值为数值，这个数值代表所要合并的单元格列数3.2添加表格3.2.3合并行与列在制作一个表格时，有时需要设计表格的单元格内容与单元格边框之间的空白间距，以及单元格与单元格边框之间的空白间距，使表格更美观，这就需要使用到cellpadding属性和cellspacing属性。3.2添加表格3.2.4单元格边距与间距1.cellpadding属性cellpadding属性规定单元边沿与其内容之间的空白，即控制单元格的边距。cellpadding属性通常使用在<table>标签中，其属性值为数值，常用单位是像素（px），这个数值代表单元格内容与单元格边框之间的空白间距，即内边距，默认值为1px。cellpadding属性的语法格式如下所示。<tablecellpadding="pixels">3.2添加表格3.2.4单元格边距与间距2.cellspacing属性值得注意的是，请勿将cellpadding属性与cellspacing属性相混淆，注意分清它们的用途。从实用角度出发，最好不要规定cellpadding属性，而是使用CSS来添加内边距。<tablecellspacing="pixels">cellspacing属性规定单元格之间的空间，即控制单元格的间距。cellspacing属性通常使用在<table>标签中，其属性值为数值，常用单位是像素（px），这个数值代表单元格与单元格边框之间的空白间距，即外边距，默认值为2px。cellspacing属性的语法格式如下所示。3.2添加表格3.2.4单元格边距与间距在表格<table>标签中，设置cellspacing的值为0，表示单元格与单元格边框之间的空白间距为0，即表格变为单线框，但不推荐使用。在实际开发中，通常使用CSS中的border-collapse属性来决定表格的边框是分开还是合并，它的属性值有separate（默认值）和collapse。当属性值为separate时，在分隔模式下，相邻的单元格都拥有独立的边框；当属性值为collapse时，在合并模式下，相邻单元格共享边框。border-collapse属性合并边框的代码如下。table{border-collapse:collapse;}3.2添加表格3.2.5表格其他属性HTML为表格提供了一系列的属性用于控制表格的样式，例如border属性、bordercolor属性、align属性、width属性、bgcolor属性、background属性等。属性说明border表示是否设置边框，可以取值为1和0，1代表有边框，0代表没有边框（通常省略不写）bordercolor用于设置边框颜色。在<table>标签中，需配合border属性使用，可对表格的整体边框进行颜色的设置align设置单元格内容的水平对齐方式。在<tr>和<td>标签中，align属性默认值为左对齐（left），在<th>标签中，align属性默认值为居中对齐（center）。而在<table>标签中，align属性用于设置表格在网页中的水平对齐方式。valign设置单元格内容的垂直对齐方式，默认值为居中对齐（center）width设置单元格的宽度，当一列单元格中有不同width属性值时，取最大值作为这一列的宽度3.2添加表格3.2.5表格其他属性续表属性说明bgcolor规定表格的背景颜色。在HTML4.01中，表格的bgcolor属性已废弃，HTML5已不支持表格的bgcolor属性，但在浏览器中仍能识别出来。当需要设置表格背景颜色时，一般在CSS样式中设置background设置表格的背景图片，属性值为一个有效的图片地址，不推荐使用。在实际开发中，通常使用CSS属性设置表格的背景图片border属性不会控制边框的样式，若需要设置边框样式，通常使用CSS样式设计表格边框，即通过border属性的连写设置边框。CSS样式设计边框的示例代码如下。table{border:1pxsolid#aaa;}3.2添加表格3.2.6案例—个人简历表本实例是使用HTML表格标签制作一份个人简历表。该页面主要由表格的基本标签<table>标签、<tr>标签、<td>标签以及<caption>标签构成，个人简历表格页面结构简图如图所示。3.2添加表格3.2.6案例—个人简历表代码实现<body><table><caption>个人简历</caption>

<tr>

<tdclass="stuff">姓名</td><td></td>

<tdcolspan="2"rowspan="3"width="136">照片</td></tr><trheight="90"><tdclass="stuff">个人特长与爱好</td><tdcolspan="7"></td></tr>

</table></body>主体代码

例3.63.2添加表格3.2.6案例—个人简历表代码实现<style>

/*为整个表格和单元格设置边框宽度、框线样式和边框颜色*/table,td{

border:1pxsolid#aaa;}table{width:702px;/*设置表格宽度*/

border-collapse:collapse;/*为表格

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

温馨提示

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

网页设计基础与实战课件

文档简介

温馨提示

最新文档

评论

网页设计基础与实战课件

文档简介

温馨提示

最新文档

评论

相关文档