《Web前端开发》教学讲义 Web前端设计基础 项目九

教学课题项目9css3修饰表格表单一9.3项目实施9.4项目拓展

授课班级授课时间

1.掌握CSS美化背景；

2.掌握CSS美化边框；

知识目标

3.掌握CSS设置边框圆角效果；

4.掌握CSS美化表格表单。

教学目标

1.培养学生自主学习、分析问题和解决问题的能力；

能力目标

2.培养学生熟练运用所学知识的能力。

1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；

德育目标

2.培养学生的团队合作精神。

通过前面知识的学习，已经掌握了CSS3的各类选择器的应用，掌

握了CSS3美化文本、段落和图片的方法以及CSS3美化超链接和项目

列表，掌握了。

学情分析任何一个页面都有不同的背景和基调，而对于单个元素，边框效果

随处可见，表格和表单也是网页中最常见的元素，想要使网页页面达到

整齐美观的视觉效果，就需要用CSS来进行美化。本项目学习使用CSS

修饰表格表单，并掌握CSS美化边框、美化背景的方法。

1.CSS美化背景；

2.CSS美化边框；

教学重点

3.CSS设置边框圆角效果；

4.CSS美化表格表单。

1.CSS设置边框圆角效果；

教学难点

2.CSS美化表格表单。

教学方法项目教学法、多媒体辅助教学法、讲练结合法

教学过程

教学环节教学内容师生活动

教师提出问题，学

给学生展示网页页面，通过网页中表单页面和一个后台

新课导入生可分组讨论，协作探

的表格页面，导入本节课的内容。

究。

一、项目实施

结合前面学习的知识，用CSS修饰一个用于发送邮件的

表单页面，如图所示。

教师操作演示，学

技能学习

诲生观看、实训。必要时

要求一个具有典型特

质的学生与老师互动，

共同完成操作任务，借

此查看教学效果。

血|打开Sublime编辑器,新建一个文件，保存文件

名为)-6.hlml”。

!输入【！】或者(html:5],按Tab键，会自动完

成h(ml基二本代码填充，更改head标签中的litlc标签的内容

为“CSS他务饰邮件表单”。

|在body标签中，先插入form表单，再在form

表单中』帝”、表格，在表格中填写各表单元素。

1<fbrnimethod="post"action="">

2<tablewidth=,'380px">

3<tr>

4<tdclass="niail"width="80px"rov/span="6"

valign="top">

5<b>联系我们v/b>

6</td>

7<td><inputtypc="(ext"value="姓名"x/td>

8</tr>教师操作演示，学

9<tr>生观看、实训。必要时

10<tdxinputtype="(cxt"value="邮箱地址要求一个具有典型特

11</tr>质的学生.与老师互动，

12<tr>共同完成操作任务，借

13<td><inputlype="exi"value="IM站地址此杳看教学效果。

14</tr>

15<tr>

16<td><tcxtarcarows="4"valuc="信息内容

"></textarea></td>

17</tr>

18<tr>

19<tdxinpu(class="btn"type="submit,'name=""

value="submit"></td>

20</tr>

21<tr>

22<tdheight=*'20px"></td>

23</tr>

24</table>

25</fonn>

SfflE在head标签中创建样式，插入<style></slyle>,

在其中设置各部分样式，代码如卜.：

1<style>

2body{

3background-color:#9ccede;

4)

5tablet

6background-color:#add6e7;

7border-spacing:20pxI6px;

8border-radius:20pxlOpxlOpx20px;

9)

10input,textarea{

IIline-height:25px;

12width:220px;

13border:none;

14padcing-lcft:5px;

15color:#636363;

16}教师操作演示「学

17b(生观看、实训。必要时

18letter-spacing:2px;要求一个具有典型特

19font-size:I6px;质的学生与老师互动，

20)共同完成操作任务，借

21td.mail{此查看教学效果。

22color:#52737f;

23background-image:url(imagcs/mail.png);

24background-repeat:no-repeat;

25background-position:Opx25px;

26)

27input.bin|

28width:87px;

29line-height:37px;

30border-radius:20px;

31background-color:#8cbdce;

32border:solid4px

33)

34</style>

二、项目拓展

用CSS修饰一个后台的表格页面，效果如图所示。

|SlepOII新建html网页文件,保存文件名为“交

:修改Ulle标签内容为“CSS装饰表格”。

Step03|在body中输入代码如下：

1<divid="top">

2vb>后台页面v/b>

3</div>

4vdivid=body-panel>

5<tableclass="table1">

6<tr>

7<td><ahref="#"class="accept'>提交

</a></td>

8<tdxahref="#"class="delete'>删除

</a></td>

9<td><ahref="#"class="print">打印

</a></td>

10<td><ahref="#"class="refresh">修改

</ax/td>

11<td><ahref="#"class="update">更新

</a></td>

12</tr>

13<tablc>

14<tabieclass=',table2">

15<thead>

16<tr>

17vth>是否质检</th>

18vth>产品名称</th>

19<ih)产品编号

20<th>出库数量</lh>

21vih>采购单价</th>

22<lh>出库日期</th>

23</tr>

24</thead>

25<tbody>

26<tr>

27<td><inputtype="checkbox'7></td>

28<td>panel面板v/td>

29<td>2018030800l</td>

30<td>500</td>

31<tdclass=,,cen(er">300</td>

32<ldclass="center">2016-05-06</td>

33</tr>

34<trclass="gradcC">

35<td><inputtype="checkbox"/></td>

36<td>panel面板</td>

37<td>2018030800l</(d>

38<td>500</td>

39<tdclass="center">300</td>

40<tdclass="cen(er">2016-05-06<td>

41</tr>

42<tr>

43<td><inputtypc="chcckbox"/></td>

44<td>panel面板</td>

45<td>2018030800l</(d>

46<td>500</td>

47<tdclass="center">300</td>

48<tdclass="center">2016-05-06</td>

49</tr>

50<trclass="gradeC">

51<td><inputtype="chcckbox,7x/td>

52<td>panel面板v/td>

53<td>2018()308(X)l</td>

54<td>500</td>

55<tdclass="center">300</td>

56<tdclass="cen(er">20l6-05-06</td>

57</tr>

58<tr>

59<td><inputtype="checkbox,7x/td>

60<ld>pancl面板</id>

61<td>201803080()l</td>

62<td>500</td>

63<idclass=',ccnicr'>300</id>

64<tdclass="center">2016-05-06</td>

65</tr>

66</tbody>

67</table>

68</div>

在head中输入样式代码如下：

1<stylc>

2#top(

3padcing:15px;

4font-size:I4px;

5background-image:url(images/header-bg.png);

6background-repeat:repeat-x;

7border-radius:5px;

8color:#ffffff;

9)

10#body-panel!

11background-color:#f8f8f8;

12margin:04px;

13border:1pxsolid#bcbcbc;

14border-top:0;

15}

16.tableI{

17background-color:#f5f5f5;

18background-image:url(images/toolbar.png);

19background-repeat:repeat-x;

20border-spacing:0;

21)

22.table1trtd{border-right:Ipxsolid

23.table1trtda{

24padcing:8px30px8px40px;

25color:#666666;

26text-decoration:none;

27display:block;

28}

29

.accept,.delete..print..refresh,.update{background:no-repeat

20pxlOpx;}

30.accept{background-image:url(imagcs/acccp(.png);}

31.delete{background-image:url(images/cross.png);}

32.print{background-image:url(iniagesZprinter.png);)

33.refresh{background-image:

Liil(images/arrow_refresh.png);J

34.update{background-image:url(images/penciLpng)：}

35.iablc21

36width:100%;

37border-top:Ipxsolid#d0d0d0;

38border-collapse:collapse;

39border-spacing:Opx;

40}

41.table2theadth(

42line由eight:30px;

43background-color:#f5f5f5;

44background-image:url(images/table-header.png);

45background-repeat:repeat-x;

46background-position:leftbottom;

47bo