‘壹’ 如何用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的标签