整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
．使用選擇器來插入內(nèi)容
h2:before{
content:"前綴";
}
h2:after{
content:"后綴";
}
B．指定個別的元素不進行插入
h2.sample:before{
content:none;
}
2. 插入圖像
A．在標題前插入圖像文件
h2:before{
content:url(anwy.jpg);
}
B．將alt屬性的值作為圖像的標題來顯示（用不了）
img:after{
content:attr(alt);
display:block;
text-align:center;
margin-top:5px;
font-size:11px;
font-weight:bold;
color:black;
}
3. 插入編號
A．多個標題前加入連續(xù)編號
div:before{
content:counter(divCounter);
}
div{
counter-increment:divCounter;
}
B．在項目符號中追加文字
div:before{
content:"第"counter(divCounter)"段";
}
C．指定編號樣式、種類
div:before{
content:counter(divCounter,upper-alpha)'.';
color:blue;
font-size:16px;
}
D．編號嵌套
div:before{
content:counter(divCounter,upper-alpha)'.';
color:blue;
font-size:16px;
}
div{
counter-increment:divCounter;
counter-reset:subDivCounter;
}
p:before{
content:counter(subDivCounter)'.';
margin-left:15px;
font-size:12px;
}
p{
counter-increment:subDivCounter;
}
E．字符串兩邊添加文字嵌套符號
h3:before{
content: open-quote;
}
h3:after{
content: close-quote;
}
h3{
quotes:"【""】";
}
disc 點| circle圓圈 | square正方形 | decimal數(shù)字 | decimal-leading-zero 十進制數(shù)| lower-roman 小寫羅馬文字| upper-roman 大寫羅馬文字| lower-greek小寫希臘字母 | lower-latin小寫拉丁文 | upper-latin 大寫拉丁文| armenian亞美尼亞數(shù)字 | georgian喬治亞數(shù)字 | lower-alpha小寫英文字母 | upper-alpha大寫英文字母 | none無 | inherit繼承
在很多web或者app頁面中，我們可以看到各種各樣的輸入框，從外觀上看它們可以直觀的看做是input元素，但是實際上并非如此。我們可以通過別的標簽去模擬input標簽的效果，今天我們就來看看如何使用div標簽?zāi)Minput標簽的效果。
div+css
這里我們用ofo的主頁面作為例子，在點擊下面數(shù)字的時候，數(shù)字的內(nèi)容會出現(xiàn)在輸入框內(nèi)，這個輸入框就是用div模擬實現(xiàn)的。
當(dāng)然頁面內(nèi)容是靜態(tài)的，只是一個簡單的html，我們來看下實現(xiàn)后的效果。如果感興趣的可以直接去github上去看看，源碼地址：
https://github.com/zhouxiongking/article-pages/tree/master/articles/divToInput
實現(xiàn)效果
這里我們定義一個顯示內(nèi)容的div來模擬input，其css樣式如下。
css樣式
我們使用:before偽元素來裝載輸入的內(nèi)容，在:before元素中使用content屬性來動態(tài)的元素的屬性值。
使用:before偽元素
在input標簽中，如果input元素獲取焦點后，在input元素內(nèi)會有光標在閃爍，這個效果我們可以通過:after偽元素來實現(xiàn)。
我們會用到動畫animation的知識，首先定義一個動畫效果，利用opacity屬性來控制顯示與不顯示，從而造成閃爍效果。
定義閃爍動作
然后在:after偽元素中使用。
:after偽元素
在設(shè)置好div效果后，需要在點擊下面的數(shù)字時，將值顯示在div中，這就需要用到Javascript去控制。
首先獲取頁面上所有存在動作的元素。
獲取元素
然后給數(shù)字和刪除元素分別添加對應(yīng)的事件。
元素綁定事件
綁定事件后，在點擊數(shù)字時會將值動態(tài)的顯示在div中，在刪除時也會相應(yīng)刪掉最后一個添加的元素值。
對于整個頁面的設(shè)計，采用了header，div和footer的布局。
header和div的html部分代碼如下。
header與div
相應(yīng)的footer部分代碼如下，其主要采用的是table布局，相對簡單實用。
footer部分
至此，整個頁面的實現(xiàn)就講解完畢了，中間有很多的css樣式部分我并沒有放出來，感興趣的可以自行去github上clone下來看看。
今天這篇文章主要以ofo主頁面實現(xiàn)來講解了一下如何使用div來模擬input的效果，你有收獲嗎
篇文章我們要說的就是這html中運用也是使用最多的標簽div，我們接下來重點介紹下div的作用，以及如何給div合理的命名，讓代碼結(jié)構(gòu)更加清晰明了。
使用語法：<div>元素內(nèi)容</div>
在網(wǎng)頁制作過程過中，我們可以把一些獨立的邏輯部分劃分出來，放在一個<div>標簽中，這個<div>標簽的作用就相當(dāng)于一個容器。容器的作用呢就是可以把一個邏輯部分包裹起來存到元素內(nèi)部。
確定邏輯部分：
什么是邏輯部分？它是頁面上相互關(guān)聯(lián)的一組元素。如網(wǎng)頁中的獨立的欄目版塊，就是一個典型的邏輯部分。比如網(wǎng)頁中的頭部模塊、banner模塊、新聞列表模塊等，這樣的部分就可以使用div標簽作為容器存放進去。如下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用<div>標簽作為容器。
第一條我們講到把一些標簽放進<div>里，劃分出一個獨立的邏輯部分。為了使邏輯更加清晰，我們可以為這一個獨立的邏輯部分設(shè)置一個名稱，用id屬性來為<div>提供唯一的名稱，這個就像我們每個人都有一個身份證號，這個身份證號是唯一標識我們的身份的，也是必須唯一的。對于重復(fù)的邏輯部分我們用class屬性來為div添加一個通用名稱，class不唯一可以重復(fù)使用。
上邊這張圖片左邊是沒有使用div的排版，我們可以看到整個頁面標簽有很多，我們很難區(qū)分哪一塊是一個部分的，哪一塊是屬于哪個區(qū)域的，但是右邊這張圖片，我們使用div包括了之后我們就可以很清晰的了解到，每一個模塊屬于哪部分，結(jié)構(gòu)排版也顯得很明了，便于我們后期的修改和維護。
到這本節(jié)課的內(nèi)容我們就說完了，快點自己動手來試試：給網(wǎng)頁的獨立的版塊添加“標記”。
附贈一句經(jīng)典語錄：將來的你一定會感謝現(xiàn)在奮斗的自己！喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
