表單控件 css的三中引入方式css選擇器
阿新 • • 發佈:2018-11-01
標簽 文件 tex 效率 內容 多選 要求 option 兩個
1. 表單控件:
單選框
如果兩個單選的name值一樣,會產生互斥效果
<p> <!--單選框--> 男<input type="radio" name="sex" value="man" checked="checked"> 女<input type="radio" name="sex" value="woman"> </p>
效果如下:
單選框正方形:多選
<p> <!--單選框--> 抽煙<input type="checkbox" name="fav" value="smoke"> 喝酒<input type="checkbox" name="fav" value="drink"> 湯頭<input type="checkbox" name="fav" value="lifa"> </p>
效果圖
上傳文件使用:
****註意:如果有文件需要提交給服務器,method必須為POST,enctype必須為multipart/form-data****
<input type="file">
效果圖:
button 閉合標簽
submit提交按鈕
reset 重置按鈕
<p> <input type="submit" value="註冊"> <input type="button" value="登陸"> <button type="submit">按鈕</button> <button type="reset">重置按鈕</button> </p>
效果圖
textarea rows行數 cols列數
<p> <textarea name="" id="desc" cols="50" rows="20"></textarea> </p>
效果圖:
下拉列表: selected(先選)
<select name="xuanmei" id=""> <option value="1">熊姐</option> <option value="2" selected = ‘selected‘>婕哥</option> <option value="3">張陽</option> <option value="4">五爪</option> </select>
效果圖:
引入css方式(重點掌握)
-
行內樣式
-
內接樣式
-
外接樣式
3.1 鏈接式
3.1 導入式
css介紹
現在的互聯網前端分三層:
- HTML:超文本標記語言。從語義的角度描述頁面結構。
- CSS:層疊樣式表。從審美的角度負責頁面樣式。
- JS:JavaScript 。從交互的角度描述頁面行為
CSS:Cascading Style Sheet,層疊樣式表。CSS的作用就是給HTML頁面標簽添加各種樣式,定義網頁的顯示效果。簡單一句話:CSS將網頁內容和顯示樣式進行分離,提高了顯示功能。
css的最新版本是css3,我們目前學習的是css2.1
接下來我們要講一下為什麽要使用CSS。
HTML的缺陷:
- 不能夠適應多種設備
- 要求瀏覽器必須智能化足夠龐大
- 數據和顯示沒有分開
- 功能不夠強大
CSS 優點:
- 使數據和顯示分開
- 降低網絡流量
- 使整個網站視覺效果一致
- 使開發效率提高了(耦合性降低,一個人負責寫html,一個人負責寫css)
比如說,有一個樣式需要在一百個頁面上顯示,如果是html來實現,那要寫一百遍,現在有了css,只要寫一遍。現在,html只提供數據和一些控件,完全交給css提供各種各樣的樣式。
行內樣式
View Code內接樣式
View Code外接樣式-鏈接式
View Code外接樣式-導入式
View Code
表單控件 css的三中引入方式css選擇器