[HTML+CSS]扁平化输入框
实例：扁平化输入框
技术：HTML+CSS
结构剖析：
基本结构：此插件由文字、两个椭圆形输入框组成
颜色代码：蓝色为：#6eb6ff 白色为：#fff
HTML:
首先设置一个类名，我这里使用box，在box里面进行设置 <h1></h1>用于输入文本“请验证”三个字。
CSS:蓝色背景
背景色：背景色的代码为蓝色：#6eb6ff，我们现在css里面设置一个类名为body的大括号里面输入代码“background-color”，即可设置完毕。
HTML:输入框和按钮
输入框：直接输入input回车键即可展示出完整代码，即<input type= “text”> 而后在“text”后敲入代码placeholder=“”或直接输入pl并回车，placeholder=“请输入验证码”
按钮：在提示式输入框的代码下一行输入bu回车键即可，并在button里面输入下一步的文字信息，<button>下一步</button>
代码解释：提示用户输入正确的信息，需要用placeholder属性加以说明。
接下来我们要将输入框移动到中心位置上，方便接下来我们的操作。
右移：首先我们让整体居中，我们在body的类名里面使用代码display: flex;和justify-content: center;使其整体右移居中。
下移：使用代码min-height:;设置参数100vh，输入代码align-items: ;选择center，配合使用，这样就使得整体向下移动了。
CSS:
CSS:文本“请验证”和方框
请验证：首先我们设置一个为.box h1的类名修改“请验证”三个字的位置，输入代码： width: 260px;我们通过输入一个颜色背景代码，发现整体的宽度就是260px。
方框：设置出方框的宽度和高度，边框线，圆角，首行缩进、字体大小、内外的上下边距。
在css里面设置一个为.box input的类名，先设置宽度和高度，我们用代码width: 260px;和height: 50px;实现。
其边框线要使用代码border: 2px solid #fff;和 background-color: #fff;和搭配outline-style使用，不然方框点击之后会出现黑色边框线。
代码解释：outline-style是设置所有的轮廓属性。
边框的圆角使用代码:border-radius:;设置参数为border-radius: 25px;这样边框的圆角就设置好了。
为了美观，文字使用代码进行首行缩进，使用代码 text-indent:;缩进15px。
设置文字大小使用代码 font-size:;设置为18px。
设置上下边距使用代码 margin:;
设置其内外的上下边距为20px 左右边距为0，这样第一个输入框就设置好了。
CSS:按钮
按钮：我们将按钮移动到第一个方框的下面并设置按钮的大小，在css里面设置box为开头的类名，在大括号里面进行代码输入，其代码为，实现页面布局的display: flex;和 flex-direction: column;将项目进行垂直显示。
下一步：我们设置按钮的宽度和颜色，使用其代码，设置宽度width：100%和 align-items:center ;配合使用，并设置颜色为白色：color: #fff;
和第一个输入框一样我们从它的宽度和高度、边框颜色、圆角、字体大小和粗细、鼠标悬停效果进行设置。
在css里面设置一个为.box button的类名，先设置宽度和高度，我们用代码width: 260px;和height: 50px;实现，其边框线要使用代码border: 2px solid #fff;和代码background: none; 搭配才能实现白色的边框线。
代码解释：background: none;设置所有背景属性。
边框的圆角引用代码:border-radius:;设置参数为border-radius: 25px;这样边框的圆角就可以了，设置字体颜色使用代码color: #fff;设置为白色字体。设置文字大小使用代码 font-size:;设置为18px，设置文字的粗细，使用代码font-weight: bold;使得字体和整体更为协调。
CSS:鼠标悬停效果：
首先在css里面设置一个为 .box button:hover的类名，在此类名里面我们直接输入鼠标悬停后所产生的效果的代码就可以了，也就是悬停之后，产生的背景色由代码 background-color: #fff;和所产生的字体颜色的代码color: #6eb6ff;所实现，并加上了代码cursor: pointer;实现鼠标悬停定义改变了指针的光标形状。
成品展示：
完整代码：
HTML:
CSS:
