如何查詢相關文檔
推薦查詢相關網址:http://devdocs.io/
第一行代碼
div {
width: 500px;
height: 500px;
background-color: red;
}
<!-- 定義了一個長度和高度爲500的正方體 背景顏色紅色 -->
<div>我是div</div>css樣式的繼承
body {
color: blue;
}如果不給標籤添加額外的字體顏色 頁面所有的文字顏色都會設置爲藍色
CSS 常用屬性舉例
| 屬性 | 描述 |
|---|---|
| width | 設置長度 單位px |
| height | 設置高度 單位px |
| float | float: left / right/ none; 讓元素浮動起來 用於佈局 |
| position | absolute/relative/fixed 元素定位 |
| font | 字體格式 |
| background | 背景顏色 / 背景圖象 / 背景重複 / 背景附件 / 背景位置 |
| border | width /style /color 邊框樣式 |
| list-style | 列表樣式 |
| margin | 外邊距 |
| padding | 內邊距 |
| cursor | 光標樣式 |
css float屬性
.left {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
}
<div class="left"></div>
<div class="right"></div>div 本身是塊級標籤 使用兩個div同級時候 兩個div會緊緊相鄰 使用浮動屬性後可以發現兩個div重合
這裏可以認爲第一個div浮起來了 之前緊靠的div發現之前的div不見了就佔領了第一個div的位置
使用浮動會造成的一些問題
.box{
width: 800px;
border: 4px red solid;
margin: 50px auto;
}
.left{
width: 200px;
height: 200px;
background: blue;
float: left;
}
.right{
width: 200px;
height: 200px;
background: gold;
float: right;
}
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>一個父級div中有兩個子div 父級沒有設置高度 兩個子div分別使用了左浮動和有浮動 這時會造成父級的高度塌陷
解決方法:
使用 clear: both;
在添加一個div < div style=”clear: both;”>< /div> 這樣就恢復正常了
表單樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<!-- 換行 -->
<!-- <br/> -->
<!-- action 表單要提交的服務器接口 -->
<!-- methid 表單提交的方式 默認是GET 一般用POST -->
<form id="first" action="" method="">
<!-- 輸入框 placeholder 佔位符 給用戶提示 value 最終要發送給服務器的值
name發送給服務器的-->
<label for="name">用戶名: </label>
<input id="name" type="text" placeholder="請輸入用戶名" name="username" value="">
<br/>
<input type="password" placeholder="請輸入密碼">
<br/>
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="radio" name="gender" value="3">
<br/>
<input type="checkbox" name="inster" value="work">
<input type="checkbox" name="inster" value="play">
<input type="checkbox" name="inster" value="watch">
<br/>
<!-- multiple 上傳多個文件 -->
<input type="file" multiple>
<br/>
<input type="email" >
<br/>
<input type="date" >
<br/>
<input type="search" >
<br/>
<input type="button" value="不要按">
<br/>
<!-- 隱藏屬性 收集一些用戶不需要填寫的信息-->
<input type="hidden" name="type" value="Mac">
<br/>
<input type="submit" value="註冊">
<br/>
<textarea></textarea>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<!-- 清空 -->
<br/>
</form>
<!-- 如果提交按鈕/重置按鈕在form外 點擊按鈕是無效 可以通過 屬性關聯起來 -->
<input form="first" type="reset">
</body>
</html>表格樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{
/* collapse 合併邊框
separate 不合並邊框
*/
border-collapse: collapse;
border: 1px blue solid;
/*不合並邊框的時候 可以讓空的單元格隱藏*/
/*empty-cells: hide;*/
text-align: center;
}
tbody{
/*改變表格垂直居中方式*/
vertical-align: top;
}
</style>
</head>
<body>
<!-- 這裏的 border 和 css中的不一樣 cellspacing 單元格間距 cellpadding 單元格內邊距-->
<table border="1" width="200" height="100" cellspacing="0" cellpadding="10">
<!-- 標題 -->
<!-- <caption></caption> -->
<!-- <thead></thead> -->
<!-- tbody 可以省略 -->
<!-- <tbody> -->
<tr>
<th width="100" height="200">1</th>
<th width="250">2</th>
</tr>
<tr>
<td>11</td>
<td>22</td>
</tr>
<!-- </tbody> -->
</table>
<table border="1" width="280" height="280">
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<!-- <td>1</td> -->
<td colspan="2">2</td>
<!-- <td>3</td> -->
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td colspan="2" rowspan="2">3</td>
<!-- <td>4</td> -->
</tr>
<tr>
<td>1</td>
<td>2</td>
<!-- <td colspan="2">3</td> -->
<!-- <td>4</td> -->
</tr>
</table>
</body>
</html>