元素得層級(jí)
如果定位元素的層級(jí)是一樣，則下邊的元素會(huì)蓋住上邊的
通過(guò)z-index屬性可以用來(lái)設(shè)置元素的層級(jí)
可以為z-index指定一個(gè)正整數(shù)作為值，該值將會(huì)作為當(dāng)前元素的層級(jí)，層級(jí)越高，越優(yōu)先顯示
對(duì)于沒(méi)有開(kāi)啟定位的元素不能使用z-index
設(shè)置元素的透明背景
opacity可以用來(lái)設(shè)置元素背景的透明，它需要一個(gè)0-1之間的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
opacity: 0.5;
opacity屬性在IE8及以下的瀏覽器中不支持
IE8及以下的瀏覽器需要使用如下屬性代替
alpha(opacity=透明度)
透明度，需要一個(gè)0-100之間的值
0 表示完全透明
100 表示完全不透明
50 半透明
這種方式支持IE6，但是這種效果在IE Tester中無(wú)法測(cè)試
filter: alpha(opacity=50);
背景
/*設(shè)置背景樣式*/
background-color: #bfa;
使用background-image來(lái)設(shè)置背景圖片
語(yǔ)法：background-image:url(相對(duì)路徑);
- 如果背景圖片大于元素，默認(rèn)會(huì)顯示圖片的左上角
- 如果背景圖片和元素一樣大，則會(huì)將背景圖片全部顯示
- 如果背景圖片小于元素大小，則會(huì)默認(rèn)將背景圖片平鋪以充滿元素
可以同時(shí)為一個(gè)元素指定背景顏色和背景圖片，這樣背景顏色將會(huì)作為背景圖片的底色
一般情況下設(shè)置背景圖片時(shí)都會(huì)同時(shí)指定一個(gè)背景顏色
background-image: url(img/1.png);
background-repeat用于設(shè)置背景圖片的重復(fù)方式
可選值：
repeat，默認(rèn)值，背景圖片會(huì)雙方向重復(fù)（平鋪）
no-repeat，背景圖片不會(huì)重復(fù)，有多大就顯示多大
repeat-x， 背景圖片沿水平方向重復(fù)
repeat-y，背景圖片沿垂直方向重復(fù)
background-repeat: repeat-y;
電驢導(dǎo)航條
/*設(shè)置為背景圖片*/
background-image: url(img/bg.png);
/*設(shè)置水平方向重復(fù)*/
background-repeat: repeat-x;
背景偏移與定位
/*設(shè)置一個(gè)背景顏色*/
background-color: #bfa;
/*設(shè)置一個(gè)背景圖片*/
background-image: url(img/4.png);
/*設(shè)置圖片不重復(fù)*/
background-repeat: no-repeat;
/*
背景圖片默認(rèn)是貼著元素的左上角顯示
通過(guò)background-position可以調(diào)整背景圖片在元素中的位置
可選值：
該屬性可以使用 top right left bottom center中的兩個(gè)值來(lái)指定一個(gè)背景圖片的位置
top left 左上
bottom right 右下
如果只給出一個(gè)值，則第二個(gè)值默認(rèn)是center
也可以直接指定兩個(gè)偏移量
第一個(gè)值是水平偏移量
- 如果指定的是一個(gè)正值，則圖片會(huì)向右移動(dòng)指定的像素
- 如果指定的是一個(gè)負(fù)值，則圖片會(huì)向左移動(dòng)指定的像素
第二個(gè)是垂直偏移量
- 如果指定的是一個(gè)正值，則圖片會(huì)向下移動(dòng)指定的像素
- 如果指定的是一個(gè)負(fù)值，則圖片會(huì)向上移動(dòng)指定的像素
*/
/*background-position: -50px -50px;*/
background-attachment: fixed;
background-attachment用來(lái)設(shè)置背景圖片是否隨頁(yè)面一起滾動(dòng)
可選值：
scroll，默認(rèn)值，背景圖片隨著窗口滾動(dòng)
fixed，背景圖片會(huì)固定在某一位置，不隨頁(yè)面滾動(dòng)
不隨窗口滾動(dòng)的圖片，我們一般都是設(shè)置給body，而不設(shè)置給其他元素
background-attachment: fixed;
背景固定
body{
height: 5000px;
background-image: url(img/2.jpg);
background-repeat: no-repeat;
background-position: center;
/*
當(dāng)背景圖片的background-attachment設(shè)置為fixed時(shí)，
背景圖片的定位永遠(yuǎn)相對(duì)于瀏覽器的窗口
*/
background-attachment: fixed;
}
按鈕聯(lián)系
做完功能以后，發(fā)現(xiàn)在第一次切換圖片時(shí)，會(huì)發(fā)現(xiàn)圖片有一個(gè)非常快的閃爍，這個(gè)閃爍會(huì)造成一次不佳的用戶體驗(yàn)
產(chǎn)生問(wèn)題的原因：
背景圖片是以外部資源的形式加載進(jìn)網(wǎng)頁(yè)的，瀏覽器每加載一個(gè)外部資源就需要單獨(dú)的發(fā)送一次請(qǐng)求
但是我們的外部資源并不是同時(shí)加載，瀏覽器會(huì)在資源被使用時(shí)才去加載資源
我們這個(gè)練習(xí)，一上來(lái)瀏覽器只會(huì)加載link.png
由于hover和active的狀態(tài)沒(méi)有馬上觸發(fā)，所以hover.png和active.png并不是立即加載的
當(dāng)hover被觸發(fā)時(shí)，瀏覽器才去加載hover.png
當(dāng)active被觸發(fā)時(shí)，瀏覽器才去加載active.png
由于加載圖片需要一定的時(shí)間，所以在加載和顯示過(guò)程會(huì)有一段時(shí)間，背景圖片無(wú)法顯示，導(dǎo)致出現(xiàn)閃爍的情況
為了解決該問(wèn)題，可以將三個(gè)圖片整合為一張圖片，這樣可以同時(shí)將三張圖片一起加載，就不會(huì)出現(xiàn)閃爍的問(wèn)題了
然后再通過(guò)background-position來(lái)切換要顯示的圖片的位置，這種技術(shù)叫做圖片整合技術(shù)（CSS-Sprite）
優(yōu)點(diǎn)：
1 將多個(gè)圖片整合為一張圖片里，瀏覽器只需要發(fā)送一次請(qǐng)求，可以同時(shí)加載多個(gè)圖片，提高訪問(wèn)效率，提高了用戶體驗(yàn)。
2 將多個(gè)圖片整合為一張圖片，減小了圖片的總大小，提高請(qǐng)求的速度，增加了用戶體驗(yàn)
*/
.btn:link{
/*將a轉(zhuǎn)換為塊元素*/
display: block;
/*設(shè)置寬高*/
width: 93px;
height: 29px;
/*設(shè)置背景圖片*/
background-image: url(img/btn/btn2.png);
/*設(shè)置背景圖片不重復(fù)*/
background-repeat: no-repeat;
}
.btn:hover{
/*當(dāng)是hover狀態(tài)時(shí)，希望圖片可以向左移動(dòng)*/
background-position: -93px 0px;
}
.btn:active{
/*當(dāng)是active狀態(tài)時(shí)，希望圖片再向左移動(dòng)*/
background-position: -186px 0px;
}
簡(jiǎn)寫(xiě)背景屬性
/*設(shè)置一個(gè)背景顏色*/
/*background-color: #bfa;*/
/*設(shè)置一個(gè)背景圖片*/
/*background-image: url(img/3.png);*/
/*設(shè)置背景不重復(fù)*/
/*background-repeat: no-repeat;*/
/*設(shè)置背景圖片的位置*/
/*background-position: center center;*/
/*設(shè)置背景圖片不隨滾動(dòng)條滾動(dòng)*/
/*background-attachment: fixed;*/
background-color: #bfa;
/*background
- 通過(guò)該屬性可以同時(shí)設(shè)置所有背景相關(guān)的樣式
- 沒(méi)有順序的要求，誰(shuí)在前睡在后都行
- 也沒(méi)有數(shù)量的要求，不寫(xiě)的樣式就使用默認(rèn)值
*/
background: #bfa url(img/3.png) center center no-repeat fixed;
表格
<!-- 在HTML中，使用table標(biāo)簽來(lái)創(chuàng)建一個(gè)表格 -->
<table border="1" width="40%" align="center">
<!-- 在table標(biāo)簽中使用tr來(lái)表示表格中的一行，有幾行就有幾對(duì)tr -->
<tr>
<!-- 在tr中需要使用td來(lái)創(chuàng)建一個(gè)單元格，有幾個(gè)單元格就有幾個(gè)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用來(lái)設(shè)置縱向的合并單元格 -->
<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>
給表格添加樣式
table{
/*設(shè)置表格的寬度*/
width: 300px;
/*居中*/
margin: 0 auto;
/*邊框*/
? ? ? ? ? ? /*border:1px solid black;*/
? ? ? ? ? ? /*table和td邊框之間默認(rèn)有一個(gè)距離，通過(guò)border-spacing屬性可以設(shè)置這個(gè)距離*/
? ? ? ? ? ? /*border-spacing: 10px;*/
? ? ? ? ? ? /*
? ? ? ? ? ? border-collapse可以用來(lái)設(shè)置表格的邊框合并
? ? ? ? ? ? 如果設(shè)置了邊框合并，則border-spacing自動(dòng)失效
? ? ? ? ? ? */
? ? ? ? ? ? border-collapse: collapse;
? ? ? ? ? ? /*設(shè)置背景樣式*/
/*background-color: #bfa;*/
}
/*設(shè)置邊框*/
th, td{
border: 1px solid black;
}
/*設(shè)置隔行變色*/
tbody > tr:nth-child(even){
background-color: #bfa;
}
/*鼠標(biāo)移入到tr以后，改變顏色*/
tr:hover{
background-color: yellow;
}
長(zhǎng)表格
有一些情況下表格是非常的長(zhǎng)的，這時(shí)就需要將表格分為三個(gè)部分，表頭，表格的主體，表格底部
在HTML中為我們提供了三個(gè)標(biāo)簽：
thead 表頭
tbody 表格主體
tfoot 表格底部
這三個(gè)標(biāo)簽的作用，就來(lái)區(qū)分表格的不同的部分，他們都是table的子標(biāo)簽，都需要直接寫(xiě)到table中，tr需要寫(xiě)在這些標(biāo)簽當(dāng)中
thead中的內(nèi)容，永遠(yuǎn)會(huì)顯示在表格的頭部
tfoot中的內(nèi)容，永遠(yuǎn)都會(huì)顯示表格的底部
tbody中的內(nèi)容，永遠(yuǎn)都會(huì)顯示表格的中間
如果表格中沒(méi)有寫(xiě)tbody，瀏覽器會(huì)自動(dòng)在表格中添加tbody
并且將所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通過(guò)table > tr 無(wú)法選中行 需要通過(guò)tbody > tr
