工信版（中职）Web前端设计基础 项目九-3电子课件.pptx

《工信版（中职）Web前端设计基础 项目九-3电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）Web前端设计基础 项目九-3电子课件.pptx（23页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF（中职）Web前端设计基础 项目九-3电子课件CSS 3修饰表格表单项目九授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练三 项目实施结合前面学习的知识，用CSS修饰一个用于发送邮件的表单页面，如图所示。bodybackground-color:#9ccede;tablebackground-color:#add6e7;border-spacing:20px 16px;border-radius:20px 10px 10px 20px;input,textarealine-height:25px;width:220p

2、x;border:none;padding-left:5px;color:#636363;三 项目实施打开Sublime编辑器，新建一个文件，保存文件名为“9-6.html”。第一步第二步Head标签内的CSS代码输入如下：设置了整个网页body的背景颜色，值为#9ccede。设置了input元素（文本框、按钮）和textarea（文本域）的样式：文本行高为25像素；元素宽度为220px；元素边框为无，因为大部分表单元素有默认的边框，所以要根据需要去掉默认边框；元素的内左边距为5像素，所以当在表单中输入内容的时候，文字与边框的距离为5像素；文本颜色为#636363。设置了表格table的样式：

3、背景颜色为#add6e7；单元格间距为水平20像素及垂直16像素；四个圆角边框，圆角半径依次是：左上角20像素、右上角10像素、右下角10像素、左下角20像素。bletter-spacing:2px;font-size:16px;td.mailcolor:#52737f;background-image:url(images/xinfeng.png);background-repeat:no-repeat;background-position:0px 25px;input.btnwidth:87px;line-height:37px;border-radius:20px;background

4、-color:#8cbdce;border:solid 4px#ffffff;三 项目实施第二步设置了“联系我们“四个字的样式。文字之间的距离为2像素；文字大小为16像素。设置了按钮的样式。宽度为87像素；文字行高为37像素；圆角半径为20像素；背景颜色为#8cbdce；边框为4像素的白色实线。设置了mail（“联系我们”所在的单元格）的样式。文字颜色为#52737f；背景图片为mail.png；背景图片的重复方式为不重复；背景图片的位置为水平方向0像素、垂直方向25像素。三 项目实施第三步在body标签中，先插入form表单，再在form表单中插入表格，在表格中填写各表单元素。联系我们三 项

5、目实施再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步四 项目拓展用CSS修饰一个后台的表格页面，效果如图所示。四 项目拓展新建html网页文件，保存文件名为“9-7.html”。第一步第二步Head标签内的CSS代码输入如下：#toppadding:15px;font-size:14px;background-image:url(images/header-bg.png);background-repeat:repeat-x;border-radius:5px;color:#ffffff;#body-panelbackground-color:

6、#f8f8f8;margin:0 4px;border:1px solid#bcbcbc;border-top:0;.table1background-color:#f5f5f5;background-image:url(images/toolbar.png);background-repeat:repeat-x;border-spacing:0;设置了ID名为“top”的div块样式。内边距为15像素；字体大小为14像素；背景图片为header-bg.png；背景图片的重复方式为水平方向重复；圆角半径为5像素；文字颜色为白色。设置了ID名为“body-panel”的div块样式。背景颜色为#

7、f8f8f8；外边距为垂直方向0像素、水平方向4像素；边框为#bcbcbc颜色的1像素实线；上边框为0像素。设置了第一个表格table1的样式。背景颜色为#f5f5f5；背景图片为toolbar.png；背景图片的重复方式为水平方向平铺；单元格间距为0。四 项目拓展第二步.table1 tr tdborder-right:1px solid#d0d0d0;.table1 tr td apadding:8px 30px 8px 40px;color:#666666;text-decoration:none;display:block;.accept,.delete,.print,.refresh

8、,.updatebackground:no-repeat 20px 10px;.acceptbackground-image:url(images/accept.png);.deletebackground-image:url(images/cross.png);.printbackground-image:url(images/printer.png);.refreshbackground-image:url(images/arrow_refresh.png);.updatebackground-image:url(images/pencil.png);.table2width:100%;b

9、order-top:1px solid#d0d0d0;border-collapse:collapse;border-spacing:0px;设置了table1中的单元格右边框为#d0d0d0颜色的1像素实线型。设置了table1中几个超链接的背景图片为不重复，并且位置为水平方向20像素、垂直方向10像素。设置了table1中的超链接样式。设置了内边距，文字颜色#666666，下划线为无，显示方式为块。分别设置了table1中的每个超链接的背景图片。设置了第二个表格table2的样式。表格宽度为100%；表格边框为#d0d0d0颜色的1像素实线；表格边框合并显示；单元格间距为0。四 项目拓展第

10、二步.table2 thead thline-height:30px;background-color:#f5f5f5;background-image:url(images/table-header.png);background-repeat:repeat-x;background-position:left bottom;border:solid 2px#dddddd;text-align:center;.table2 tbody tdline-height:30px;border:solid 2px#dddddd;text-align:center;.table2.gradeCback

11、ground-color:#f2f2f2;设置了第二个表格table2标题行单元格的样式。行高为30像素；背景颜色为#f5f5f5；背景图片为table-header.png；背景图片的重复方式为水平方向重复；背景图片位置为水平方向居左、垂直方向在底部；单元格边框为#dddddd颜色的2像素实线；文本对齐方式为居中对齐。设置table2主体部分单元格的样式。文本行高为30像素；单元格边框为#dddddd颜色的2像素实线；单元格文本居中对齐。设置偶数行的背景颜色为#f2f2f2。四 项目拓展第三步后台页面提交删除打印修改更新body标签内的HTML代码输入如下：创建了一个1行5列的表格table

12、1，每个单元格内创建一个超链接。创建了一个ID名为“top”的div块，用于显示标题，标题以加粗形式显示。创建另一个ID名为“body-panel”的div块，用于显示两个表格。四 项目拓展第三步是否质检产品名称产品编号出库数量采购单价出库日期panel面板201803080015003002016-05-06创建表格的标题行。创建表格的主体部分。四 项目拓展第三步panel面板201803080015003002016-05-06panel面板201803080015003002016-05-06创建表格的主体部分。四 项目拓展第三步panel面板201803080015003002016-

13、05-06panel面板201803080015003002016-05-06创建表格的主体部分。四 项目拓展再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步五 项目小结本项目通过项目实施和项目拓展只做了表单页面和表格页面，学习了CSS如何设置背景和边框，如何修饰表格和表单等元素，让网页更加美观。五 项目小结本项目知识点总结如表所示。属性属性属性值属性值说明说明background-color背景颜色background-imagenone|url(url)背景图片background-repeatrepeat|repeat-x|repeat-y

14、|no-reapeat背景图片重复background-attachmentscroll|fixed背景图片随文字滚动background-position|top|center|bottom|left|right背景图片位置background-size|cover|contain背景图片大小background-originborder|padding|content背景图片的起始点background-clipborder-box|padding-box|content-box背景图片绘制区域border边框属性border-stylenone|dotted|dashed|solid|d

15、oubled|groove|ridge|inset|outset边框样式五 项目小结本项目知识点总结如表所示。属性属性属性值属性值说明说明border-color边框颜色border-widthmediumthinthinklength边框宽度border-radiusnone|1,4/1,4;边框圆角box-shadowh-shadow|v-shadow|blur|spread|color|inset边框阴影border-imageborder-image-source图片边框border-image-sliceborder-image-widthborder-image-outsetbor

16、der-image-repeatborder-collapseseparate|collapse|inherit表格边框是否折叠border-spacinglengthlength单元格边框的距离caption-sidetop|bottom|inherit表格标题的位置empty-cellshide|show|inherit是否显示空白单元格table-layoutautomatic|fixed|inherit单元格是否自动适应内容六 技能训练通过测试练习环节，对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。在浏览器中打开素材中的Exercise9.html文件，单击“开始测试按钮”，在文本框输入上面的单词，输入完成后，单击“结束/计算速度”按钮即可显示所用时间、错误数量和输入速度等信息。作业一、上机实训1.上机完成项目实施中发送邮件表单页面的实例操作。2.上机完成项目拓展中CSS装饰表格的实例操作。二、技能训练对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。End