【Web开发及人机交互导论】表单

Alex_Shen
2021-05-17 / 0 评论 / 0 点赞 / 82 阅读 / 1,149 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-06,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

代码:Github仓库地址

一、实验目的

  1. 理解表单的概念,熟练掌握表单创建方法。
  2. 掌握表单相关属性设置。
  3. 掌握表单输入、多行输入、列表框等对象属性的设置。
  4. 学会使用域和域标题来分组表单元素。
  5. 学会设计用户登录、用户注册、网上调查问卷等类似页面。

二、实验环境

Windows10
HBuilderX

三、实验步骤

项目1 留言板设计——“中国科学技术协会科技工作者建言”

  1. 根据排版要求首先编写HTML5文字部分
    在这里插入图片描述

注意:在div2中第一行,倒数第二行添加属性colspan=“2”,设置为一行一格

  1. 添加实验手册中提供的css样式
    在这里插入图片描述

对照目标样例,寻找需要优化部分

  1. 留言板处标题未居中
  2. 表单中文字颜色错误
  3. 文字无缩进
  4. 最后注意事项未居中
  5. 提交清空按键位置未剧中
  1. 添加新的CSS属性

问题1:添加属性align=“center”;
问题2:添加class=”td4”,

.td4 {
			line-height: 22px;
			font-size: 15px;
			color: #ff0000;
			width: 100px;
			font-weight: normal;
			}

问题3: 添加内嵌CSS:style=“text-indent: 2em; color: #5555ff;”
问题4: 添加属性align=“center”;
问题5: 使用相对位置属性,分别向右向左调整。style=“position: relative;right: 280px;”

  1. 根据显示效果,更改细节(字体大小及间距等…)
    在这里插入图片描述

项目2 大学生暑期社会实践调查问卷

  1. 根据排版要求首先编写HTML5文字部分
    在这里插入图片描述

  2. 添加实验手册中提供的css样式

对照目标样例,寻找需要优化部分

  1. 介绍语部分文字颜色错误,第二段未缩进
  2. 第八段标题位置错误
  3. 提交/清空按钮位置未居中
  4. 版权声明未居中,颜色错误
    在这里插入图片描述
  1. 添加新的CSS属性

问题1:添加属性 style=" color:#0c49cc;text-indent: 2em;"
问题2:添加属性 style=“float: left;” 左浮动
问题3:使用相对位置属性,分别向右向左调整。style=“position: relative;left: 580px;”
问题4: 添加属性 style=“color: #0000FF;text-align: center;”

  1. 根据显示效果,更改细节(字体大小及间距等…)
    在这里插入图片描述

四、结果与分析

项目1 留言板设计——“中国科学技术协会科技工作者建言”
在这里插入图片描述

项目2 大学生暑期社会实践调查问卷
在这里插入图片描述

问题分析:

两个项目都遇到了将提交,清空按钮居中的问题。
其中第二个项目的大框架宽度是100%,利用position:relative设置相对位置,会使得页面由于不同显示器/浏览器的宽度而导致按钮未必一定位于中央,所以解决方案是将大框架的宽度设置为固定值1400px,从而使按钮位于大框架相对中央,解决不同显示器/浏览器而导致的问题。

0

评论区