文檔流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
文檔流
文檔流處在網頁的最底層，它表示的是一個頁面中的位置，
我們所創建的元素默認都處在文檔流中
元素在文檔流中的特點
塊元素
1.塊元素在文檔流中會獨佔一行，塊元素會自上向下排列。
2.塊元素在文檔流中默認寬度是父元素的100%
3.塊元素在文檔流中的高度默認被內容撐開
內聯元素
1.內聯元素在文檔流中只佔自身的大小，會默認從左向右排列，
如果一行中不足以容納所有的內聯元素，則換到下一行，
繼續自左向右。
2.在文檔流中，內聯元素的寬度和高度默認都被內容撐開
-->
<!--
當塊元素的寬度的值爲auto時，此時指定內邊距不會影響可見框的大小，
而是會自動修改寬度，以適應內邊距
-->
<div style="background-color: #bfa;">
<div style="height: 50px;"></div>
</div>
<div style="width: 100px; height: 100px; background-color: #ff0;"></div>
<span style="background-color: yellowgreen;">我是一個span</span>
<span style="background-color: yellowgreen;">我是一個span</span>
<span style="background-color: yellowgreen;">我是一個span</span>
<span style="background-color: yellowgreen;">我是一個span</span>
<span style="background-color: yellowgreen;">我是一個span</span>
<span style="background-color: yellowgreen;">我是一個span</span>
</body>
</html>
浮動1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 600px;
height: 200px;
background-color: red;
/*
* 塊元素在文檔流中默認垂直排列，所以這個三個div自上至下依次排開，
* 如果希望塊元素在頁面中水平排列，可以使塊元素脫離文檔流
* 使用float來使元素浮動，從而脫離文檔流
* 可選值：
* none，默認值，元素默認在文檔流中排列
* left，元素會立即脫離文檔流，向頁面的左側浮動
* right，元素會立即脫離文檔流，向頁面的右側浮動
*
* 當爲一個元素設置浮動以後（float屬性是一個非none的值），
* 元素會立即脫離文檔流，元素脫離文檔流以後，它下邊的元素會立即向上移動
* 元素浮動以後，會盡量向頁面的左上或這是右上漂浮，
* 直到遇到父元素的邊框或者其他的浮動元素
* 如果浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素
* 浮動的元素不會超過他上邊的兄弟元素，最多最多一邊齊
*/
float: left;
}
.box2{
width: 600px;
height: 200px;
background-color: yellow;
float: left;
}
.box3{
width: 200px;
height: 200px;
background-color: green;
float: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
浮動2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
/*
* 浮動的元素不會蓋住文字，文字會自動環繞在浮動元素的周圍，
* 所以我們可以通過浮動來設置文字環繞圖片的效果
*/
/*box1向左浮動*/
float: left;
}
.p1{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<p class="p1">
在我的後園，可以看見牆外有兩株樹，一株是棗樹，還有一株也是棗樹。
這上面的夜的天空，奇怪而高，我生平沒有見過這樣奇怪而高的天空。他彷彿要離開人間而去，使人們仰面不再看見。然而現在卻非常之藍，閃閃地䀹着幾十個星星的眼，冷眼。他的口角上現出微笑，似乎自以爲大有深意，而將繁霜灑在我的園裏的野花草上。
我不知道那些花草真叫什麼名字，人們叫他們什麼名字。我記得有一種開過極細小的粉紅花，現在還開着，但是更極細小了，她在冷的夜氣中，瑟縮地做夢，夢見春的到來，夢見秋的到來，夢見瘦的詩人將眼淚擦在她最末的花瓣上，告訴她秋雖然來，冬雖然來，而此後接着還是春，蝴蝶亂飛，蜜蜂都唱起春詞來了。她於是一笑，雖然顏色凍得紅慘慘地，仍然瑟縮着。
棗樹，他們簡直落盡了葉子。先前，還有一兩個孩子來打他們，別人打剩的棗子，現在是一個也不剩了，連葉子也落盡了。他知道小粉紅花的夢，秋後要有春；他也知道落葉的夢，春後還是秋。他簡直落盡葉子，單剩乾子，然而脫了當初滿樹是果實和葉子時候的弧形，欠伸得很舒服。但是，有幾枝還低亞着，護定他從打棗的竿梢所得的皮傷，而最直最長的幾枝，卻已默默地鐵似的直刺着奇怪而高的天空，使天空閃閃地鬼䀹眼；直刺着天空中圓滿的月亮，使月亮窘得發白。
鬼䀹眼的天空越加非常之藍，不安了，彷彿想離去人間，避開棗樹，只將月亮剩下。然而月亮也暗暗地躲到東邊去了。而一無所有的乾子，卻仍然默默地鐵似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各樣地䀹着許多蠱惑的眼睛。
哇的一聲，夜遊的惡鳥飛過了。
</p>
</body>
</html>
浮動3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
/*
* 在文檔流中，子元素的寬度默認佔父元素的全部
*/
background-color: #bfa;
/*
* 當元素設置浮動以後，會完全脫離文檔流.
* 寬度設置auto的塊元素脫離文檔流以後，寬度都被內容撐開
*/
/*float: left;*/
}
.s1{
/*
* 開啓span的浮動
* 內聯元素脫離文檔流以後會變成塊元素（這時就可以設置高度和寬度了）
*/
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">a</div>
<span class="s1">hello</span>
</body>
</html>
高度塌陷
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1{
/*爲box1設置一個邊框*/
border: 10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
/*
* 在文檔流中，父元素的高度默認是被子元素撐開的，
* 也就是子元素多高，父元素就多高。
* 但是當爲子元素設置浮動以後，子元素會完全脫離文檔流，
* 此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。
* 由於父元素的高度塌陷了，則父元素下的所有元素都會向上移動，這樣將會導致頁面佈局混亂。
*
* 所以在開發中一定要避免出現高度塌陷的問題,
* 我們可以將父元素的高度寫死，以避免塌陷的問題出現，
* 但是一旦高度寫死，父元素的高度將不能自動適應子元素的高度，所以這種方案是不推薦使用的。
*/
/*爲子元素設置向左浮動*/
float: left;
}
.box3{
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
解決高度塌陷1（開啓BFC）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1{
border: 10px red solid;
/*
* 根據W3C的標準，在頁面中元素都一個隱含的屬性叫做Block Formatting Context
* 簡稱BFC，該屬性可以設置打開或者關閉，默認是關閉的。
* 當開啓元素的BFC以後，元素將會具有如下的特性：
* 1.父元素的垂直外邊距不會和子元素重疊
* 2.開啓BFC的元素不會被浮動元素所覆蓋
* 3.開啓BFC的元素可以包含浮動的子元素
*
* 如何開啓元素的BFC
* 1.設置元素浮動
* - 使用這種方式開啓，雖然可以撐開父元素，但是會導致父元素的寬度丟失
* 而且使用這種方式也會導致下邊的元素上移，不能解決問題
* 2.設置元素絕對定位
* 3.設置元素爲inline-block
* - 可以解決問題，但是會導致寬度丟失，不推薦使用這種方式
* 4.將元素的overflow設置爲一個非visible的值
*
* 推薦方式：將overflow設置爲hidden是副作用最小的開啓BFC的方式。
*/
/*overflow: hidden;*/
/*
*但是在IE6及以下的瀏覽器中並不支持BFC，所以使用這種方式不能兼容IE6。
* 在IE6中雖然沒有BFC，但是具有另一個隱含的屬性叫做hasLayout，
* 該屬性的作用和BFC類似，所在IE6瀏覽器可以通過開hasLayout來解決該問題
* 開啓方式很多，我們直接使用一種副作用最小的：
* 直接將元素的zoom設置爲1即可
*
*/
/*
* zoom表示放大的意思，後邊跟着一個數值，寫幾就將元素放大幾倍
* zoom:1表示不放大元素，但是通過該樣式可以開啓hasLayout
* zoom這個樣式，只在IE中支持，其他瀏覽器都不支持
*/
zoom:1;
overflow: hidden;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box3{
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
清除浮動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: yellow;
/*
* 設置box1向左浮動
*/
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*
* 由於受到box1浮動的影響，box2整體向上移動了100px
* 我們有時希望清除掉其他元素浮動對當前元素產生的影響，這時可以使用clear來完成功能
* clear可以用來清除其他浮動元素對當前元素的影響
* 可選值：
* none，默認值，不清除浮動
* left，清除左側浮動元素對當前元素的影響
* right，清除右側浮動元素對當前元素的影響
* both，清除兩側浮動元素對當前元素的影響
* 清除對他影響最大的那個元素的浮動
*/
/*
* 清除box1浮動對box2產生的影響
* 清除浮動以後，元素會回到其他元素浮動之前的位置
*/
/*clear: left;*/
float: right;
}
.box3{
width: 300px;
height: 300px;
background-color: skyblue;
clear: both;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
解決高度塌陷2（在高度塌陷的父元素的最後，添加一個空白的div）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/*
* 解決高度塌陷方案二：
* 可以直接在高度塌陷的父元素的最後，添加一個空白的div，
* 由於這個div並沒有浮動，所以他是可以撐開父元素的高度的，
* 然後在對其進行清除浮動，這樣可以通過這個空白的div來撐開父元素的高度，
* 基本沒有副作用
*
* 使用這種方式雖然可以解決問題，但是會在頁面中添加多餘的結構。
*/
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear"></div>
</div>
</body>
</html>
解決高度塌陷問題3（通過after僞類，選中box1的後邊）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/*通過after僞類，選中box1的後邊*/
/*
* 可以通過after僞類向元素的最後添加一個空白的塊元素，然後對其清除浮動，
* 這樣做和添加一個div的原理一樣，可以達到一個相同的效果，
* 而且不會在頁面中添加多餘的div，這是我們最推薦使用的方式，幾乎沒有副作用
*/
.clearfix:after{
/*添加一個內容*/
content: "";
/*轉換爲一個塊元素*/
display: block;
/*清除兩側的浮動*/
clear: both;
}
/*
* 在IE6中不支持after僞類,
* 所以在IE6中還需要使用hasLayout來處理
*/
.clearfix{
zoom:1;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
相對定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
* 定位：
* - 定位指的就是將指定的元素擺放到頁面的任意位置
* 通過定位可以任意的擺放元素
* - 通過position屬性來設置元素的定位
* -可選值：
* static：默認值，元素沒有開啓定位
* relative：開啓元素的相對定位
* absolute：開啓元素的絕對定位
* fixed：開啓元素的固定定位（也是絕對定位的一種）
*/
/*
* 當元素的position屬性設置爲relative時，則開啓了元素的相對定位
* 1.當開啓了元素的相對定位以後，而不設置偏移量時，元素不會發生任何變化
* 2.相對定位是相對於元素在文檔流中原來的位置進行定位
* 3.相對定位的元素不會脫離文檔流
* 4.相對定位會使元素提升一個層級
* 5.相對定位不會改變元素的性質，塊還是塊，內聯還是內聯
*/
position: relative;
/*
* 當開啓了元素的定位（position屬性值是一個非static的值）時，
* 可以通過left right top bottom四個屬性來設置元素的偏移量
* left：元素相對於其定位位置的左側偏移量
* right：元素相對於其定位位置的右側偏移量
* top：元素相對於其定位位置的上邊的偏移量
* bottom：元素相對於其定位位置下邊的偏移量
*
* 通常偏移量只需要使用兩個就可以對一個元素進行定位，
* 一般選擇水平方向的一個偏移量和垂直方向的偏移量來爲一個元素進行定位
*/
/*left: 100px;
top: 200px;*/
left: 200px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
.s1{
position: relative;
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span class="s1">我是一個span</span>
</body>
</html>
絕對定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
* 當position屬性值設置爲absolute時，則開啓了元素的絕對定位
*
* 絕對定位：
* 1.開啓絕對定位，會使元素脫離文檔流
* 2.開啓絕對定位以後，如果不設置偏移量，則元素的位置不會發生變化
* 3.絕對定位是相對於離他最近的開啓了定位的祖先元素進行定位的（一般情況，開啓了子元素的絕對定位都會同時開啓父元素的相對定位）
* 如果所有的祖先元素都沒有開啓定位，則會相對於瀏覽器窗口進行定位
* 4.絕對定位會使元素提升一個層級
* 5.絕對定位會改變元素的性質，
* 內聯元素變成塊元素，
* 塊元素的寬度和高度默認都被內容撐開
*/
position: absolute;
/*left: 100px;
top: 100px;*/
}
.box3{
width: 300px;
height: 300px;
background-color: yellowgreen;
}
.box4{
width: 300px;
height: 300px;
background-color: orange;
/*開啓box4的相對定位*/
/*position: relative;*/
}
.s1{
width: 100px;
height: 100px;
background-color: yellow;
/*開啓絕對定位*/
position: absolute;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box5">
<div class="box4">
<div class="box2"></div>
</div>
</div>
<div class="box3"></div>
<span class="s1">我是一個span</span>
</body>
</html>
固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
* 當元素的position屬性設置fixed時，則開啓了元素的固定定位
* 固定定位也是一種絕對定位，它的大部分特點都和絕對定位一樣
* 不同的是：
* 固定定位永遠都會相對於瀏覽器窗口進行定位
* 固定定位會固定在瀏覽器窗口某個位置，不會隨滾動條滾動
*
* IE6不支持固定定位
*/
position: fixed;
left: 0px;
top: 0px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body style="height: 5000px;">
<div class="box1"></div>
<div class="box4" style="width: 300px; height: 300px; background-color: orange; position: relative;">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
層級
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 2;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*開啓絕對定位*/
position: absolute;
/*設置偏移量*/
top: 100px;
left: 100px;
/*
* 如果定位元素的層級是一樣，則下邊的元素會蓋住上邊的
* 通過z-index屬性可以用來設置元素的層級
* 可以爲z-index指定一個正整數作爲值，該值將會作爲當前元素的層級
* 層級越高，越優先顯示
*
* 對於沒有開啓定位的元素不能使用z-index
*/
z-index: 25;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*position: relative;
z-index: 3;*/
position: absolute;
top: 200px;
left: 200px;
z-index: 30;
/*
* 設置元素的透明背景
* opacity可以用來設置元素背景的透明，
* 它需要一個0-1之間的值
* 0 表示完全透明
* 1 表示完全不透明
* 0.5 表示半透明
*/
opacity: 0.5;
/*
* opacity屬性在IE8及以下的瀏覽器中不支持
* IE8及以下的瀏覽器需要使用如下屬性代替
* alpha(opacity=透明度)
* 透明度，需要一個0-100之間的值
* 0 表示完全透明
* 100 表示完全不透明
* 50 半透明
*
* 這種方式支持IE6，但是這種效果在IE Tester中無法測試
*/
filter: alpha(opacity=50);
}
.box4{
width: 200px;
height: 200px;
background-color: orange;
/*開啓相對定位*/
position: relative;
/*
* 父元素的層級再高，也不會蓋住子元素
*/
z-index: 20;
top: 500px;
}
.box5{
width: 100px;
height: 100px;
background-color: skyblue;
/*開啓絕對定位*/
position: absolute;
z-index: 10;
}
</style>
</head>
<body style="height: 5000px;">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
</div>
</body>
</html>
背景1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 1024px;
height: 724px;
margin: 0 auto;
/*設置背景樣式*/
background-color: #bfa;
/*
* 使用background-image來設置背景圖片
* - 語法：background-image:url(相對路徑);
*
* - 如果背景圖片大於元素，默認會顯示圖片的左上角
* - 如果背景圖片和元素一樣大，則會將背景圖片全部顯示
* - 如果背景圖片小於元素大小，則會默認將背景圖片平鋪以充滿元素
*
* 可以同時爲一個元素指定背景顏色和背景圖片，
* 這樣背景顏色將會作爲背景圖片的底色
* 一般情況下設置背景圖片時都會同時指定一個背景顏色
*/
background-image:url(img/1.png);
/*
* background-repeat用於設置背景圖片的重複方式
* 可選值：
* repeat，默認值，背景圖片會雙方向重複（平鋪）
* no-repeat ，背景圖片不會重複，有多大就顯示多大
* repeat-x， 背景圖片沿水平方向重複
* repeat-y，背景圖片沿垂直方向重複
*/
background-repeat: repeat-y;
}
</style>
<!--<link rel="stylesheet" type="text/css" href="css/style.css"/>-->
</head>
<body>
<div class="box1"></div>
</body>
</html>
背景2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
height: 500px;
margin: 0 auto;
/*
* 設置一個背景顏色
*/
background-color: #bfa;
/*
* 設置一個背景圖片
*/
background-image: url(img/4.png);
/*
* 設置一個圖片不重複
*/
background-repeat: no-repeat;
/*
* 背景圖片默認是貼着元素的左上角顯示
* 通過background-position可以調整背景圖片在元素中的位置
* 可選值：
* 該屬性可以使用 top right left bottom center中的兩個值
* 來指定一個背景圖片的位置
* top left 左上
* bottom right 右下
* 如果只給出一個值，則第二個值默認是center
*
* 也可以直接指定兩個偏移量，
* 第一個值是水平偏移量
* - 如果指定的是一個正值，則圖片會向右移動指定的像素
* - 如果指定的是一個負值，則圖片會向左移動指定的像素
* 第二個是垂直偏移量
* - 如果指定的是一個正值，則圖片會向下移動指定的像素
* - 如果指定的是一個負值，則圖片會向上移動指定的像素
*
*/
/*background-position: -80px -40px;*/
background-attachment: fixed;
}
body{
background-image: url(img/3.png);
background-repeat: no-repeat;
/*
* background-attachment用來設置背景圖片是否隨頁面一起滾動
* 可選值：
* scroll，默認值，背景圖片隨着窗口滾動
* fixed，背景圖片會固定在某一位置，不隨頁面滾動
*
* 不隨窗口滾動的圖片，我們一般都是設置給body，而不設置給其他元素
*/
background-attachment:fixed ;
}
</style>
</head>
<body style="height: 5000px;">
<div class="box1"></div>
</body>
</html>
背景3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background-image: url(img/2.jpg);
background-repeat: no-repeat;
background-position: center;
/*
* 當背景圖片的background-attachment設置爲fixed時，
* 背景圖片的定位永遠相對於瀏覽器的窗口
*/
background-attachment: fixed;
}
</style>
</head>
<body style="height: 5000px;">
<p>
在我的後園，可以看見牆外有兩株樹，一株是棗樹，還有一株也是棗樹。 這上面的夜的天空，奇怪而高，我生平沒有見過這樣奇怪而高的天空。他彷彿要離開人間而去，使人們仰面不再看見。然而現在卻非常之藍，閃閃地䀹着幾十個星星的眼，冷眼。他的口角上現出微笑，似乎自以爲大有深意，而將繁霜灑在我的園裏的野花草上。 我不知道那些花草真叫什麼名字，人們叫他們什麼名字。我記得有一種開過極細小的粉紅花，現在還開着，但是更極細小了，她在冷的夜氣中，瑟縮地做夢，夢見春的到來，夢見秋的到來，夢見瘦的詩人將眼淚擦在她最末的花瓣上，告訴她秋雖然來，冬雖然來，而此後接着還是春，蝴蝶亂飛，蜜蜂都唱起春詞來了。她於是一笑，雖然顏色凍得紅慘慘地，仍然瑟縮着。 棗樹，他們簡直落盡了葉子。先前，還有一兩個孩子來打他們，別人打剩的棗子，現在是一個也不剩了，連葉子也落盡了。他知道小粉紅花的夢，秋後要有春；他也知道落葉的夢，春後還是秋。他簡直落盡葉子，單剩乾子，然而脫了當初滿樹是果實和葉子時候的弧形，欠伸得很舒服。但是，有幾枝還低亞着，護定他從打棗的竿梢所得的皮傷，而最直最長的幾枝，卻已默默地鐵似的直刺着奇怪而高的天空，使天空閃閃地鬼䀹眼；直刺着天空中圓滿的月亮，使月亮窘得發白。 鬼䀹眼的天空越加非常之藍，不安了，彷彿想離去人間，避開棗樹，只將月亮剩下。然而月亮也暗暗地躲到東邊去了。而一無所有的乾子，卻仍然默默地鐵似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各樣地䀹着許多蠱惑的眼睛。 哇的一聲，夜遊的惡鳥飛過了。 我忽而聽到夜半的笑聲，吃吃地，似乎不願意驚動睡着的人，然而四圍的空氣都應和着笑。夜半，沒有別的人，我即刻聽出這聲音就在我嘴裏，我也即刻被這笑聲所驅逐，回進自己的房。燈火的帶子也即刻被我旋高了。 後窗的玻璃上丁丁地響，還有許多小飛蟲亂撞。不多久，幾個進來了，許是從窗紙的破孔進來的。他們一進來，又在玻璃的燈罩上撞得丁丁地響。一個從上面撞進去了，他於是遇到火，而且我以爲這火是真的。兩三個卻休息在燈的紙罩上喘氣。那罩是昨晚新換的罩，雪白的紙，折出波浪紋的疊痕，一角還畫出一枝猩紅色的梔子。 猩紅的梔子開花時，棗樹又要做小粉紅花的夢，青蔥地彎成弧形了……我又聽到夜半的笑聲；我趕緊砍斷我的心緒，看那老在白紙罩上的小青蟲，頭大尾小，向日葵子似的，只有半粒小麥那麼大，遍身的顏色蒼翠得可愛，可憐。 我打一個呵欠，點起一支紙菸，噴出煙來，對着燈默默地敬奠這些蒼翠精緻的英雄們。 一九二四年九月十五日。
</p>
<p>
在我的後園，可以看見牆外有兩株樹，一株是棗樹，還有一株也是棗樹。 這上面的夜的天空，奇怪而高，我生平沒有見過這樣奇怪而高的天空。他彷彿要離開人間而去，使人們仰面不再看見。然而現在卻非常之藍，閃閃地䀹着幾十個星星的眼，冷眼。他的口角上現出微笑，似乎自以爲大有深意，而將繁霜灑在我的園裏的野花草上。 我不知道那些花草真叫什麼名字，人們叫他們什麼名字。我記得有一種開過極細小的粉紅花，現在還開着，但是更極細小了，她在冷的夜氣中，瑟縮地做夢，夢見春的到來，夢見秋的到來，夢見瘦的詩人將眼淚擦在她最末的花瓣上，告訴她秋雖然來，冬雖然來，而此後接着還是春，蝴蝶亂飛，蜜蜂都唱起春詞來了。她於是一笑，雖然顏色凍得紅慘慘地，仍然瑟縮着。 棗樹，他們簡直落盡了葉子。先前，還有一兩個孩子來打他們，別人打剩的棗子，現在是一個也不剩了，連葉子也落盡了。他知道小粉紅花的夢，秋後要有春；他也知道落葉的夢，春後還是秋。他簡直落盡葉子，單剩乾子，然而脫了當初滿樹是果實和葉子時候的弧形，欠伸得很舒服。但是，有幾枝還低亞着，護定他從打棗的竿梢所得的皮傷，而最直最長的幾枝，卻已默默地鐵似的直刺着奇怪而高的天空，使天空閃閃地鬼䀹眼；直刺着天空中圓滿的月亮，使月亮窘得發白。 鬼䀹眼的天空越加非常之藍，不安了，彷彿想離去人間，避開棗樹，只將月亮剩下。然而月亮也暗暗地躲到東邊去了。而一無所有的乾子，卻仍然默默地鐵似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各樣地䀹着許多蠱惑的眼睛。 哇的一聲，夜遊的惡鳥飛過了。 我忽而聽到夜半的笑聲，吃吃地，似乎不願意驚動睡着的人，然而四圍的空氣都應和着笑。夜半，沒有別的人，我即刻聽出這聲音就在我嘴裏，我也即刻被這笑聲所驅逐，回進自己的房。燈火的帶子也即刻被我旋高了。 後窗的玻璃上丁丁地響，還有許多小飛蟲亂撞。不多久，幾個進來了，許是從窗紙的破孔進來的。他們一進來，又在玻璃的燈罩上撞得丁丁地響。一個從上面撞進去了，他於是遇到火，而且我以爲這火是真的。兩三個卻休息在燈的紙罩上喘氣。那罩是昨晚新換的罩，雪白的紙，折出波浪紋的疊痕，一角還畫出一枝猩紅色的梔子。 猩紅的梔子開花時，棗樹又要做小粉紅花的夢，青蔥地彎成弧形了……我又聽到夜半的笑聲；我趕緊砍斷我的心緒，看那老在白紙罩上的小青蟲，頭大尾小，向日葵子似的，只有半粒小麥那麼大，遍身的顏色蒼翠得可愛，可憐。 我打一個呵欠，點起一支紙菸，噴出煙來，對着燈默默地敬奠這些蒼翠精緻的英雄們。 一九二四年九月十五日。
</p>
</body>
</html>
雪碧圖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 129px;
height: 45px;
background-image:url(img/amazon-sprite_.png) ;
}
.box2{
width: 42px;
height: 30px;
background-image:url(img/amazon-sprite_.png) ;
/*
* 設置偏移量
*/
background-position: -58px -338px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
背景4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height: 5000px;
/*設置一個背景顏色*/
/*background-color: #bfa;*/
/*設置一個背景圖片*/
/*background-image: url(img/3.png);*/
/*設置背景不重複*/
/*background-repeat: no-repeat;*/
/*設置背景圖片的位置*/
/*background-position: center center;*/
/*設置背景圖片不隨滾動條滾動*/
/*background-attachment: fixed;*/
background-color: #bfa;
/*
* background
* - 通過該屬性可以同時設置所有背景相關的樣式
* - 沒有順序的要求，誰在前睡在後都行
* 也沒有數量的要求，不寫的樣式就使用默認值
*/
background: #bfa url(img/3.png) center center no-repeat fixed;
}
</style>
</head>
<body>
</body>
</html>
表格1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--
表格在日常生活中使用的非常的多，比如excel就是專門用來創建表格的工具，
表格就是用來表示一些格式化的數據的，比如：課程表、銀行對賬單
在網頁中也可以來創建出不同的表格。
-->
<!--
在HTML中，使用table標籤來創建一個表格
-->
<table border="1" width="40%" align="center">
<!--
在table標籤中使用tr來表示表格中的一行，有幾行就有幾個tr
-->
<tr>
<!-- 在tr中需要使用td來創建一個單元格，有幾個單元格就有幾個td -->
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<!--
rowspan用來設置縱向的合併單元格
-->
<td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<!--
colspan橫向的合併單元格
-->
<td colspan="2">D3</td>
</tr>
</table>
</body>
</html>
表格2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 設置表格的寬度
*/
table{
width: 300px;
/*居中*/
margin: 0 auto;
/*邊框*/
/*border:1px solid black;*/
/*
* table和td邊框之間默認有一個距離
* 通過border-spacing屬性可以設置這個距離
*/
/*border-spacing:0px ;*/
/*
* border-collapse可以用來設置表格的邊框合併
* 如果設置了邊框合併，則border-spacing自動失效
*/
border-collapse: collapse;
/*設置背景樣式*/
/*background-color: #bfa;*/
}
/*
* 設置邊框
*/
td , th{
border: 1px solid black;
}
/*
* 設置隔行變色
*/
tr:nth-child(even){
background-color: #bfa;
}
/*
* 鼠標移入到tr以後，改變顏色
*/
tr:hover{
background-color: #ff0;
}
</style>
</head>
<body>
<!--
table是一個塊元素
-->
<table>
<tr>
<!--
可以使用th標籤來表示表頭中的內容，
它的用法和td一樣，不同的是它會有一些默認效果
-->
<th>學號</th>
<th>姓名</th>
<th>性別</th>
<th>住址</th>
</tr>
<tr>
<td>1</td>
<td>孫悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>豬八戒</td>
<td>男</td>
<td>高老莊</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女兒國</td>
</tr>
<tr>
<td>1</td>
<td>孫悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>豬八戒</td>
<td>男</td>
<td>高老莊</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>女兒國</td>
</tr>
<tr>
<td>1</td>
<td>孫悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>豬八戒</td>
<td>男</td>
<td>高老莊</td>
</tr>
</table>
</body>
</html>
長表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<!--
有一些情況下表格是非常的長的，
這時就需要將表格分爲三個部分，表頭，表格的主體，表格底部
在HTML中爲我們提供了三個標籤：
thead 表頭
tbody 表格主體
tfoot 表格底部
這三個標籤的作用，就來區分表格的不同的部分，他們都是table的子標籤，
都需要直接寫到table中，tr需要寫在這些標籤當中
thead中的內容，永遠會顯示在表格的頭部
tfoot中的內容，永遠都會顯示錶格的底部
tbody中的內容，永遠都會顯示錶格的中間
如果表格中沒有寫tbody，瀏覽器會自動在表格中添加tbody
並且將所有的tr都放到tbody中，所以注意tr並不是table的子元素，而是tbody的子元素
通過table > tr 無法選中行 需要通過tbody > tr
-->
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合計</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合計</td>
<td>100</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>10.24</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
</tbody>
</table>
</body>
</html>
表格的佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
以前表格更多的情況實際上是用來對頁面進行佈局的，但是這種方式早已被CSS所淘汰了
表格的列數由td最多的那行決定
表格是可以嵌套，可以在td中在放置一個表格
-->
<table border="1" width="100%">
<tr height="100px">
<td colspan="2"></td>
</tr>
<tr height="400px">
<td width="20%"></td>
<td width="80%">
<table border="1" width="100%" height="100%">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
<tr height="100px">
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
完善clearfix（table標籤可以隔離父子元素的外邊距，阻止外邊距的重疊）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 300px;
height: 300px;
background-color: #bfa;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
* 子元素和父元素相鄰的垂直外邊距會發生重疊，子元素的外邊距會傳遞給父元素
* 使用空的table標籤可以隔離父子元素的外邊距，阻止外邊距的重疊
*/
margin-top: 100px;
}
.box3{
border: 10px red solid;
}
.box4{
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
/**
* 解決父子元素的外邊距重疊
*/
/*.box1:before{
content: "";*/
/*
* display:table可以將一個元素設置爲表格顯示
*/
/* display: table;
}
*/
/**
* 解決父元素高度塌陷
*/
/*.clearfix:after{
content: "";
display: block;
clear: both;
}*/
/*
* 經過修改後的clearfix是一個多功能的
* 既可以解決高度塌陷，又可以確保父元素和子元素的垂直外邊距不會重疊
*/
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
</style>
</head>
<body>
<div class="box3 clearfix">
<div class="box4"></div>
</div>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
表單
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
表單的作用就是用來將用戶信息提交給服務器的
比如：百度的搜索框 註冊 登錄這些操作都需要填寫表單
-->
<!--
使用form標籤創建一個表單
form標籤中必須指定一個action屬性，該屬性指向的是一個服務器的地址
當我們提交表單時將會提交到action屬性對應的地址
-->
<form action="target.html">
<!--
使用form創建的僅僅是一個空白的表單，
我們還需要向form中添加不同的表單項
-->
<!--
在表單中可以使用fieldset來爲表單項進行分組，
可以將表單項中的同一組放到一個fieldset中
-->
<fieldset>
<!-- 在fieldset可以使用legend子標籤，來指定組名 -->
<legend>用戶信息</legend>
<!--
使用input來創建一個文本框，它的type屬性是text
如果希望表單項中的數據會提交到服務器中，還必須給表單項指定一個name屬性
name表示提交內容的名字
用戶填寫的信息會附在url地址的後邊以查詢字符串的形式發送給服務器
url地址?查詢字符串
格式：
屬性名=屬性值&屬性名=屬性值&屬性名=屬性值&屬性名=屬性值
在文本框中也可以指定value屬性值，該值將會作爲文本框的默認值顯示
-->
<!--
在html中還爲我們提供了一個標籤，專門用來選中表單中的提示文字的
label標籤
該標籤可以指定一個for屬性，該屬性的值需要指定一個表單項的id值
-->
<label for="um">用戶名</label>
<input id="um" type="text" name="username" /> <br /><br />
<!--
密碼框
- 使用input創建一個密碼框，它的type屬性值是password
-->
<label for="pwd">密碼 </label>
<input id="pwd" type="password" name="password" /> <br /><br />
</fieldset>
<fieldset >
<legend>用戶愛好</legend>
<!--
單選按鈕
- 使用input來創建一個單選按鈕，它的type屬性使用radio
- 單選按鈕通過name屬性進行分組，name屬性相同是一組按鈕
- 像這種需要用戶選擇但是不需要用戶直接填寫內容的表單項，
還必須指定一個value屬性，這樣被選中的表單項的value屬性值將會最終提交給服務器
如果希望在單選按鈕或者是多選框中指定默認選中的選項，
則可以在希望選中的項中添加checked="checked"屬性
-->
性別 <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
<input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female">女</label>
<br /><br />
<!--
多選框
- 使用input創建一個多選框，它的type屬性使用checkbox
-->
愛好 <input type="checkbox" name="hobby" value="zq" />足球
<input type="checkbox" name="hobby" value="lq" />籃球
<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球
<br /><br />
</fieldset>
<!--
下拉列表
- 使用select來創建一個下拉列表
下拉列表的name屬性需要指定給select，而value屬性需要指定給option
可以通過在option中添加selected="selected"來將選項設置爲默認選中
當爲select添加一個multiple="multiple"，則下拉列表變爲一個多選的下拉列表
-->
你喜歡的明星
<select name="star">
<!--
在select中可以使用optgroup對選項進行分組
同一個optgroup中的選項是一組
可以通過label屬性來指定分組的名字
-->
<optgroup label="女明星">
<!-- 在下拉列表中使用option標籤來創建一個一個列表項 -->
<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">趙薇</option>
</optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">趙本山</option>
<option value="ldh">劉德華</option>
<option value="pcj">潘長江</option>
</optgroup>
</select>
<br /><br />
<!--
使用textarea創建一個文本域
-->
自我介紹 <textarea name="info"></textarea>
<br /><br />
<!--
提交按鈕可以將表單中的信息提交給服務器
使用input創建一個提交按鈕,它的type屬性值是submit
在提交按鈕中可以通過value屬性來指定按鈕上的文字
-->
<input type="submit" value="註冊" />
<!--
<input type="reset" />可以創建一個重置按鈕，
點擊重置按鈕以後表單中內容將會恢復爲默認值
-->
<input type="reset" />
<!--
使用input type=button可以用來創建一個單純的按鈕，
這個按鈕沒有任何功能，只能被點擊
-->
<input type="button" value="按鈕" />
<!--
除了使用input，也可以使用button標籤來創建按鈕
這種方式和使用input類似，只不過由於它是成對出現的標籤
使用起來更加的靈活
-->
<br /><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按鈕</button>
</form>
</body>
</html>
框架集
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
框架集和內聯框架的作用類似，都是用於在一個頁面中引入其他的外部的頁面，
框架集可以同時引入多個頁面，而內聯框架只能引入一個，
在h5標準中，推薦使用框架集，而不使用內聯框架
使用frameset來創建一個框架集，注意frameset不能和body出現在同一個頁面中
所以要使用框架集，頁面中就不可以使用body標籤
屬性：
rows，指定框架集中的所有的框架，一行一行的排列
cols， 指定框架集中的所有的頁面，一列一列的排列
這兩個屬性frameset必須選擇一個，並且需要在屬性中指定每一部分所佔的大小
frameset中也可以再嵌套frameset
frameset和iframe一樣，它裏邊的內容都不會被搜索引擎所檢索，
所以如果搜索引擎檢索到的頁面是一個框架頁的話，它是不能去判斷裏邊的內容的
使用框架集則意味着頁面中不能有自己的內容，只能引入其他的頁面，而我們每單獨加載一個頁面
瀏覽器都需要重新發送一次請求，引入幾個頁面就需要發送幾次請求，用戶的體驗比較差
如果非得用建議使用frameset而不使用iframe
-->
<frameset cols="30% , * , 30%">
<!-- 在frameset中使用frame子標籤來指定要引入的頁面
引入幾個頁面就寫幾個frame
-->
<frame src="01.表格.html" />
<frame src="02.表格.html" />
<!-- 嵌套一個frameset -->
<frameset rows="30%,50%,*">
<frame src="04.表格的佈局.html" />
<frame src="05.完善clearfix.html" />
<frame src="06.表單.html" />
</frameset>
</frameset>
</html>
圖片（IE6下解決對png24格式的顯示問題）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-image: url(img/3.png);
background-repeat: no-repeat;
}
.box2{
width: 200px;
height: 200px;
background-image: url(img/4.png);
background-repeat: no-repeat;
}
</style>
</head>
<body style="background-color: #bfa;">
<!--
在IE6中對圖片格式png24支持度不高，
如果使用的圖片格式是png24，則會導致透明效果無法正常顯示
解決方法：
1.可以使用png8來代替png24，即可解決問題，
但是使用png8代替png24以後，圖片的清晰圖會有所下降
2.使用JavaScript來解決該問題，需要向頁面中引入一個外部的JavaScript文件
然後在寫一下簡單的JS代碼，來處理該問題
-->
<div class="box1"></div>
<div class="box2"></div>
<img src="img/3.png"/>
<!-- 在body標籤的最後引入外部的JS文件 -->
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<!--再創建一個新的script標籤，並且編寫一些js代碼 -->
<script type="text/javascript">
DD_belatedPNG.fix("*");
</script>
</body>
</html>
條件Hack
<!--
有一些情況，有一些特殊的代碼我們只需要在某些特殊的瀏覽器中執行
而在其他的瀏覽器中不需要執行，這時就可以使用CSS Hack來解決問題
CSS Hack實際上指的是一個特殊的代碼，這段代碼只在某些瀏覽器中可以識別
而其他瀏覽器不能識別，通過這種方式，來爲一些瀏覽器設置特殊的代碼
-->
<!--
條件Hack，條件hack只對IE瀏覽器有效，其他的瀏覽器都會將它識別爲註釋
IE10及以上的瀏覽器已不支持這種方式
-->
<!-- 一下內容只會出現在IE6中 -->
<!-- [if IE 6] >
<p>爲了您和家人的健康，請遠離IE6</p>
<![endif]-->
<!-- [if lte IE 9] >
<p>只會在ie9以下的版本纔會看到這句話</p>
<![endif]-->
我們可以在上一節中關於IE6圖片處理中，添加hack
具體的hack學習請查看官方文檔
屬性Hack
這裏省略，自己查看官方文檔學習，謝謝！