高二下北京理工大学出版社移动Web前端开发课件第5章 表格与表单
2023-01-09
|
34页
|
47人阅读
|
0人下载
普通
内容正文：
本章简介：
第5章 表格与表单
随着Div+CSS技术的发展，表格的网页布局地位被替代，但当想要排列数据信息时，表格仍然是最好的选择。而想要完成交互功能则离不开表单，打开电子邮箱时需要填写邮箱和密码，用户注册时需要填写基本信息等，都属于表单应用的例子。
课堂学习目标
掌握表格标签
使用CSS美化表格
理解表单的工作原理
掌握表单标签的基本格式
使用CSS美化表单
掌握<input>标签的用法
5.2 【案例1】表格table
案例分析——制成“西游电影” 表
实现步骤
知识点讲解——表格知识
案例练习
5.1.1 案例分析——制作“西游电影”表
本案例需要制作一张“西游电影”上映时间表，使用表格规划数据，使用CSS样式美化表格显示效果。如图5-1所示。
1．需求分析
根据最终效果，对案例进行分析，通过以下几个方面实现：
（1）HTML部分：表格元素，表格标题、行、单元格。
（2）CSS部分：表格进行样式设置。
2．设计思路
（1）设计表格显示区域。根据分析，需要完成5行四列表格制作，其中第一行为表格标题。
（2）利用CSS美化页面。表格标题内容加粗居中，背景颜色#25CE17，表格主要内容隔行变色。第一列和第二列的列宽为30%，各行高度为40像素。
5.1.2 实现步骤
1．HTML部分
新建xydy.html文件，编写代码，实现5行四列表格。同时设置table元素的
id属性，td元素的class属性。代码如下：
5.1.2 实现步骤
图2.2 项目菜单
<!DOCTYPE html>
<html>
<head>…</head>
<body>
<section id="main">
<table id="dy">
<caption>西游电影</caption>
<tr><th class="a_c w30p">上映日期</th><th class="a_c w30p">片名</th><th>类型</th><th>导演</th></tr>
<tr><td>2013年02月10日</td><td>《西游降魔篇》</td><td>喜剧、奇幻、冒险</td><td>周星驰,郭子健</td></tr>
<tr><td>2017年1月28日</td><td>《西游伏妖篇》</td><td>古装、魔幻、动作、喜剧</td><td>徐克</td></tr>
<tr><td>2015年07月10日</td><td>《西游记之大圣归来》</td><td>神话、动画</td><td>田晓鹏</td></tr>
<tr><td>2014年1月31日</td><td>《西游记之大闹天宫》</td><td>剧情、动作、神话</td><td>郑保瑞</td></tr>
</table>
</section>
</body>
</html>
2．CSS部分
新建样式文件xydy.css文件，完成表格样式设置，代码如下：
#dy{width:100%;text-align:center;}
caption{font-size:50px;font-family:"微软雅黑";olor:#090;}
td,th{border:1px solid #e7e7e7;height:40px;}
th{font-size:20px;font-family:"微软雅黑";background:#25CE17;}
tr:nth-child(odd){background:#B6FEAD;}
table{border-collapse:collapse;}
.a_c{text-align:center;}
.w30p{width:30%;}
2．CSS部分
新建样式文件xydy.css文件，完成表格样式设置，代码如下：
Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
5.1.3知识点讲解——表格知识
表格的用途很广，它可以将文本和图像能够按行、列排列，这样更有利于表达信息。可以用来显示数据也可以搭建网页的结构。
1．表格要素
1）表格构成三个基本要素
最简单的表格仅包括行和单元格。构成表格的三个基本要素包括：
（1）table标签：表格的范围，外框；用来定义表格，表格的其他元素包含在table标签里面。
（2）tr标签：表格的行
（3）td标
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。