任务5：综合案例教学课件_第1页
任务5：综合案例教学课件_第2页
任务5：综合案例教学课件_第3页
任务5：综合案例教学课件_第4页
任务5：综合案例教学课件_第5页
已阅读5页，还剩22页未读， 继续免费阅读

下载本文档

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

文档简介

Web前端开发技术授课教师：杨建兴项目七：表格和表单任务5综合案例掌握表格的组成，并能够熟练创建表格能够应用CSS控制表格的显示样式掌握表单的构成，并能熟练创建表单能够应用CSS控制表单的显示样式目标/TARGET01030204目标项目描述：请应用表格和表单，制作一个新员工信息登记的网页，其效果如右图所示。综合案例：新员工信息登记网页制作应用HTML的表格和表单，完成新员工信息登记网页制作任务主要知识点表格以及表格组成元素表单以及表单组成元素CSS控制表格CSS控制表单form表单纵向th标签textarea控件caption标签装饰用的插入图片submit类型input控件select控件单行文本输入框radio类型input控件checkbox类型input控件table表格网页所用背景颜色colspan属性跨列制作基础页面步骤1：<head><metacharset="utf-8"><title>新员工信息登记表</title><linktype="text/css"rel="stylesheet"href="css/info.css"></head>制作基础页面步骤1：<formclass="employee_form"action="#"method="post">......</form><table><caption>新员工信息登记表</caption><tr><th>姓名</th><td><inputtype="text"name="username"required/></td></tr><tr>.......</tr></table>

制作基础页面步骤1：<table><tr><th>性别</th><td><inputtype="radio"name="gender"value="male"checked="checked"/>男<inputtype="radio"name="gender"value="female"/>女</td></tr>......</table>

制作基础页面步骤1：<table><tr><th>手机</th><td><inputtype="text"name="mobile"required/></td></tr><tr><th>邮箱</th><td><inputtype="text"name="email"required/></td></tr>......</table>

制作基础页面步骤1：<table>......<tr><th>爱好</th><td><inputtype="checkbox"name="hobby[]"value="film"/>看电影<inputtype="checkbox"name="hobby[]"value="music"checked="checked"/>听音乐<inputtype="checkbox"name="hobby[]"value="travel"checked="checked"/>旅游<inputtype="checkbox"name="hobby[]"value="sport"/>运动</td></tr>......</table>

制作基础页面步骤1：<table>......<tr><th>住址</th><td><inputtype="text"name="address"required/></td></tr>......</table>

制作基础页面步骤1：<table>......<tr><th>部门</th><td><select><optionname="department"selected="selected"value="rd">----------研发部----------</option><optionname="department"value="office">办公室</option><optionname="department"value="sales">销售部</option><optionname="department"value="marketing">市场部</option></select></td></tr>......</table>

制作基础页面步骤1：<table>......<tr><th>备注</th><td><textareaname="notes"cols="3"rows="5"></textarea></td></tr><tr><td><buttonclass="submit"type="reset">重置</button><buttonclass="submit"type="submit">提交</button></td></tr>......</table>

使用css控制表单步骤2：

body{background-color:beige;}.employee_form{position:absolute;/*绝对定位*/top:20%;left:45%;background-color:lightblue;}使用css控制表格步骤4：

table{border-collapse:collapse;}table,td,th{border:1pxsolidblack;}控制表单步骤3：

table{border-collapse:collapse;}table,td,th{border:1pxsolidblack;}

<tr><tdcolspan="2"><buttonclass="submit"type="reset">重置</button><buttonclass="submit"type="submit">提交</button></td></tr>使用css控制表格步骤4：

.common{display:inline-block;text-align:center;border:0px;border-color:#000000;}使用css控制表格步骤4：.commontr,.commontd{height:50px;}.commonth{width:70px;}.commonselect{height:25px;}.commoninput{padding:5px8px;display:inline-block;text-align:center;}.commontextarea{padding:8px;width:260px;}使用css控制表格步骤4：.commoninput,.commontextarea{background:#fffurl(../images/attention.png)no-repeat98%center;border:1pxsolid#aaa;box-shadow:0px0px3px#ccc,010px15px#eeeinset;border-radius:2px;transition:padding.25s;}使用css控制表格步骤4：.commoninput:focus,.commontextarea:focus{background:#fff;border:5pxsolidlightblue;box-shadow:003px#aaa;padding-right:70px;}使用css控制表格步骤4：button.submit{background-color:#68b12f;color:white;font-weight:bold;/*粗体*/padding:6px20px;/*内边距*/}button.submit:hover{opacity:.65;cursor:pointer;color:black;}button.submit:active{border:1pxsolid#20911e;box-shadow:0010px5px#356b0binset;}使用css控制表格步骤4：<caption>新员工信息登记表</caption><caption><h2>新员工信息登记表</h2></caption>使用css控制表格

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

温馨提示

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

最新文档

评论

0/150

提交评论