1.css樣式
1.內(nèi)聯(lián)樣式
如
<div style="width:100px;height:100px;background: red"></div>
不要這樣寫(xiě)！Ｋ涮睢６」А！Ｕ铡Ｉ馈！６袷亍５谙住！Ｍ酶邸Ｓ购痢！Ｉ婪ｌ摺！？瞥蕖Ｔ丶选！Ｍ握弧蔫慧！
2.內(nèi)部樣式
<style>格式
就是以前一直用的那個(gè)
3.外部樣式表
如
<link rel="stylesheet" href="css/index.css">
2.路徑
1.相對(duì)路徑
叔伯級(jí)的前加 ..
一直以來(lái)用的那種就行
2.絕對(duì)路徑
圖片位置
別用就完了
3.定位
子元素絕對(duì)定位,不會(huì)繼承父元素的width
絕對(duì)定位就沒(méi)繼承width了
4.bug
1.margin-top的
子元素作為父元素的第一個(gè)元素,給它margin-top,沒(méi)用它的元素向下移動(dòng)
解決方法
父元素加個(gè)before
.row:before{
content:"";
display: table;
}
2.margin重合的問(wèn)題
.one{
width:100px;
height:100px;
background:red;
margin-bottom: 150px;
}
.two{
margin-top: 100px;
width:100px;
height:100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
1.png
5.表單
1.簡(jiǎn)單的登錄表單
label和input結(jié)合使用 要點(diǎn):label的for的值要和input的id一樣
<div>
<label for="user">用戶名</label><input type="text" id="user">
</div>
<div>
<label for="pwd">密碼</label><input type="password" id="pwd">
</div>
<div>
<input type="submit" value="提交">
</div>
2.png
2.單選框
技術(shù)要點(diǎn):name值相同
<div>
<h4>性別</h4>
<label for="male">男</label><input type="radio" id="male" name="sex">
<label for="female">女</label><input type="radio" id="female" name="sex">
</div>
3.png
3.復(fù)合選框
type=checkbox 復(fù)合選框
<div>
<input type="checkbox">足球
<input type="checkbox">籃球
<input type="checkbox">羽毛球
</div>
4.png
4.下拉選框
<select >
<option value="武昌區(qū)">武昌區(qū)</option>
<option value="洪山區(qū)" selected>洪山區(qū)</option>
<option value="青山區(qū)">青山區(qū)</option>
</select>
5.png
5.
<textarea placeholder="請(qǐng)留言" cols="30" rows="10"></textarea>
6.png
6. 大于,空格,大于 的字符
< >
7.text,btn的區(qū)別
輸入框和按鈕的區(qū)別
input是按鈕的形態(tài)下,給border,padding不會(huì)改變它的width,height
