W前端技术基础开发概述7_第1页
W前端技术基础开发概述7_第2页
W前端技术基础开发概述7_第3页
W前端技术基础开发概述7_第4页
W前端技术基础开发概述7_第5页
已阅读5页，还剩56页未读， 继续免费阅读

下载本文档

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

文档简介

Web前端开发技术基础通关任务1 制作登录页面AIGC赋能版任务5登录页面和用户注册页面制作

——使用CSS设置表单样式📑目录01.任务描述02.任务目标03.任务实施任务描述登录页面是指用户需要通过输入账号和密码来进行身份验证的页面。它的主要作用是控制用户权限，记录用户行为，同时也有助于保护操作的安全性。任务描述任务目标1.掌握表单的基础结构。2.掌握表单的基础控件。3.掌握表单的CSS样式设置方法。4.能够利用表单制作网站登录界面。图3-5-1任务效果图任务实施——结构分析任务实施——构建HTML结构（1）创建站点并保存网页图2-1-3

HTML

页面基础结构代码1）运行HBuilderX软件，选择“文件”→“新建”→“项目”命令，在弹出的对话框中选择“普通项目”，将项目名称命名为“chapter3-5”，单击“浏览”按钮，选择存放路径，勾选“基本HTML项目”，单击“创建”按钮新建项目。2）将项目中的“index.html”文件重命名为“example01.html”。3）打开example01.html文件，在<title></title>标签对中输入标题文字“登录页面”。4）将图片素材“username.png”和“password.png”放入项目的img文件夹中。（

2）创建HTML结构任务实施——构建HTML结构1）在<body></body>标签对中输入<form></form>标签对来制作登录表单，设置其class类名为“loginbox”。2）在<form></form>标签对中添加3个<div></div>标签对。3）制作用户名输入框。在第一个<div></div>标签对中添加1个<span></span>标签对，并在标签对中输入文字“用户名：”，在<span></span>标签对后添加1个<input>标签，设置type属性为“text”、name属性为“username”、class为“user”。4）制作密码输入框。在第二个<div></div>标签对中添加1个<span></span>标签对，并在标签对中输入文字“密码：”，在<span></span>标签对后添加1个<input>标签，设置type属性为“password”、name属性为“password”、class为“pwd”。5）制作登录和取消按钮容器。在第三个<div></div>标签对中添加2个<input>标签，第一个<input>标签设置type属性为“submit”、value属性为“登录”、class类名为“btn1”，第二个<input>标签设置type属性为“reset”、value属性为“取消”、class类名为“btn2”。（

2）创建HTML结构图3-5-3登录页面HTML代码结构及效果任务实施——构建HTML结构（

1）登录表单设置任务实施——CSS样式分析1）登录表单页面居中，宽度为500px，高度为200px，上下外边距为60px，上内边距为30px，背景颜色为暗红色（#c40001），边框圆角半径为20px，盒子阴影的水平偏移量为10px、垂直偏移量为10px、模糊半径为10px、浅灰色（#bcbcbc）。2）div盒子内容水平居中，上外边距为18px。3）设置提示文字为行内块元素，宽度为100px，文字大小为20px，字体颜色为白色，文字水平右对齐。（2）“用户名”和“密码”输入框样式设置任务实施——CSS样式分析“用户名”输入框和“密码”输入框宽度为150px，高度为35px，圆角半径为5px，上右下左内边距为5px、2px、5px、40px，边框为1px的白色实线，文字大小为30px，背景颜色为白色，背景图片不平铺，距离左边5px，居中。（3）“登录”和“取消”按钮样式设置任务实施——CSS样式分析“登录”和“取消”按钮宽度为80px，高度为30px，文字大小为18px，边框为2px的浅灰色（#cccccc）实线，边框圆角半径为3px，左外边距为10px，“登录”按钮的背景颜色为淡蓝色（#3bb7ea），“取消”按钮背景颜色为淡橙色（#fb8c16）。（1）设置表单<form>标签样式任务实施——CSS样式添加图3-5-5设置表单<form>标签样式后的效果（2）设置表单<form>中<div>盒子、提示文字的样式任务实施——CSS样式添加图3-5-6设置<form>表单样式后的效果<span>标签默认情况下为行内元素，行内元素的宽度和高度由其内容的大小决定，宽度width和高度height样式属性对行内元素是无效的。上面代码中的“display:inline-block;”将<span>标签转换为行内块元素后，既可以设置宽高，又可以不换行。代码解析（3）设置“用户名”输入框、置“密码”输入框的样式任务实施——CSS样式添加图3-5-7设置“用户名”和“密码”输入框样式后的效果（4）设置“登录”按钮、“取消”按钮的样式任务实施——CSS样式添加设置“登录”按钮、“取消”按钮的样式后的效果Web前端开发技术基础通关任务2 制作用户注册页面AIGC赋能版📑目录01.任务描述02.任务目标04.知识宝典03.任务实施任务描述通过注册系统，用户可以确保自己的账号得到一定程度的安全保护，防止他人冒用或非法登录。如果没有注册系统，那么任何人都可以自由地使用其他人的身份进行各种网络活动，给用户隐私带来巨大风险。任务描述任务目标1.掌握表单中<input>标签的多种类型设置。2.掌握表单的CSS样式设置方法。3.能够利用表单制作用户注册界面。图3-5-8任务效果图任务实施——结构分析用户注册页面使用<div>标签作为父容器，包括了标题和注册表单。标题使用<h2>标签。注册表单使用<form>标签。注册表单由用户名、手机号码、密码、确认密码、邮箱、性别、爱好和个人说明组成。其中，用户名、手机号码、密码、确认密码、邮箱等为输入框类型，邮箱还包括了下拉选项，性别使用单选按钮控件，爱好使用复选框控件，个人说明使用多行文本。每一个内容均使用一个<div>作为容器，包含提示文字信息、输入框和默认提示。任务实施——构建HTML结构（1）创建站点并保存网页1）在项目chapter3-5中新建.html文件，将文件命名为“example02.html”。2）打开example02.html文件，在<title></title>标签对中输入文字“用户注册”，为网页设置文档标题。（

2）创建HTML结构任务实施——构建HTML结构1）在<body></body>标签对中输入<div></div>标签对，作为制作用户注册盒子，设置其class为“regbox”。2）在类名为“regbox”的<div></div>标签对中，添加<h2></h2>标签对来制作表单标题，并在<h2></h2>标签对中输入“用户注册”。3）在<h2></h2>标签对后添加<form></form>标签对，用于制作用户注册表单，并设置表单提交方式method为“post”。（3）制作用户名、手机号码、密码、确认密码、邮箱输入框任务实施——构建HTML结构（4）制作邮箱下拉选项任务实施——构建HTML结构（4）制作邮箱下拉选项任务实施——构建HTML结构（5）制作性别、爱好、个人说明表单内容任务实施——构建HTML结构（6）制作隐私政策内容任务实施——构建HTML结构（7）制作立即注册按钮内容任务实施——构建HTML结构任务实施——CSS样式分析1）

页

面

整

体

水

平

居

中，

上

下

外

边

距为20px，宽度750px，边框为3px的暗红色（#c40001）实线。2）表单标题水平居中对齐，外边距为5px，字体颜色为暗红色（#c40001），字体大小为50px，为字体设置文本阴影。3）设置“input1”盒子中输入框提示信息的样式为行内块元素，宽度为90px，右外边距为20px，文本水平右对齐。必填符号的右外边距为4px，颜色为#c00。4）设置输入框宽度为200px，高度为27px，边框为1px的灰色（#ababab）实线，上外边距为20px，下外边距为6px，左内边距为4px，边框圆角半径为4px，设置盒子阴影。5）鼠标指针经过输入框时，输入框边框为1px的深灰色（#7b7b7b）实线。6）设置“input2”盒子中<input>标签的样式宽度为30px，高度为15px，上外边距为20px。<textarea>标签上外边距为5px。7）设置“input3”盒子样式。清除浮动，文本水平居中。8）设置“isagree”盒子样式。宽度、高度分别为14px，垂直对齐方式为下标形式。9）设置“立即注册”按钮样式。设置为块元素，宽度为120px，高度为38px，上下外边距为20px，左右外边距自动，字体粗细为700，颜色为#ffffff，背景颜色为#dc143c，不显示边框。鼠标经过时，为手指样式。（1）清除所有元素的默认内外边距任务实施——CSS样式添加（2）设置类名为“regbox”的盒子容器的样式（3）设置标题<h2>的样式任务实施——CSS样式添加（4）设置类名为“input1”盒子的样式（5）设置表单中提示文字的样式任务实施——CSS样式添加（6）设置必填符号的样式（7）设置类名为“input1”的盒子内<input>标签的样式任务实施——CSS样式添加（8）设置鼠标指针经过输入框时的样式任务实施——CSS样式添加图3-5-14用户注册界面部分CSS样式效果（9）设置类名为“input2”盒子的样式任务实施——CSS样式添加（10）设置类名为“input2”的盒子内<input>标签的样式（11）设置类名为“input2”的盒子内<textarea>标签的样式任务实施——CSS样式添加（12）设置类名为“input3”的盒子的样式（13）设置类名为“isagree”的盒子的样式任务实施——CSS样式添加（14）设置“立即注册”按钮的样式知识宝典——认识表单表单的含义表单是指通过网络接收其他用户数据的平台。例如，用户登录、用户注册、网上调查问卷等都是通过表单的形式收集信息的，并将收集的信息传递给后台服务器，实现用户与网页的“对话”。表单构成表单是一个包含表单控件的容器，表单控件允许用户在表单中使用表单域输入信息。一个完整的表单通常由表单域、提示信息和表单控件3部分构成知识宝典——认识表单表单构成1）表单域（<form>标签）：<form>标签是一个包含框，是包含表单控件的容器。2）提示信息：表单控件周围用于提示输入内容的文字。3）表单控件（<input>标签等）：用于输入用户信息的控件，如文本框、密码框、单选按钮、复选框和按钮等。知识宝典——表单标签表单标签表单标签是指<form></form>标签对，用于申明表单，定义采集数据的范围，处理和传送表单结果。<form>标签的属性并不会直接影响表单的显示效果。要想让一个表单有意义，就必须在<form>与</form>之间添加相应的表单控件。<form>标签语法定义<form

name="表单名称"action="url地址"method="提交方式"autocomplete="on|off"novalidate="true|false">

各种表单元素</form><form>标签常用属性及说明知识宝典——表单标签知识宝典——<input>标签<input>标签表单中核心的标签是<input>标签。使用<input>标签可以定义很多控件，如文本框、单选按钮、复选框、提交按钮、重置按钮等。<input>标签为单标签，type属性为其基本的属性，取值有多种，用于指定不同的控件类型。<input>标签的语法格式<inputtype="控件类型"name="控件名称"/><input>标签的type属性值及说明知识宝典——<input>标签<input>标签的其他属性、属性值及说明知识宝典——<input>标签<input>标签的其他属性、属性值及说明说明：name：定义单选按钮的名称，要保证数据的准确采集。单选按钮都是以组为单位使用的，同一组中的单选按钮都必须用同一个名称。value：定义单选按钮的值。在同一组中，它们的域值必须是不同的。知识宝典——<input>标签<input>标签的type类型举例及效果知识宝典——<input>标签<input>标签的type类型举例及效果（续）知识宝典——<input>标签知识宝典——选择标签选择标签选择标签由<select></select>和<option></option>标签对定义。<select></select>用于在表单中添加一个下拉列表框。<option></option>用于定义下拉列表中的具体选项。<select>和</select>之间至少应包含一对<option>和</option>。选择标签的基本语法格式<select><optionvalue="1"selected>第一个选项</option><optionvalue="2">第二个选项</option>...</select><select></select>与<option></option>举例及效果<select></select>与<option></option>属性及说明知识宝典——选择标签知识宝典——文本区域标签文本区域标签当定义<input>控件的type属性值为text时，可以创建一个单行文本输入框。如果需要输入大量信息，且字数没有限制，就需要使用<textarea></textarea>标签对。在<textarea>的语法格式中，cols和rows为<textarea>标签的必需属性。其中，cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，它们的取值均为正整数。各浏览器对cols和rows属性的理解不同，当对<textarea>控件应用cols和rows属性时，多行文本输入框在各浏览器中的显示效果可能会有差异。所以在实际工作中，常用的方法是使用CSS的width和height属性来定义多行文本输入框的宽、高。说明：文本内容要紧跟在<textarea>标签后面，不能换行或者有空格，否则文字效果不从文本框的第一行最左侧开始。文本区域标签的基本语法格式<textarea></textarea>标签对举例及效果<textareacols="每行中的字符数"rows="显示的行数">

文本内容</textarea>知识宝典——文本区域标签知识宝典——按钮标签按钮标签<button>标签用于创建可单击的按钮。除了定义按钮的基本外观和行为外，还可以通过各种属性和事件来定制按钮的外观和功能。<button></button>标签对之间的所有内容都是按钮的内容，其中包括任何正文内容，如文本或多媒体内容。按钮标签的基本语法格式<buttontype="button"name="..."value="...">…</button>button>标签属性及说明知识宝典——按钮标签Web前端开发技术基础晋级任务

联系我们页面制作AIGC赋能版任务要求综合应用表单标签完成红色文化资源网的联系我们页面的制作任务要求图3-5-16联系我们页面效果制作要点提示1.HTML结构操作要点2.制作红色文化调查内容3.制作在线留言、搜索内容4.制作页面尾部内容5.CSS美化操作要点任务小结序号标签常用属性描述1<form>name指定表单的名称action指定处理表单信息的服务端URLmethod设置表单数据的提交方式，其取值为get或者postautocomplete指定表单是否有自动完成功能novalidate指定在提交表单时，取消对表单进行有效性检查任务小结序号标签常用属性描述2<input>typetext：单行文本框Password：密码框radio：单选按钮checked：复选框button：普通按钮submit：提交按钮reset：重置按钮image：图像形式的提交按钮hidden：隐藏域file：文件域任务小结序号标签常用属性描述2<input>typeemail：E-mai

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

温馨提示

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

最新文档

评论

0/150

提交评论