CSS一些樣式應用

標籤：布爾類型   縮排   search   使用者   input   效果   置中   enter   方向   

列表

ul：有序列表 ol：無序列表（oreder list） 
以上兩個列表的子項目，只能是li（區塊層級元素） 
dl>dt , dd (自動縮排)

<dl> <dt> </dt> <dd> </dd></dl>

表格 
table>tr（行）>td（列） 
colspan合并列 
rowspan合并行 
列表語義化 
table>caption>(thead>th)+(tbody>tr>tr)+(tfooter>tr>td)

表單 
form

<form action=" " method=" "> <input type=" " name=" " > </form> action表示提交地址 method表示提交方式：get會在提示地址後顯示輸入內容 post：不會在提交地址後顯示輸入的內容

input：輸入框（form的子項目） 
type取值： text(文本) 密碼框

單選框 
1.type取值為radio 2.name取值一致 3.給定value屬性值（2和3一般是後台資料庫管理員(DBA)給的） 
例：

<p><input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="male">女</p>

多選框 
type取值為checkbox 
name的取值要一致，才會提交正確的內容 
checked為布爾類型（值和屬性一致） 
例：

<p><input type="checkbox" name="gender" checked(預設選中)> .........</p>

select下拉式清單（下拉式功能表） 
option表示可選項，name屬性是對後面的儲存關鍵詞(一般由DBA提供) value的值是會提交到後台選中的資料 
例：

<p>省份 <select name="province" > <option value="sichuan">四川省</option> <option value="sichuan">四川省</option> <option value="sichuan">四川省</option> <option value="sichuan">四川省</option> </select></p>

多行文字框

<texttarea cd="" row=""><input type="buttom" value="..."> type取值buttom表示普通按鈕，即只有按鈕的樣式，沒有其他功能（用於JS）提交按鈕<input type="submit">預設中文的 提交<input type="submit" valiue="submit">英文的提交 sunmitbuttom作為元素名稱，則表示該元素是具有提交功能的按鈕<buttom>提交</buttom>type取值reset表示重設按鈕input的required屬性是表示該輸入框是必填項，如果沒有添加任何內容，則會提示"請填寫該欄位"(不同瀏覽器顯示不同)

email輸入郵箱

請輸入你的郵箱<input tupe="email">

設定輸入內容的個數 maxlength

<p>請輸入手機號<input type="text" name="tdl" maxlength="11"></p>

文字和輸入框關聯 
lable 
1.在input中設定 id 2.lable中 for 屬性值與input中的id值一致 
例：

<p><lable for="user">請輸入使用者名稱</lable><input type="text" name="username" id="user"></p>

在輸入框中的預設值和提示資訊（加在input標籤欄裡） 
預設值value屬性 
提示資訊使用placeholder屬性 
為了實現註冊表單的對齊 
可以把lable標籤display設定為inline-block； 
給固定寬度，再設定文本對齊（text-algin:left / center / right）

輸入框出生年月

<lable for="bir">出生年月日</lable><input type=:date id="bir">

輸入框顏色

<input type="color">

選擇上傳檔案

<input type="file">

輸入框內提示資訊顏色變化

input::-webkit-input-placeholder{ color:red; }

輸入框，焦點框 去除，通常用於搜尋方塊

outline:none;<p>search</p><input type="search">

transform變形 
transform:scale( ); 可兩個參數，可一個，一個時xy同比例，兩個數，第一個x軸，第二個y軸 
scale函數來設定縮放的；取值0~正無窮（預設值1） 
transform-orign設定縮放點 transfor-orign:__px, __px; 
第一個值水平方向，第二個值垂直方向 
transform-rotate 設定旋轉度 
transform-rotate(45deg); 
transform-rotatez：中心點（預設值） 
transform-rotatex：x軸方向 
transform-rotatey：y軸方向 
transform:skew( ) 設定傾斜角度 
45deg表示順時針旋轉45度 
-45deg表示逆時針旋轉45度

設定區塊移動的位移量 
第一個參數是x軸的方向，第二個參數是y軸方向 （像素正負均可）

transform:translate(__px,__px);

transform縮寫每個函數之間的分隔字元為空白格

transform: rotate( ) scale( ) skew( );

transition是一個屬性的一個值變化到另外一個值的過程

transition: all linear __s;

邊框從中心向兩邊進行過渡撐滿整個包含塊 
1.設定子項目的位置，父級元素水平置中位置，即 nav{ left:50%} 
2.在父元素被hover的時候，子項目位置要與父元素左邊框對齊 
即footer:hover>nav{left:0}; 
（註：1和2主要實現邊框從水平中心點開始向左側進行過渡） 
3.設定子項目的寬為0；即 nav{width:0}; 
4.在父級元素被hover的時候子項目的寬為100% 
即：footer:hover>nav{width:100%}; 
（3和4主要實現的是邊框從水平中心點開始向右側進行過渡的效果）

 

CSS一些樣式應用