#表單
- form:表單的標籤
- action:表示提交地址
- method:表示提交方式
- get:表示會在提交地址後顯示輸入的內容
- post 不會在提交地址後顯示輸入的內容
- input:輸入框(form的子元素.是空元素.自閉和元素)
- type的取值
- 1 text(文本)
- 2 password(密碼框)
- 3 button(普通的按鈕,只有按鈕的樣式,之後的j s要學,button做爲標籤名稱,則表示該元素
是具備提交功能的按鈕。
- 4 submit ( 表示提交按鈕 )
- 5 reset ( 表示重置按鈕)
# 單選框
1.type取值爲radio
2.name的值要一致
3.給定value屬性值
注:2和3通常是後臺數據庫管理員(DBA)給的。
#多選框
多選框:
- type取值爲checkbox
- name的取值要一致,纔會提交正確的內容
# < label>與input的關聯
label標籤實現元素內容與輸入框(input)相關聯
注:他們兩個都是行內標籤
實施步驟:
1. 在input中設置id
2. label中for屬性值與input中id值一致
爲了實現註冊表單的對齊方式,有如下方法
1. 能夠把label標籤display設置爲inline-block;
2. 給固定寬度,再設置文本對齊(text-align:left/center/right)
- 設置默認值使用value屬性,再寫checked就是默認的值
- 設置提示信息使用 placeholder屬性
- required表示是必填的屬性,若是沒有添加任何內容,則會提示「請填寫此字段」(不一樣瀏覽器樣式不一樣)
- max length 設置輸入內容的個數
#下拉菜單
- select下拉列表(下拉菜單),他是一個行內標籤
- name屬性,是對於後面的存儲關鍵詞(通常是DBA提供)
- option表示可選項
- value的值是提交到後臺選中的數據
#其餘
- input: : -webkit-input-placeholder{color:blue;},這是設置輸入框提示信息樣式的,-webkit-是前綴
- 去除焦點框,一般用於搜索框, outline: none;
# transform(變形)
- scale函數來設置縮放的,默認值是1.
1. 能夠2個參數也能夠1個參數
2. 當給1個參數時,表示X Y軸縮放比例一致
3. 給2個參數時,第1參數表明X軸的縮放,第2個值表明Y軸的縮放
- transform-origin設置縮放的原點
第1個值是水平方向
第2個值是垂直方向
- transform:rotate()設置旋轉角度
1.rotateZ:中心點(默認值)
2.rotateX:X軸方向旋轉
3. rotateY:Y軸方向旋轉
45deg表示順時針旋轉45度
-45deg表示逆時針旋轉45度
- transform:skew()設置傾斜角度
1. 45deg表示逆時針旋轉45度
2. 45deg表示順時針旋轉45度
- transform: translate(100px,10px); 設置區塊移動的偏移量
1. 第1個參數是X軸方向
2. 第2個參數是Y軸方向
3. 像素值正、負都可
-transform的縮寫,每一個函數之間的空格隔開,transform: rotate() scale() skew() ;
- transition:表示過渡,他是一個值變化到另外一個值的過程,他們的屬性值要相同
- transition-delay 表示一個值變化完,下個值再變化的拖延
- 邊框從中心向兩邊進行過渡撐滿整個包含塊
一、設置子元素的位置,父級元素水平居中位置。
即nav{left:50%;}
二、在父級元素被hover的時候子元素的位置要與父元素左邊框對齊
即 footer:hover>nav{left:0;}
注:1和2主要實現的是邊框從水平中心點開始向左側進行過渡。
三、設置子元素的寬爲0;
即nav{width:0;}
四、在父級元素被hover的時候子元素的寬爲100%
即 footer:hover>nav{width:100%;}
注:3和4主要實現的是邊框從水平中心點開始向右側進行過渡效果。