[HTML+CSS]扁平化输入框

程序员小橘

重庆枫雨在线科技有限公司前端工程师

实例：扁平化输入框

技术：HTML+CSS

结构剖析：

基本结构：此插件由文字、两个椭圆形输入框组成

颜色代码：蓝色为：#6eb6ff 白色为：#fff

HTML:

首先设置一个类名，我这里使用box，在box里面进行设置 <h1></h1>用于输入文本“请验证”三个字。

<div class="box">
 <h1>请验证</h1>
</div>

CSS:蓝色背景

背景色： 背景色的代码为蓝色：#6eb6ff，我们现在css里面设置一个类名为body的大括号里面输入代码“background-color”，即可设置完毕。

body{
    background-color: #6eb6ff;
}

HTML:输入框和按钮

输入框： 直接输入input回车键即可展示出完整代码，即<input type= “text”> 而后在“text”后敲入代码placeholder=“”或直接输入pl并回车，placeholder=“请输入验证码”

按钮： 在提示式输入框的代码下一行输入bu回车键即可，并在button里面输入下一步的文字信息，<button>下一步</button>

<body>
    <div class="box">
        <h1>请验证</h1>
        <input type="text" placeholder="请输入验证码">
        <button>下一步</button>
    </div>
</body>

代码解释：提示用户输入正确的信息，需要用placeholder属性加以说明。

接下来我们要将输入框移动到中心位置上，方便接下来我们的操作。

右移： 首先我们让整体居中，我们在body的类名里面使用代码display: flex;和justify-content: center;使其整体右移居中。

下移： 使用代码min-height:;设置参数100vh，输入代码align-items: ;选择center，配合使用，这样就使得整体向下移动了。

CSS:

body{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #6eb6ff;
}

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，这样第一个输入框就设置好了。

.box{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    color: #fff;
.box h1{
    width: 260px;
.box input{
    width: 260px;
    height: 50px;
    border: 2px solid #fff;
    background-color: #fff;
    outline: none;
    border-radius: 25px;
    text-indent: 15px;
    font-size: 18px;
    margin: 20px 0;
}

CSS:按钮

按钮： 我们将按钮移动到第一个方框的下面并设置按钮的大小，在css里面设置box为开头的类名，在大括号里面进行代码输入，其代码为，实现页面布局的display: flex;和 flex-direction: column;将项目进行垂直显示。

.box{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    color: #fff;
}

下一步：我们设置按钮的宽度和颜色，使用其代码，设置宽度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;使得字体和整体更为协调。边框的圆角引用代码:border-radius:;设置参数为border-radius: 25px;这样边框的圆角就可以了，设置字体颜色使用代码color: #fff;设置为白色字体。设置文字大小使用代码 font-size:;设置为18px，设置文字的粗细，使用代码font-weight: bold;使得字体和整体更为协调。

.box button{
    width: 260px;
    height: 50px;
    border: 2px solid #fff;
    background: none;
    border-radius: 25px;
    color: #fff;
    font-size: 18px;