web前端开发技术实验报告 实验五
更新时间:2023-05-02 20:38:01 阅读量: 实用文档 文档下载
长春大学
20 15 —2016学年第二学期Web前端开发技术课程
实验报告
学院:计算机科学技术专业:软件工程
班级:软件14402
学号:041440210
姓名:王悦
任课教师:车娜
精选文档
实验五 HTML表单
一、实验目的
1.理解表单的构成,可以快速创建表单。
2.掌握表单相关标记,能够创建具有相应功能的表单控件。
3.掌握表单样式的控制,能够美化表单界面。
二、内容及要求
使用表单控件,并通过CSS控制表单样式制作一个学员档案,其效果如图6-1所示,满足以下要求:
1.学员档案上面的标题和下面的表单两部分构成。
2.标题部分通过标题标记定义。
3.表单部分通过相关的表单控件进行定义
图6-1 “学员档案”CSS样式效果
三、实验原理
表单:是网页上用于输入信息的区域,它的主要功能是收集用户信息,并将这些信息传递给后台服务器,实现网页与用户的沟通。表单由表单控件、提示信息和表单域构成。
创建表单:标记被用于创建一个表单,action、method、name 为表单标记
效果如图6-2所示。
图6-2 HTML页面结构效果图
2.定义CSS样式
关键代码如下:
body{font-size:12px; font-family:"微软雅黑"}
body,h2,form,img,input,select,textarea{padding:0; margin:0;
— 5
精选文档
list-style:none; border:0;}
.all{ width:1024px; height:863px; margin:0 auto;
background:url(bg.png) no-repeat;}
.list{width:685px; padding:180px 0 0 340px;}
p{margin-top:20px;}
h2{font-size:38px; color:#26211e; margin-bottom:60px;
padding-left:50px;}
.txt,.age{width:360px; height:30px; line-height:30px;
padding-left:40px; color:#ccc;}
.txt{background:#fff url(icon2.png) no-repeat 5px 5px;}
.age{background:#fff url(icon3.png) no-repeat 5px 5px;}
.choose{width:390px; height:25px; line-height:25px;
background-color:#FFF; padding:5px 0 0 10px;}
.course,.money{width:190px; height:25px; padding-left:10px;}
.money{color:#ddd;}
.money_box span{font-size:18px; font-weight:bold; color:#fff;}
.message{width:390px; height:80px; padding:5px 0 0 10px;
font-size:12px; color:#ccc;}
.btn{width:390px; height:30px; background-color:#eb6854;
color:#FFF; font-weight:bold;}
效果如图6-3所示。
图6-3 “学员档案”CSS样式效果
— 6
精选文档
六、实验总结
1.掌握了盒子模型相关属性,能够使用他们熟练的控制网页元素。
2.理解了块元素与行内元素的区别,能够对他们进行转换。
3.知道如何运用
—7
正在阅读:
web前端开发技术实验报告 实验五05-02
2015-2016学年四川省内江市高二(下)期末数学试卷(理科) 解析04-01
2004年高考天津卷理科数学试题及答案05-03
六一儿童节节目串词02-07
英语音标单词举例10-24
机械电子工程- 申请新增学士学位授予 专业简况表 - 图文06-23
八年级上册生物教学反思06-10
- 教学能力大赛决赛获奖-教学实施报告-(完整图文版)
- 互联网+数据中心行业分析报告
- 2017上海杨浦区高三一模数学试题及答案
- 招商部差旅接待管理制度(4-25)
- 学生游玩安全注意事项
- 学生信息管理系统(文档模板供参考)
- 叉车门架有限元分析及系统设计
- 2014帮助残疾人志愿者服务情况记录
- 叶绿体中色素的提取和分离实验
- 中国食物成分表2020年最新权威完整改进版
- 推动国土资源领域生态文明建设
- 给水管道冲洗和消毒记录
- 计算机软件专业自我评价
- 高中数学必修1-5知识点归纳
- 2018-2022年中国第五代移动通信技术(5G)产业深度分析及发展前景研究报告发展趋势(目录)
- 生产车间巡查制度
- 2018版中国光热发电行业深度研究报告目录
- (通用)2019年中考数学总复习 第一章 第四节 数的开方与二次根式课件
- 2017_2018学年高中语文第二单元第4课说数课件粤教版
- 上市新药Lumateperone(卢美哌隆)合成检索总结报告
- 实验
- 前端
- 开发技术
- 报告
- web
- 推荐--小学六年级英语上册集体备课.doc
- c语言复习题及参考答案
- 创新创业计划书18447
- 校园环境建设工作计划
- ICL7650_CMOS斩波集成运放简介及应用
- 班主任工作常识试题及答案
- Photoshop图形图像处理案例教程教案
- 《登高》杜甫赏析习题及答案【部编版高一必修上册】
- 中央银行学题库(附答案)9
- 工程质量保修书范本77596
- 美国音乐版权司法中合理使用原则的发展(1970-2010)
- 2019年成人高考专升本政治真题及答案
- 党建电视专题片解说词:拥抱富裕
- 浅析面料质地与外观对服装设计的影响
- “小学语文作业设计的创新研究”课题开题报告
- 五河县张瑞瑞口腔诊所企业信息报告-天眼查
- 工程项目投资与融资_考试题
- (完整word版)高中英语外研版必修五单词表
- 中考数学复习第1部分第六章圆第一节圆的有关概念和性质检测.doc
- 精品文档 (157)《谈中国诗》教学设计