如何使用div模仿input效果，快來學習一下吧

言

在很多web或者app頁面中，我們可以看到各種各樣的輸入框，從外觀上看它們可以直觀的看做是input元素，但是實際上并非如此。我們可以通過別的標簽去模擬input標簽的效果，今天我們就來看看如何使用div標簽模擬input標簽的效果。

div+css

頁面效果

這里我們用ofo的主頁面作為例子，在點擊下面數字的時候，數字的內容會出現在輸入框內，這個輸入框就是用div模擬實現的。

當然頁面內容是靜態的，只是一個簡單的html，我們來看下實現后的效果。如果感興趣的可以直接去github上去看看，源碼地址：

https://github.com/zhouxiongking/article-pages/tree/master/articles/divToInput

實現效果

顯示框

這里我們定義一個顯示內容的div來模擬input，其css樣式如下。

css樣式

:before

我們使用:before偽元素來裝載輸入的內容，在:before元素中使用content屬性來動態的元素的屬性值。

使用:before偽元素

閃爍動作

在input標簽中，如果input元素獲取焦點后，在input元素內會有光標在閃爍，這個效果我們可以通過:after偽元素來實現。

我們會用到動畫animation的知識，首先定義一個動畫效果，利用opacity屬性來控制顯示與不顯示，從而造成閃爍效果。

定義閃爍動作

然后在:after偽元素中使用。

:after偽元素

Javascript控制輸入

在設置好div效果后，需要在點擊下面的數字時，將值顯示在div中，這就需要用到Javascript去控制。

首先獲取頁面上所有存在動作的元素。

獲取元素

然后給數字和刪除元素分別添加對應的事件。

元素綁定事件

綁定事件后，在點擊數字時會將值動態的顯示在div中，在刪除時也會相應刪掉最后一個添加的元素值。

頁面設計

對于整個頁面的設計，采用了header，div和footer的布局。

header和div的html部分代碼如下。

header與div

相應的footer部分代碼如下，其主要采用的是table布局，相對簡單實用。

footer部分

至此，整個頁面的實現就講解完畢了，中間有很多的css樣式部分我并沒有放出來，感興趣的可以自行去github上clone下來看看。

總結

今天這篇文章主要以ofo主頁面實現來講解了一下如何使用div來模擬input的效果，你有收獲嗎

例最終效果如下：

一、設置整個網頁的背景色

圖1

圖2

二、創建一個盒子，讓其水平居中，距離上邊200像素。

圖3

圖4

三、把盒子設置四個角為圓角，圓10個像素。

圖5

圖6

四、在大盒子里做一個ding盒子，設置它上面兩個角是圓角，下面兩個角是直角。

圖7

圖8

五、ding盒子里輸入幾個字，讓這幾個字在盒子里水平居中，垂直居中，關于盒子內居中問題可參看我寫的文【203】。

圖9

圖10

六、在deng盒子里面再做三個小盒子，取名為ref，注意如果這三個盒子不用浮動，會有什么效果，這個你可以試試看。

圖11

圖12

七、往ref盒子里面添加信息，發下圖，這里順便學習兩個標簽，一個是input，一個是button。

圖13

圖14

八、去掉背景色，然后用盒子內居中的方法，讓這些元素居中。

圖15

圖16

九、通過樣式，設置按鈕的大小和字的大小，這里我特地用id來給元素上名字，不同于class，在樣式里調用的時候，一個是前面加.一個是前面加#。

圖17

圖18

十、最后設置一下密碼輸入框，輸入內容時為密碼隱藏符號。

圖19

圖20

網頁制作過程中，布局是我們最重要的一個環節。可以說布局的好壞直接影響到整個網頁的成敗！布局成則事半功倍；布局敗，則事倍功半。隨著移動互聯的到來，響應式網站風靡。這也就興起了一種新興的布局方式——彈性布局。取代我們之前“display+float+position”的布局形式，采用全新的彈性布局，會讓你的網站如絲般順滑！今天，就讓我們一起來學習一下彈性布局，讓我們用5個div玩轉彈性布局吧~

1.彈性布局簡介

彈性布局，又稱“Flex布局”，是由W3C大哥于2009年推出的一種布局方式。可以簡便、完整、響應式地實現各種頁面布局。而且已經得到所有主流瀏覽器的支持，我們可以放心大膽的使用。

>>> 了解兩個基本概念，接下來會頻繁提到：

① 容器：需要添加彈性布局的父元素；

② 項目：彈性布局容器中的每一個子元素，稱為項目；

>>> 了解兩個基本方向，這個牽扯到彈性布局的使用：

① 主軸：在彈性布局中，我們會通過屬性規定水平/垂直方向為主軸；

② 交叉軸：與主軸垂直的另一方向，稱為交叉軸。

2 .彈性布局的使用

① 給父容器添加display: flex/inline-flex;屬性，即可使容器內容采用彈性布局顯示，而不遵循常規文檔流的顯示方式；

② 容器添加彈性布局后，僅僅是容器內容采用彈性布局，而容器自身在文檔流中的定位方式依然遵循常規文檔流；

③ display:flex; 容器添加彈性布局后，顯示為塊級元素；

display:inline-flex; 容器添加彈性布局后，顯示為行級元素；

④ 設為 Flex布局后，子元素的float、clear和vertical-align屬性將失效。但是position屬性，依然生效。

2.1代碼實例

<div id="div">
            <div class="div1">1</div>
            <div class="div2">2</div>
            <div class="div3">3</div>
            <div class="div4">4</div>
        </div>

#div{
                width: 400px;
                height: 400px;
                background-color: yellow;
                display: flex;
                
            }
            #div div{
                width: 100px;
                height: 100px;
                background-color: blue;
                color: white;
                font-size: 30px;
                
            }

五個簡單的div，只給父容器添加了display: flex;屬性，就可以讓容器內部打破原有文檔流模式，展現為彈性布局。

簡單的了解一下彈性布局后，我們來詳解一下配合“display: flex;”使用的12大屬性。其中，12個屬性分為兩類，6個作用于父容器，6個作用于子項目。

3. 作為父容器的6大屬性

① flex-direction屬性決定主軸的方向（即項目的排列方向）。row（默認值）：主軸為水平方向，起點在左端；row-reverse：主軸在水平方向，起點在右端；column：主軸為垂直方向，起點在上沿。column-reverse：主軸為垂直方向，起點在下沿。

② flex-wrap屬性定義，如果一條軸線排不下，如何換行。

nowrap（默認）：不換行。當容器寬度不夠時，每個項目會被擠壓寬度；

wrap：換行，并且第一行在容器最上方；

wrap-reverse：換行，并且第一行在容器最下方。

③ flex-flow 是flex-direction和flex-wrap的縮寫形式，默認值為：flex-flow: row wrap; 不做過多解釋

④ justify-content屬性定義了項目在主軸上的對齊方式。

>>> 此屬性與主軸方向息息相關。

主軸方向為：row-起點在左邊，row-reverse-起點在右邊， column-起點在上邊，column-reverse-起點在下邊

flex-start（默認值）：項目位于主軸起點。

flex-end：項目位于主軸終點。

center：居中

space-between：兩端對齊，項目之間的間隔都相等。(開頭和最后的項目，與父容器邊緣沒有間隔)

space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。(開頭和最后的項目，與父容器邊緣有一定的間隔)

⑤ align-items屬性定義項目在交叉軸上如何對齊。

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊。

center：交叉軸的中點對齊。

baseline: 項目的第一行文字的基線對齊。(文字的行高、字體大小會影響每行的基線)

stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

⑥ align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

(當項目換為多行時，可使用align-content取代align-items)

flex-start：與交叉軸的起點對齊。

flex-end：與交叉軸的終點對齊。

center：與交叉軸的中點對齊。

space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。

space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

stretch（默認值）：軸線占滿整個交叉軸。

4. 移動設備端作用于子項目的6大屬性

① order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。

② flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。

③ flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

④ flex-basis定義項目占據的主軸空間。(如果主軸為水平，則設置這個屬性，相當于設置項目的寬度。原width將會失效。)

⑤ flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。

此屬性有兩個快捷設置：auto=(1 1 auto)/none=(0 0 auto)

⑥ align-self:定義單個項目自身在交叉軸上的排列方式，可以覆蓋掉容器上的align-items屬性。

屬性值：與align-items相同，默認值為auto，表示繼承父容器的align-items屬性值。

好了，相信到這里，所有同學都能夠理解flex彈性布局了吧~~學習一個新知識，字不如表，表不如圖。希望這5個div的圖解，能夠讓所有同學深刻的理解Flex彈性布局~接下來，讓我們愉快的拋棄Float、拋棄Position，一起擁抱Flex吧！！

最后，所有的源碼附上，需要的同學自行測試哦~

<!DOCTYPE html>
<html>    
    <head>        
        <meta charset="UTF-8">        
        <title></title>        
        <style type="text/css">            
            #div{ width: 500px;
                height: 400px;
                background-color: yellow;
                display: flex;
                /*flex-direction: column-reverse;*/                /*flex-wrap: wrap;*/                /*justify-content: space-around;*/                /*align-items: stretch;*/                /*align-content: stretch;*/
            }
            #div div{width: 100px;   
                height: 100px;    
                background-color: blue;
                color: white;  
                font-size: 30px;
                /*flex-shrink: 0;*/
            } 
            #div .div1{   /*font-size: 48px;*/
                /*order: 1;*/ 
                /*flex-grow: 1;*/ 
                /*flex-shrink: 0;*/ 
                /*background-color: red;*/  
            }
            #div .div3{  /*flex-grow: 2;*/
                background-color: green;
                /*flex-basis: 200px;*/ 
                align-self: flex-end;
            }        
        </style>    
    </head>        
    <body> 
        <div id="div">
          <div class="div1">1</div>
            <div class="div2">2</div> 
            <div class="div3">3</div>
            <div class="div4">4</div>
        </div>    
    </body>
</html>

--如需轉發，請注明原文網站，整理不易

在線咨詢

上一篇：CSS3實現小icon觸發切換到箭頭效果
下一篇：HTML常用字體標簽：揭秘HTML字體標簽，讓你的網頁“字”得其樂！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商