今天學(xué)到了什么
1. 樣式的引入
1.1 內(nèi)聯(lián)樣式
了解就行了 不使用
div style="width;100px;height:100px;background:red;"></div>
1.2 外部樣式
盡量用外部樣式
<link rel="stylesheet" href="css/03index.css">
2. 路徑
2.1 絕對(duì)路徑
了解 不會(huì)使用
<img src="D:\PS\mayunPro\Courseware\DAY03\課后作業(yè)\images\data_image.png" alt="">
2.2 相對(duì)路徑
<img src="images/data_image.png" alt="">
2.3 讀上級(jí)/兄弟目錄
../ 讀上級(jí)目錄
<img src="../images/data_image.png" alt="">
與圖片在同一目錄下，即兄弟目錄
<img src="data_image.png" alt="">
3. width，height繼承
3.1 子元素絕對(duì)定位，不會(huì)繼承父元素的height
.parent{
width: 100px;
height: 100px;
background: red;
position: relative;
}
.child{
width: 50px;
background: green;
position: absolute;
}
子不繼父.png
3.2 當(dāng)子元素絕對(duì)定位時(shí)，父元素不會(huì)獲取子元素的高度
.parent{
width: 200px;
background: red;
}
.child{
position: absolute;
width: 100px;
height: 100px;
background: green;
}
父不繼子height.png
4. margin的一些問(wèn)題
子元素作為父元素的第一個(gè)元素，給它margin-top，子元素不會(huì)移動(dòng)而父元素向下移動(dòng)
如何解決： 使子元素讓出大哥的位置，不成為第一個(gè)元素，即添加一個(gè)偽元素
.row:before{
content: "";
display: table;
}
5. 表單
5.1 簡(jiǎn)單登錄表單
lable和input結(jié)合使用 要點(diǎn)：lable的for的值要和input的id一樣
<h4>一個(gè)簡(jiǎn)單的登錄表單</h4>
<form action="">
<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>
<div>
簡(jiǎn)單登錄表單.png
5.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>
單選框.png
5.3 復(fù)合選框
type=checkbox 復(fù)合選框
<div>
<input type="checkbox">足球 <input type="checkbox">籃球
<input type="checkbox">排球
</div>
復(fù)選框.png
5.4 下拉選框
<div>
<select>
<option value="武昌區(qū)">武昌區(qū)</option>
<option value="洪山區(qū)" selected>洪山區(qū)</option>
<option value="青山區(qū)">青山區(qū)</option>
</select>
</div>
下拉選框.png
5.5 文本框
<textarea placeholder="請(qǐng)吐槽" cols="30" rows="10"></textarea>
文本框.png
6. text，btn的區(qū)別
input是按鈕的形態(tài)下,給border,padding不會(huì)改變它的width,height
加border不改變width和heigth.png
<style>
*{margin:0;padding:0}
input{
border:1px solid #333;
width:100px;
height:40px;
}
.btn{
width:102px;
height:42px;
}
/* input是按鈕的形態(tài)下,給border,padding不會(huì)改變它的width,height */
</style>
</head>
<body>
<!-- 輸入框和按鈕的區(qū)別 -->
<input type="text"> <br>
<input type="submit" class="btn">
<button type="submit">提交</button>
</body>
</html>
今天還有什么不會(huì)
