1. 程式人生 > >表單控件 css的三中引入方式css選擇器

表單控件 css的三中引入方式css選擇器

標簽 文件 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方式(重點掌握)

  1. 行內樣式

  2. 內接樣式

  3. 外接樣式

     3.1 鏈接式

     3.1 導入式

css介紹

現在的互聯網前端分三層:

  • HTML:超文本標記語言。從語義的角度描述頁面結構
  • CSS:層疊樣式表。從審美的角度負責頁面樣式
  • JS:JavaScript 。從交互的角度描述頁面行為

CSS:Cascading Style Sheet,層疊樣式表。CSS的作用就是給HTML頁面標簽添加各種樣式,定義網頁的顯示效果。簡單一句話:CSS將網頁內容和顯示樣式進行分離,提高了顯示功能。

css的最新版本是css3,我們目前學習的是css2.1

接下來我們要講一下為什麽要使用CSS。

HTML的缺陷:

  1. 不能夠適應多種設備
  2. 要求瀏覽器必須智能化足夠龐大
  3. 數據和顯示沒有分開
  4. 功能不夠強大

CSS 優點:

  1. 使數據和顯示分開
  2. 降低網絡流量
  3. 使整個網站視覺效果一致
  4. 使開發效率提高了(耦合性降低,一個人負責寫html,一個人負責寫css)

比如說,有一個樣式需要在一百個頁面上顯示,如果是html來實現,那要寫一百遍,現在有了css,只要寫一遍。現在,html只提供數據和一些控件,完全交給css提供各種各樣的樣式。

行內樣式

技術分享圖片 View Code

內接樣式

技術分享圖片 View Code

外接樣式-鏈接式

技術分享圖片 View Code

外接樣式-導入式

技術分享圖片 View Code

表單控件 css的三中引入方式css選擇器