作業(yè)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作業(yè)</title>
<style type="text/css">
.Xia:link{
display: block;
width:43px;
height:31px;
background-image: url(img/48.png);
background-repeat: no-repeat;
background-position:-10px -337px;
}
.Xia:hover{
background-position:-58px -340px;
}
</style>
</head>
<body>
< a href=" " class="Xia"></a>
</body>
</html>
65. 動態(tài)圖片按鈕
? ? 做完功能以后，發(fā)現(xiàn)在第一次切換圖片時，會發(fā)現(xiàn)圖片有一個非?？斓拈W爍，這個閃爍會造成一次? ? 不佳的用戶體驗
產(chǎn)生問題的原因：
? ? 背景圖片是以外部資源的形式加載進網(wǎng)頁的，瀏覽器每加載一個外部資源就需要單獨的發(fā)送一次請求
? ? 但是我們的外部資源并不是同時加載，瀏覽器會在資源被使用時才去加載資源
? ? 我們這個練習，一上來瀏覽器只會加載link.png
? ? 由于hover和active的狀態(tài)沒有馬上觸發(fā)，所以hover.png和active.png并不是立即加載的
? ? 當hover被觸發(fā)時，瀏覽器才去加載hover.png
? ? 當active被觸發(fā)時，瀏覽器才去加載active.png
? ? 由于加載圖片需要一定的時間，所以在加載和顯示過程會有一段時間，背景圖片無法顯示，導致出現(xiàn)閃爍的情況
? ? 為了解決該問題，可以將三個圖片整合為一張圖片，這樣可以同時將三張圖片一起加載，就不會出現(xiàn)閃爍的問題了
? ? 然后再通過background-position來切換要顯示的圖片的位置，這種技術(shù)叫做圖片整合技術(shù)（CSS-Sprite）
? ? 優(yōu)點：
? ? 1 將多個圖片整合為一張圖片里，瀏覽器只需要發(fā)送一次請求，可以同時加載多個圖片，提高訪問效率，提高了用戶體驗。
? ? 2 將多個圖片整合為一張圖片，減小了圖片的總大小，提高請求的速度，增加了用戶體驗
66.? 簡寫背景屬性
? ? 設(shè)置一個背景顏色
? ? background-color: #bfa;
? ? 設(shè)置一個背景圖片
? ? background-image: url(img/4.png);
? ? 設(shè)置背景不重復(fù)
? ? background-repeat: no-repeat;
? ? 設(shè)置背景圖片的位置
? ? ackground-position: center center;
? ? 設(shè)置背景圖片不隨滾動條滾動
? ? background-attachment: fixed;
? ? background
? ? - 通過該屬性可以同時設(shè)置所有背景相關(guān)的樣式
? ? - 沒有順序的要求，誰在前睡在后都行
? ? - 也沒有數(shù)量的要求，不寫的樣式就使用默認值
67.? 表格
? ? ? 在HTML中，使用table標簽來創(chuàng)建一個表格
? ? ? 在table標簽中使用tr來表示表格中的一行，有幾行就有幾對tr
? ? ? 在tr中需要使用td來創(chuàng)建一個單元格，有幾個單元格就有幾個td
? ? ? rowspan用來設(shè)置縱向的合并單元格
? ? ? <td rowspan="2">B4</td>
? ? ? colspan橫向的合并單元格
? ? ? <td colspan="2">D3</td>
? ? ? table和td邊框之間默認有一個距離，通過border-spacing屬性可以設(shè)置這個距離
? ? ? border-spacing: 10px;
? ? ? border-collapse可以用來設(shè)置表格的邊框合并
? ? ? 如果設(shè)置了邊框合并，則border-spacing自動失效
? ? ? border-collapse: collapse;
? ? ? 設(shè)置隔行變色
? ? ? tbody > tr:nth-child(even){
? ? ? background-color: #bfa;
? ? ? }
68.? 表格樣式
? ? ? <！DOCTYPE html >
?< html xmlns = “ http://www.img/hell/xhtml” >?
? < meta charset = “ utf-8” />?
? < title > 指定對象內(nèi)表設(shè)置樣式</ title >
? < 樣式>
? .divcss5 {width：200px}
? .divcss5表{背景：#CCC; 顏色：＃F00}
? .divcss5表td {背景：#FFF}
? </ style >
? </ head >
? < 身體>
? < div class = “ divcss5” >?
? < 表格寬度= “ 100％” 邊框= “ 0”單元間距= “ 1”單元格填充= “ 0” >? ?
? < tr >
? < td > 內(nèi)容一</ td >
? < td > 內(nèi)容一</ td >
? < td > 內(nèi)容一</ td >
? </ tr >
? < tr >
? < td > 內(nèi)容二</ td >
? < td > 內(nèi)容</ td >
? < td > 內(nèi)容</ td >
? </ tr >
? </ 表格>
? </ div >
? </ body >
? </ html >
69.? 長表格
? ? ? 有一些情況下表格是非常的長的，這時就需要將表格分為三個部分，表頭，表格的主體，表格底部
? ? ? 在HTML中為我們提供了三個標簽：
? ? ? thead 表頭
? ? ? tbody 表格主體
? ? ? tfoot 表格底部
? ? ? 這三個標簽的作用，就來區(qū)分表格的不同的部分，他們都是table的子標簽，都需要直接寫到table中，tr需要寫在這些標簽當中
? ? ? thead中的內(nèi)容，永遠會顯示在表格的頭部
? ? ? tfoot中的內(nèi)容，永遠都會顯示表格的底部
? ? ? tbody中的內(nèi)容，永遠都會顯示表格的中間
? ? ? 如果表格中沒有寫tbody，瀏覽器會自動在表格中添加tbody
? ? ? 并且將所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
? ? ? 通過table > tr 無法選中行 需要通過tbody > tr
70.? 表格布局
? ? ? 以前表格更多的情況實際上是用來對頁面進行布局的，但是這種方式早已被CSS所淘汰了
? ? ? 表格的列數(shù)由td最多的那行決定
? ? ? 表格是可以嵌套，可以在td中在放置一個表格
71.? 完善
? ? ? 經(jīng)過修改后的clearfix是一個多功能的樣式，既可以解決高度塌陷，又可以確保父元素和子元素的垂直外邊距不會重疊
? ? ? .clearfix:before,
? ? ? .clearfix:after{
? ? ? content: "";
? ? ? display: table;
? ? ? clear: both;
? ? ? }
? ? ? .clearfix{
? ? ? zoom: 1;
? ? ? }
