『壹』 如何用css顯示一個圖片中多個小圖標
CSS顯示一個大圖片中的多個小圖標，主要是用background-position這個屬性來控制的。
先看下面這張300*300的大圖片，每個小圖標是100*100的。(這張圖片名字叫9pic2.jpg)
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>背景background-position切圖</title>
<style>
.showImage{
background-image:url(9pic2.jpg);
width:100px;
height:100px;
}
.showImage:hover{
background-image:url(9pic1.jpg);
}
ul{
list-style:none;
}
ulli{
float:left;
margin:20px;
}
#item1{
background-position:00;
}
#item2{
background-position:-100px0;
}
#item3{
background-position:-200px0;
}
#item4{
background-position:0-100px;
}
#item5{
background-position:-100px-100px;
}
#item6{
background-position:-200px-100px;
}
#item7{
background-position:0-200px;
}
#item8{
background-position:-100px-200px;
}
#item9{
background-position:-200px-200px;
}
</style>
</head>
<body>
<divclass="container">
<ul>
<liid="item1"class="showImage"></li>
<liid="item2"class="showImage"></li>
<liid="item3"class="showImage"></li>
<liid="item4"class="showImage"></li>
<liid="item5"class="showImage"></li>
<liid="item6"class="showImage"></li>
<liid="item7"class="showImage"></li>
<liid="item8"class="showImage"></li>
<liid="item9"class="showImage"></li>
</ul>
</div>
</body>
</html>
這個例子把那個圖片打散，橫排在頁面上，還用:hover偽類實現了你滑鼠移動到上面就從黑白變彩色。
『貳』 div+css問題 全屏時正常顯示logo圖片，頁面縮小時整個圖片都重復顯示以下兩張圖片，第一個是正常顯示。
出現這個現象的原因是因為 logo那一塊跟右邊標注日期那一塊布局太緊湊，因為都是浮動 所以當整個大的div長度變小之後，裡面兩個浮動的div的總長度高於外面的div 導致右邊內容被擠下來了，背景圖片就這么大，多出來的部分會顯示背景顏色。
解決方法：將logo跟右邊那一塊的width設置小點，一個左浮動、一個右浮動即可
『叄』 如何利用css設置倆個圖片，一個是大圖片，另一個是小圖片
最自由定位的莫過於position:relative; position:absolute; 了
<style type="text/css">
.big_bg { position:relative; width:500px; height:300px; margin:0 auto; background:url(bg.jpg);}
.small_img1 { position:absolute; top:10px; left:10px;}
.small_img2 { position:absolute; top:50px; left:50px;}
.small_img3 { position:absolute; top:100px; left:100px;}
</style>
<div class="big_bg">
<a class="small_img1" href="#" target="_blank"><img src="img1.jpg" border="0" />1</a>
<a class="small_img2" href="#" target="_blank"><img src="img1.jpg" border="0" />2</a>
<a class="small_img3" href="#" target="_blank"><img src="img1.jpg" border="0" />3</a>
</div>
『肆』 css問題，圖中選擇器部分包含兩個#，怎麼理解
一個是id名為header的標簽，一個是h2裡面有id名有logo的標簽