css之表格,表單

Yven發表於2018-09-28
CSS

一.表格

1.定義

表格由<table>標籤來定義.每個表格均有若干行(由tr標籤定義),每行被分割為若個單元格(由td標籤定義).字母td指表格資料(table data),即資料單元格的內容.資料單元格可以包含文字、圖片、列表、段落、表單、水平線等待

2.基本結構

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table>

3.表格標籤

<table>      定義表格
<th>         定義表格的表頭
<tr>         定義表格的行
<td>         定義表格單元格
<caption>    定義表格標題
<colgroup>   定義表格列的組
<thead>      定義表格的頁首
<tbody>      定義表格的主體
<tfoot>      定義表格的頁尾

4.常用屬性

table
-- border: <integer>：表格外框及單元格外框
-- cellpadding: <integer>：單元格的內邊距
-- cellspacing: <integer>：單元格之間的間距，最小為0
-- rules：rows、cols、groups、all：邊框規則

td
-- rowspan: <integer>：行合併(該單元格佔多行)
-- colspan: <integer>：列合併(該單元格佔多列)
-- width: : <integer>%：列寬佔比

caption
-- align: left | right | top | bottom：標題方位

5.表格實現垂直水平居中

.sup {
    width: 200px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
}
.sub {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

二.表單

1.概念

表單是一個包含表單元素的區域.
表單元素是允許使用者在表單中輸入內容,比如:文字域(textarea)、下拉選單、單選框(radio-buttons)等等

2.基本結構

<form>
    <label>輸入框</label><input type="text" />
    <button type="submit">提交</button>
</form>

3.常用型別標籤

  • 文字框
<input type="text" name="username" placeholder="請輸入使用者名稱" size="10" maxlength="15">
  • 密文框
<input type="password" name="pwd" placeholder="請輸入密碼" maxlength="12">
  • 單選框
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
  • 核取方塊
<input type="checkbox" name="hobby" value="basketball"> 籃球
<input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="ping-pong" checked> 乒乓球 
<input type="checkbox" name="hobby" value="baseball"> 棒球
  • 下拉選項
<select name="major">
    <option value="computer">計算機</option>
    <option value="archaeology">考古學</option>
    <option value="medicine" selected>醫學</option>
    <option value="Architecture">建築學</option>
    <option value="Biology">生物學</option>
</select>

<!--多選-->
<select name="major" multiple>
    <option value="computer">計算機</option>
    <option value="archaeology">考古學</option>
    <option value="medicine">醫學</option>
    <option value="Architecture">建築學</option>
    <option value="Biology">生物學</option>
</select>
  • 多行文字輸入
<textarea name="content"></textarea>
<textarea name="content" cols="30" rows="10"></textarea>
  • 按鈕
<!--提交按鈕-->
<input type="submit" value="提交">
<button>提交</button>
<button type="submit">提交</button>

<!--重置按鈕-->
<input type="reset" value="重置">
<button type="reset">重置</button>

<!--普通按鈕-->
<input type="button" value="按鈕">
<button type="button">按鈕</button>

4、全域性屬性

  • required：必填項
  • pattern：正則

5.偽類

  • focus:獲得焦點

三.音訊

1.基本語法

<audio id="ad" src="media/juhua.mp3" autoplay controls loop>如果瀏覽器不支援H5新標籤audio，此段話將被顯示出來</audio>

2.常用屬性

屬性 值 描述
autoplay autoplay 自動播放
controls controls 音訊控制元件
loop loop 迴圈
muted muted 靜音
preload auto metadata none 預載入
src URL 音訊源

四.視訊

1.基本語法

<video width="672" height="378" controls poster="img/poster.png">
        <source src="media/HTML5的前世今生.mp4" type="video/mp4"></source>
        當前瀏覽器不支援video直接播放
</video>

2.常用屬性

屬性 值 描述
width pixels 寬度
height pixels 高度
controls controls 視訊控制元件
autoplay autoplay 自動播放
loop loop 迴圈播放
muted muted 靜音
poster URL 影像佔位
src URL 視訊源
preload auto metadata none 預載入
  • source屬性
屬性 值 描述
src URL 視訊源
type MIME_type MIME型別

五.形變

平移
transform:translate(x,y) | translateX(num) | translateY(num)
縮放
transform:scale(x,y) | scaleX(num) | scaleY(num)
旋轉
transform: rotateX(角度) | rotateY(角度) | rotateZ(角度);
傾斜
transform:skew(角度x,角度y) | skewX(角度x) | skewY(角度y)

六.瀏覽器適配

  • -o-：Opera瀏覽器
  • -ms-：IE瀏覽器
  • -moz-：Firefox瀏覽器
  • -webkit-：Chrome、Safari、Android瀏覽器
徑向漸變
.box {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: -webkit-radial-gradient(red, yellow);
}

倒影
-webkit-box-reflect: below | above | left | right;

相關文章