网页没有横向滚动条_【第四课】网页里的表单

前言

从零开始学前端系列课程，与传统的视频大课堂教学不同，没有填鸭；也普通做练习题的方式不同，没有假想的模拟题。

本课程拆出80个左右必须掌握的技能点，并对其分组，从易到难地列出学习曲线。同时从真实项目中拆解出与技能一一对应的不同难度的任务，通过解决任务来巩固夯实知识。

这就是IT修真院集自适应学习、师兄辅导、在线一站式学习的DWS学习法（Learning by Doing ，Learing by Wrong ,Learning by Share），在实战中学习，在试错中学习，在分享中学习。

经过线下5年多的实践探索，通过21万多篇学习日报，实现了1500余名结业学员99%就业率的教学成果。

从零开始学前端系列课程的任务分为两大部分，从CSS到JS，每一部分大概有15个左右的任务。每个部分分为技能任务阶段和复盘任务阶段，在任务实践中完成从技能学习到项目经验的积累。

一、这次将要执行的任务

二、为什么要开始这个任务

1.这个任务需要学会什么技能，为什么要优先学习这个技能

1.1 表单元素样式：表单在网页中是必不可少的一部分，它担负起了与用户交互和采集数据的功能。而原生的表单元素样式并不美观，因此需要学习如何美化它的样式。

2.这个任务为什么要用这种方式来设计，有没有其他的可替代的练习方案

从任务3起我们已经接触过了移动端布局，但还不是真正常用的移动端页面。在任务4里，将所有网站都必然会有的一个页面——登录，抽离出来供大家练习。这个页面非常简单也非常实用，同时还能学习到一点表单内容，布局上更是对上一个任务的强化。

3.做这个任务需要哪些基础知识，需要多久才可以把基础知识完成

做这个任务并所需要了解的知识主要有：

position和fixed区别，input样式修改，button样式修改。

这些基础知识只需稍稍理解，在粗看一遍后就开始实战，在实战中又去反复学习，强化理解。比如先了解position和fixed区别，在写页面都试着用一用；然后是学习如何通过css覆盖表单input和button的原生样式，了解需要用到哪些属性才能将原生的样式覆盖完全。

4.做这个任务设置了哪些具体步骤，为什么这么设计

任务的步骤按一般实战步骤设计。虽然任务非常简单，但也是以实际项目中的标准为标准。首先布局顶部，然后是form表单内容，最后加上button用以提交表单，然后对各个部分的样式进行调整，即可完成页面。

5.做任务的时候会遇到哪些常见的错误，需要参考什么样的参考资料

我们总结了以往师兄们常常遇到的问题，如点击输入框会有蓝色边框怎么办，这个问题只需要在百度中搜索以下关键词“input蓝色边框”就可以得到答案，学会通过搜索获得答案也是特别重要的能力之一。

6.怎么样才算把这个任务完成了，验收标准为什么要这么制订

首先还是需要还原设计图，让页面一眼看上去和设计图是基本一致的；其次是改变浏览器宽度，保证页面布局不变，浏览器在横向上不会出现滚动条；然后是无论页面多长背景色都能覆盖住整个页面，而顶部的长条始终紧贴在页面最上方不会从屏幕中消失；最后是代码规范，css命名时按功能取上合适的英文。

7.整个任务需要多久才可以完成，最快的和最慢的会是多长时间

我们认为这个任务大概需要12个小时即可完成，但每个人的基础知识学习能力等情况各不相同。对这方面本来就有基础或者是学习能力特别好的好人可能只需6个小时，而初次接触这些内容对这方面不是太敏感的同学则可能要花费长大36小时的时间。时长在这些时间之内都非常正常，如果有远远超出这个时间也未能做出的同学则应该多去请教一下各位完成过任务的师兄们，也许这个时候只需要旁人稍稍提点几句就能获得突飞猛进的进步。

8.如果我在做任务的时候遇到了困难，可以跳过任务中的哪些部分？

在这一节里，如果感觉理解position和fixed区别有困难，那么可以先跳过，只要能够使用，不会太影响学习。

三、学习任务之前要先学会哪些知识点

1.定位

定位position，这个属性的目的是更改盒子与环境的位置关系。它有4种属性值：

static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative：相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。
absolute：相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）。
fixed：固定定位和绝对定位类似，但元素的基准块是viewport视窗。这种定位常用于创建在滚动屏幕上还有固定元素的地方。

relative的使用可以看如下例子：

<style>
div {display: inline-block;width: 100px;height: 100px;background-color: red;color: #fff;text-align: center;line-height: 100px;font-size: 30px;
}div:nth-child(2) {position: relative;top: 20px;left: 20px;border: 1px solid #333;
}
</style><body><div>1</div><div>2</div><div>3</div><div>4</div>
</body>

页面效果如下：

可以看出来在设置relative之后，可以对该元素设置left，right的方位的属性，并且不会影响该元素在文档流中的位置。

absolute的使用可以看如下例子：

<style media="screen">.parent {padding: 50px;background: #eee;width: 500px;height: 300px;}.child {background: #ccc;/* position: relative; */}.item {display: inline-block;width: 50px;height: 50px;background: yellow;}.item:nth-child(3) {position: absolute;background: red;left: 10px;top: 10px;}
</style><body><div class="parent"><div class="child"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div></div>
</body>

其展示效果如下：

可以看出来，absolute绝对定位会向上在祖先级元素里寻找有relative的元素，以它作为定位的基准，如果祖先级元素里都没有relative，那它会以根元素作为基准。

fixed的使用可以看如下例子：

<style media="screen">body {margin: 0;}header {position: fixed;top: 0;width: 100%;background: rgba(38, 135, 182, 0.85);text-align: center;line-height: 2.6em;color: #fff;}header > i {float: left;}footer {position: fixed;bottom: 0;width: 100%;background: rgba(65, 65, 65, 0.47);line-height: 2.6em;text-align: center;}
</style><body><header>奇妙的文章</header><footer><button>点击就送</button></footer><section>文案分工形成场景规范角色规范李晴找到位置<p>summis fabulas elit ne iis o amet quae eram id sint non ad sunt singulis ne nealiquip non appellat.</p><p>Illum probant firmissimum. Eu qui quae culpa dolore, anim ad fabulas non elit utexpetendis nulla commodo laborum eu elit deserunt des</p><p>Quamquam magna iis possumus eruditionem, litteris praetermissum an litteris.Ullamco sempitern</p><p>Et quid commodo coniunctione, proident sed tempor. Quo quamquam aut commodo quimagna sed nostrud ut export</p><p>Appellat illum excepteur ne de officia graviterque et commodo se ullamco, in namdomesticarum. </p><p>Eram ubi probant ad culpa, eu ab elit eram esse ut dolor probant qui fore quaehic amet e eiusmod a sint.</p><p>Quis domesticarum singulis sunt proident ex elit laboris o fugiat anim. Eram oiudicem e e fore offendit commodo.</p><p>Ex sunt incididunt fidelissimae ita doctrina qui quis. Laborum ea aute laboris.Fabulas dolore ullamco, labore offendit quo tempor eram.Non noster graviterque,ut sunt mandaremus excepteur. E quid occaecat commodo, a quid duis se consequat.E malis ea quorum.</p><p>Duis quibusdam est exquisitaque, sed nostrud graviterque de tempor ita id enimvidisse.</p><p>E duis aliquip concursionibus, proident ex irure, labore ea possumus idincurreret sed eram. Quem deserunt quo aute quis,.</p></section>
</body>

其展示效果如下：

可以看出来当对元素设置了fixed之后，它的绝对定位是相对于屏幕来讲的。

四、开始动手做吧

1.（环境搭建）观察任务描述，揣摩开发要点（0.5小时）
2.（知识学习）搜索学习——《定位》（1小时）
3.（编码实战）首先布局header，让header紧贴顶部（1小时）
4.（编码实战）为header内部布局，保证3块文字分别居于header的左中右，并垂直居中（1小时）
5.（知识学习）查看学习资料——《input——创造最新式表单》（1小时）
6.（编码实战）布局表单内容，至少包含input和button（0.5小时）
7.（编码实战）为input旁边的小图标切图（1小时）
8.（编码实战）为表单内容添加样式（1小时）
9.（代码调试）调试代码，使得页面在不同分辨率不同设备上都能正常显示（1.5小时）
10.（环境搭建）配置nginx的http服务，使本地可以通过配置的域名访问（0.5小时）
11.（环境搭建）上传到学员服务器（0.5小时）
12.（代码调试）使用不同设备访问网址查看页面（0.5小时）
13.（知识学习）完成任务后查看验收标准，确认任务已完成，如果未完成返回相应步骤（0.5小时）
14.（思考答疑）查看深度思考，学有余力的情况下尝试回答深度思考的问题（1小时）

五、验收自己的成果

1.自适应：页面宽度始终占满屏幕2.移动端：header始终固定顶部3.还原设计图：输入帐号小图标与输入框要水平对齐4.扩展性：去掉header的三块文字的任意一两个，剩下的一两个都还在原位置上不会受到影响。5.编码规范：参照第三课

六、来做一次深度思考

1.position定位有哪几种？各有什么特点点击查看相关小课堂
2.哪些css属性可以设置百分比，其计算原则是什么？点击查看相关小课堂
3.常见的表单元素有哪些？各有什么属性？点击查看相关小课堂
4.如何理解HTML结构的语义化？点击查看相关小课堂
5.使用fixed的时候，在手机上查看是否会有问题，怎么解决？点击查看相关小课堂
6.常见的移动端登录页header有哪些实现方式？点击查看相关小课堂

七、总结自己的知识图谱

总结任务中遇到的问题困惑和疑难，用自己的语言将学到的知识记录下来