實(shí)例：扁平化輸入框

技術(shù)：HTML+CSS

結(jié)構(gòu)剖析：

基本結(jié)構(gòu)：此插件由文字、兩個(gè)橢圓形輸入框組成

顏色代碼：藍(lán)色為：#6eb6ff ?白色為：#fff

HTML:

首先設(shè)置一個(gè)類(lèi)名，我這里使用box，在box里面進(jìn)行設(shè)置?<h1></h1>用于輸入文本“請(qǐng)驗(yàn)證”三個(gè)字。

CSS:藍(lán)色背景

背景色：背景色的代碼為藍(lán)色：#6eb6ff，我們現(xiàn)在css里面設(shè)置一個(gè)類(lèi)名為body的大括號(hào)里面輸入代碼“background-color”，即可設(shè)置完畢。

HTML:輸入框和按鈕

輸入框：直接輸入input回車(chē)鍵即可展示出完整代碼，即<input type= “text”> 而后在“text”后敲入代碼placeholder=“”或直接輸入pl并回車(chē)，placeholder=“請(qǐng)輸入驗(yàn)證碼”

按鈕：在提示式輸入框的代碼下一行輸入bu回車(chē)鍵即可，并在button里面輸入下一步的文字信息，<button>下一步</button>

代碼解釋?zhuān)禾崾居脩?hù)輸入正確的信息，需要用placeholder屬性加以說(shuō)明。

? ? ? ? ? ? ? ? ? ? ? 接下來(lái)我們要將輸入框移動(dòng)到中心位置上，方便接下來(lái)我們的操作。

右移：首先我們讓整體居中，我們?cè)赽ody的類(lèi)名里面使用代碼display: flex;和justify-content: center;使其整體右移居中。

下移：使用代碼min-height:;設(shè)置參數(shù)100vh，輸入代碼align-items: ;選擇center，配合使用，這樣就使得整體向下移動(dòng)了。

CSS:

CSS:文本“請(qǐng)驗(yàn)證”和方框

請(qǐng)驗(yàn)證：首先我們?cè)O(shè)置一個(gè)為.box h1的類(lèi)名修改“請(qǐng)驗(yàn)證”三個(gè)字的位置，輸入代碼：?width: 260px;我們通過(guò)輸入一個(gè)顏色背景代碼，發(fā)現(xiàn)整體的寬度就是260px。

方框：設(shè)置出方框的寬度和高度，邊框線(xiàn)，圓角，首行縮進(jìn)、字體大小、內(nèi)外的上下邊距。

在css里面設(shè)置一個(gè)為.box input的類(lèi)名，先設(shè)置寬度和高度，我們用代碼width: 260px;和height: 50px;實(shí)現(xiàn)。

其邊框線(xiàn)要使用代碼border: 2px solid #fff;和 background-color: #fff;和搭配outline-style使用，不然方框點(diǎn)擊之后會(huì)出現(xiàn)黑色邊框線(xiàn)。

代碼解釋?zhuān)簅utline-style是設(shè)置所有的輪廓屬性。

邊框的圓角使用代碼:border-radius:;設(shè)置參數(shù)為border-radius: 25px;這樣邊框的圓角就設(shè)置好了。

為了美觀，文字使用代碼進(jìn)行首行縮進(jìn)，使用代碼?text-indent:;縮進(jìn)15px。

設(shè)置文字大小使用代碼?font-size:;設(shè)置為18px。

設(shè)置上下邊距使用代碼??margin:;

設(shè)置其內(nèi)外的上下邊距為20px?左右邊距為0，這樣第一個(gè)輸入框就設(shè)置好了。

CSS:按鈕

按鈕：我們將按鈕移動(dòng)到第一個(gè)方框的下面并設(shè)置按鈕的大小，在css里面設(shè)置box為開(kāi)頭的類(lèi)名，在大括號(hào)里面進(jìn)行代碼輸入，其代碼為，實(shí)現(xiàn)頁(yè)面布局的display: flex;和 flex-direction: column;將項(xiàng)目進(jìn)行垂直顯示。

下一步：我們?cè)O(shè)置按鈕的寬度和顏色，使用其代碼，設(shè)置寬度width：100%和?align-items:center ;配合使用，并設(shè)置顏色為白色：color: #fff;

和第一個(gè)輸入框一樣我們從它的寬度和高度、邊框顏色、圓角、字體大小和粗細(xì)、鼠標(biāo)懸停效果進(jìn)行設(shè)置。

在css里面設(shè)置一個(gè)為.box button的類(lèi)名，先設(shè)置寬度和高度，我們用代碼width: 260px;和height: 50px;實(shí)現(xiàn)，其邊框線(xiàn)要使用代碼border: 2px solid #fff;和代碼background: none; 搭配才能實(shí)現(xiàn)白色的邊框線(xiàn)。

代碼解釋?zhuān)篵ackground: none;設(shè)置所有背景屬性。

邊框的圓角引用代碼:border-radius:;設(shè)置參數(shù)為border-radius: 25px;這樣邊框的圓角就可以了，設(shè)置字體顏色使用代碼color: #fff;設(shè)置為白色字體。設(shè)置文字大小使用代碼 font-size:;設(shè)置為18px，設(shè)置文字的粗細(xì)，使用代碼font-weight: bold;使得字體和整體更為協(xié)調(diào)。

CSS:鼠標(biāo)懸停效果：

首先在css里面設(shè)置一個(gè)為 .box button:hover的類(lèi)名，在此類(lèi)名里面我們直接輸入鼠標(biāo)懸停后所產(chǎn)生的效果的代碼就可以了，也就是懸停之后，產(chǎn)生的背景色由代碼 background-color: #fff;和所產(chǎn)生的字體顏色的代碼color: #6eb6ff;所實(shí)現(xiàn)，并加上了代碼cursor: pointer;實(shí)現(xiàn)鼠標(biāo)懸停定義改變了指針的光標(biāo)形狀。

成品展示：

完整代碼：

HTML:

CSS: