映像拼合就是單個映像的集合。
有許多映像的網頁可能需要很長事件來載入和產生多個伺服器的請求。
使用映像拼合會降低伺服器的請求數量，並節省頻寬。
映像拼合--建立一個導航列表
<!DOCTYPE html><html><head><title>自學教程(如約智惠.com)</title><meta charset="utf-8"><style>#navlist {position:relative;}#navlist li{margin:0px;padding:0px;list-style:none;position:absolute;top:0px;}#navlist li, #navlist a{height:44px;display:block;}#home {left:0px;width:46px;background:url('./images/img_navsprites.gif')0 0;}#prev {left:63px;width:43px;background:url('./images/img_navsprites.gif')-47px 0;}#next {left:129px;width:43px;background:url('./images/img_navsprites.gif')-91px 0;}</style></head><body ><ul id="navlist"> <li id="home"><a href="/"></a></li> <li id="prev"><a href="/css/"></a></li> <li id="next"><a href="/css/"></a></li></ul></body></html>
執行個體解析：
#navlist{position:relative;} - 位置設定相對定位，讓裡面的絕對位置
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding設定為0，列表樣式被刪除，所有清單項目是絕對位置
#navlist li, #navlist a{height:44px;display:block;} - 所有映像的高度是44px
現在開始每個具體部分的定位和樣式：
#home{left:0px;width:46px;} - 定位到最左邊的方式，以及映像的寬度是46px
#home{background:url(img_navsprites.gif) 0 0;} - 定義背景映像和它的位置（左0px，頂部0px）
#prev{left:63px;width:43px;} - 右側定位63px（＃home寬46px+項目之間的一些多餘的空間），寬度為43px。
#prev{background:url('img_navsprites.gif') -47px 0;} - 定義背景映像右側47px（＃home寬46px+分隔線的1px）
#next{left:129px;width:43px;}- 右邊定位129px(#prev 63px + #prev寬是43px + 剩餘的空間), 寬度是43px.
#next{background:url('img_navsprites.gif') no-repeat -91px 0;} - 定義背景映像右邊91px（＃home 46px+1px的分割線+＃prev寬43px+1px的分隔線）
映像拼合--懸停效果
<!DOCTYPE html><html><head><title>自學教程(如約智惠.com)</title><meta charset="utf-8"><style>#navlist {position:relative;}#navlist li{margin:0px;padding:0px;list-style:none;position:absolute;top:0px;}#navlist li, #navlist a{height:44px;display:block;}#home {left:0px;width:46px;background:url('./images/img_navsprites_hover.gif')0 0;}#home a:hover {background:url('./images/img_navsprites_hover.gif')0 -45px;}#prev {left:63px;width:43px;background:url('./images/img_navsprites_hover.gif')-47px 0;}#prev a:hover {background:url('./images/img_navsprites_hover.gif')-47px -45px;}#next {left:129px;width:43px;background:url('./images/img_navsprites_hover.gif')-91px 0;}#next a:hover {background:url('./images/img_navsprites_hover.gif')-91px -45px;}</style></head><body ><ul id="navlist"> <li id="home"><a href="/"></a></li> <li id="prev"><a href="/css/"></a></li> <li id="next"><a href="/css/"></a></li></ul></body></html>
執行個體解析：
由於該清單項目包含一個連結，我們可以使用：hover偽類
#home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 對於所有三個懸停映像，我們指定相同的背景位置，只是每個再向下45px
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
