元素的層級：
如果定位元素的層級是一樣，則下邊的元素會蓋住上邊的
通過z-index屬性可以用來設置元素的層級
可以為z-index指定一個正整數作為值，該值將會作為當前元素的層級，層級越高，越優先顯示
對于沒有開啟定位的元素不能使用z-index
設置元素的透明背景
opacity可以用來設置元素背景的透明，它需要一個0-1之間的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
opacity屬性在IE8及以下的瀏覽器中不支持
IE8及以下的瀏覽器需要使用如下屬性代替
alpha(opacity=透明度)
透明度，需要一個0-100之間的值
0 表示完全透明
100 表示完全不透明
50 半透明
這種方式支持IE6，但是這種效果在IE Tester中無法測試
背景：
使用background-image來設置背景圖片
語法：background-image:url(相對路徑);
- 如果背景圖片大于元素，默認會顯示圖片的左上角
- 如果背景圖片和元素一樣大，則會將背景圖片全部顯示
- 如果背景圖片小于元素大小，則會默認將背景圖片平鋪以充滿元素
可以同時為一個元素指定背景顏色和背景圖片，這樣背景顏色將會作為背景圖片的底色
一般情況下設置背景圖片時都會同時指定一個背景顏色
background-repeat用于設置背景圖片的重復方式
可選值：
repeat，默認值，背景圖片會雙方向重復（平鋪）
no-repeat，背景圖片不會重復，有多大就顯示多大
repeat-x， 背景圖片沿水平方向重復
? repeat-y，背景圖片沿垂直方向重復
背景偏移與走位：
背景圖片默認是貼著元素的左上角顯示
通過background-position可以調整背景圖片在元素中的位置
可選值：
該屬性可以使用 top right left bottom center中的兩個值來指定一個背景圖片的位置
top left 左上
bottom right 右下
如果只給出一個值，則第二個值默認是center
也可以直接指定兩個偏移量
第一個值是水平偏移量
- 如果指定的是一個正值，則圖片會向右移動指定的像素
- 如果指定的是一個負值，則圖片會向左移動指定的像素
第二個是垂直偏移量
- 如果指定的是一個正值，則圖片會向下移動指定的像素
- 如果指定的是一個負值，則圖片會向上移動指定的像素
background-attachment用來設置背景圖片是否隨頁面一起滾動
可選值：
scroll，默認值，背景圖片隨著窗口滾動
fixed，背景圖片會固定在某一位置，不隨頁面滾動
不隨窗口滾動的圖片，我們一般都是設置給body，而不設置給其他元素
當背景圖片的background-attachment設置為fixed時，背景圖片的定位永遠相對于瀏覽器的窗口
按鈕練習：
做完功能以后，發現在第一次切換圖片時，會發現圖片有一個非常快的閃爍，這個閃爍會造成一次不佳的用戶體驗
產生問題的原因：
背景圖片是以外部資源的形式加載進網頁的，瀏覽器每加載一個外部資源就需要單獨的發送一次請求
但是我們的外部資源并不是同時加載，瀏覽器會在資源被使用時才去加載資源
我們這個練習，一上來瀏覽器只會加載link.png
由于hover和active的狀態沒有馬上觸發，所以hover.png和active.png并不是立即加載的
當hover被觸發時，瀏覽器才去加載hover.png
當active被觸發時，瀏覽器才去加載active.png
由于加載圖片需要一定的時間，所以在加載和顯示過程會有一段時間，背景圖片無法顯示，導致出現閃爍的情況
為了解決該問題，可以將三個圖片整合為一張圖片，這樣可以同時將三張圖片一起加載，就不會出現閃爍的問題了
然后再通過background-position來切換要顯示的圖片的位置，這種技術叫做圖片整合技術（CSS-Sprite）
優點：
1 將多個圖片整合為一張圖片里，瀏覽器只需要發送一次請求，可以同時加載多個圖片，提高訪問效率，提高了用戶體驗。
? 2 將多個圖片整合為一張圖片，減小了圖片的總大小，提高請求的速度，增加了用戶體驗
表格：
在HTML中，使用table標簽來創建一個表格
在table標簽中使用tr來表示表格中的一行，有幾行就有幾對tr
在tr中需要使用td來創建一個單元格，有幾個單元格就有幾個td
rowspan用來設置縱向的合并單元格
colspan橫向的合并單元格
表格樣式：
table和td邊框之間默認有一個距離，通過border-spacing屬性可以設置這個距離
border-collapse可以用來設置表格的邊框合并
如果設置了邊框合并，則border-spacing自動失效
隔行變色：
tbody > tr.nth-child（even/odd）
長表格：
有一些情況下表格是非常的長的，這時就需要將表格分為三個部分，表頭，表格的主體，表格底部
在HTML中為我們提供了三個標簽：
thead 表頭
tbody 表格主體
tfoot 表格底部
這三個標簽的作用，就來區分表格的不同的部分，他們都是table的子標簽，都需要直接寫到table中，tr需要寫在這些標簽當中
thead中的內容，永遠會顯示在表格的頭部
tfoot中的內容，永遠都會顯示表格的底部
tbody中的內容，永遠都會顯示表格的中間
如果表格中沒有寫tbody，瀏覽器會自動在表格中添加tbody
并且將所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通過table > tr 無法選中行 需要通過tbody > tr
表格布局：
以前表格更多的情況實際上是用來對頁面進行布局的，但是這種方式早已被CSS所淘汰了
表格的列數由td最多的那行決定
表格是可以嵌套，可以在td中在放置一個表格
