1.樣式的引入
- 內(nèi)聯(lián)樣式表
<style>
div{
width: 100px;
height: 100px;
background: red;
}
</style>
- 內(nèi)聯(lián)樣式 ---<不要寫>
<div style="width:100px; height:200px; background:green;"></div>
- 外部樣式表
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="test"></div>
</body>
2.路徑
路徑
- 相對路徑
- 絕對路徑 不要用
- 上級目錄
- 同級目錄
<img src="images/02.png" alt="相對路徑">
<img src="D:\project\練習(xí)day7\Notebook\images\about.jpg" alt="絕對路徑">
<img src="../images/about.jpg" alt="上級目錄">
<img src="02.png" alt="同級目錄">
3.margin
- 子元素作為父元素的第一個元素鹃共，給它margin-top驶拱，沒用它的元素向下移動
/*如何解決 加偽元素*/
.row:before{
content: "";
display: table;
}
- margin 重合,相同取中間,不同取最大
<div class="one"></div>
<div class="two"></div>
.one{
width: 100px;
height: 100px;
background: red;
margin-bottom: 100px;
}
.two{
width: 100px;
height: 100px;
background: blue;
margin-top: 200px;
}
4.表單
- 登錄 <h4>一個簡單的登錄表單</h4>
label和input結(jié)合應(yīng)用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" id="提交">
</div>
- 單選框 技術(shù)要點:name值相同
<h4>性別</h4>
<div>
</form><label for="male">男</label><input type="radio" id="male" name="sex">
</form><label for="female">女</label><input type="radio" id="female" name="sex">
</div>
- type=checkbox 復(fù)合選框
<div>
<input type="checkbox">足球
<input type="checkbox">籃球
<input type="checkbox">羽毛球
</div>
- 下拉選框
<div>
<select>
<option value="武昌區(qū)">武昌區(qū)</option>
<option value="洪山區(qū)" selected>洪山區(qū)</option>
<option value="青山區(qū)">青山區(qū)</option>
</select>
</div>
- 文本域
<textarea placeholder="請吐槽" id="30" cols="30" rows="10"></textarea>
- 特殊符號
小于蓝纲；空格晌纫；大于
<div>< ></div>
