整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
現(xiàn)效果
代碼：
1.首先就是一個導(dǎo)航下拉，就是鼠標放上去出現(xiàn)一個下拉列表
2.然后發(fā)現(xiàn)，下拉里面，每一個選項是從不同的兩個方向出現(xiàn)的
3.出現(xiàn)的方式是奇數(shù)項從左邊進，偶數(shù)項從右邊進，進入方式是滑動淡入。
效果圖
其實這個是用CSS3過渡和動畫制作的，沒有用到JS也是可以做出這樣的效果，那么他的代碼是怎樣的呢？我給大家羅列出來：
HTML代碼
CSS
完整的代碼
代碼有點多已經(jīng)上傳到群文件里了，最后也說下小編的群，可以分享交流，小編也會經(jīng)常分享一些資料干貨供大家學(xué)習(xí)：661473108，歡迎初學(xué)和進階中的小伙伴。
這個動畫，我感覺雖然性能上css3是比js要好一些。畢竟js也是控制css或者class來實現(xiàn)！
靈活性的話，這個就要比js差了，比如div的顯示與隱藏，我不想通過鼠標移入移出的方式控制，如果我想通過點擊的方式控制div的顯示與隱藏呢。對于js的方式來說，這個就是觸發(fā)的事件就可以了，對于插件來說，可能就改一個插件就行了！對于css3實現(xiàn)的話，這個就不但要改css樣式了，也要改html結(jié)構(gòu)了！
這里，我的建議就是，這個動畫最理想的還是用js和css3結(jié)果，結(jié)果是最好的。如果針對靈活性不高的需求，可以只用css3。
一篇文章我們說了單行文本框和多行文本框，今天呢我們繼續(xù)看一下表單的其它控件：單選框、復(fù)選框、下拉框。
在我們表單頁面中，經(jīng)常會有選擇性別或者選擇愛好這類的內(nèi)容，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和復(fù)選框，兩者的區(qū)別是單選框中的選項用戶只能選擇一項，而復(fù)選框中用戶可以任意選擇多項，甚至全選。
使用語法：
單選框：<input type="radio" value="值" name="名稱" checked="checked"/>
復(fù)選框：<input type="checkbox" value="值" name="名稱" checked="checked"/>
詳細講解：
1、type: 當(dāng) type="radio" 時，控件為單選框；當(dāng) type="checkbox" 時，控件為復(fù)選框
2、value：提交數(shù)據(jù)到服務(wù)器的值（后臺程序使用）
3、name：為控件命名，這里要注意同一組的單選按鈕，name 取值一定要一致（具體可見下邊的參考練習(xí)）。
4、checked：當(dāng)設(shè)置 checked="checked"（也可以直接簡寫成checked） 時，該選項被默認選中
使用練習(xí)：
我們創(chuàng)建一個表單，表單里邊包含姓別（男、女）選擇的單選框，默認選中男以及愛好（唱歌、打游戲、繪畫、旅游）選擇的多選框，默認選中唱歌。具體的代碼如下圖所示：
在網(wǎng)頁中的顯示效果就如下圖所示：
下拉框也是我們常用的一個表單控件，多用于選擇城市地區(qū)等。
使用語法：
<select>
<option value="向服務(wù)器提交的內(nèi)容" selected="selected">網(wǎng)頁顯示的內(nèi)容</option>
</select>
詳細講解：
1、option：option為select下拉子元素，可以有一個或多個，寫法類似ul和li，其中的value內(nèi)容為提交數(shù)據(jù)到服務(wù)器的值（后臺程序使用）
2、selected：當(dāng)設(shè)置 selected="selected"（也可以直接簡寫成selected） 時，該選項被默認選中
使用練習(xí)：
我們創(chuàng)建一個表單，表單里邊包含一個城市的下拉框，下拉框中有北京、上海、天津這三個城市，其中默認選中天津。具體的代碼如下圖所示：
在網(wǎng)頁中的顯示效果就如下圖所示：
好了，本篇文章就先給大家介紹這幾個表單控件的語法以及使用，下篇文章我們將介紹按鈕的語法及使用以及完整的表單練習(xí)演示，記得平時要多加練習(xí)才是王道。
每日金句：做人要像竹子一樣每前進一步，都要做一次小結(jié)。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
