<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
*{ /*设置各个元素的内外边距均为0，方便后面各个元素的调整*/
padding:0;
margin:0;
}
#photo
{
width:800px;
height:600px;
border:1px solid #cccccc;
position:relative;/*这里设置定位元素的目的是让photo元素作为子元素的参照物*/
margin:50px 0 0 50px;
}
ul
{
text-decoration:none;
width:200px;
height:500px;
border:1px solid #cccccc;
float:right;/*大家也可以利用定位属性将ul元素移动到右边*/
margin-top:50px;
}
li
{
width:50px;
height:50px;
float:left;
display:block;/*作用*/
margin:10px;
overflow:hidden;
}
img
{
border:0px;
margin:-120px 0px 0px -100px;/*不压缩照片，选区照片中的一个小块作为略缩图*/
display:block;
}
a
{
display:block;
width:48px;
height:48px;
border:1px solid #000000;
overflow:hidden;/*防止图片撑破a而使a元素右边框、下边框看不见*/
}
a:hover
{/*在IE6.0中如果a和a:hover中的内容一样，则后面的a:hover img将无法正常显示，这里定义一个border:1px solid #cccccc;*/
border:1px solid #cccccc;
}
a:hover img
{
position:absolute;
top:50px;
left:50px;
margin:0;/*清除前面img中的margin:-120px 0px 0px -100px;*/
width:500px;
height:400px;
}
</style>
</head> <body>
<div id="photo">
<ul>
<li><a href="#"><img src="images/1.jpg"></a></li>
<li><a href="#"><img src="images/2.jpg"></a></li>
<li><a href="#"><img src="images/3.jpg"></a></li>
<li><a href="#"><img src="images/4.jpg"></a></li>
<li><a href="#"><img src="images/5.jpg"></a></li>
<li><a href="#"><img src="images/6.jpg"></a></li>
<li><a href="#"><img src="images/7.jpg"></a></li>
<li><a href="#"><img src="images/8.jpg"></a></li>
<li><a href="#"><img src="images/9.jpg"></a></li>
<li><a href="#"><img src="images/10.jpg"></a></li>
<li><a href="#"><img src="images/11.jpg"></a></li>
</ul>
</div>
</body>
</html>效果图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易CSS相册</title>
<style>
*
{
margin:0;
padding:0;
}
body
{
background-color:#333333;
padding-top:10px;
}
#photo
{
position:relative;
width:748px;
height:550px;
margin:0 auto;
border:1px solid #fff;
}
h1
{
position:absolute;
right:10px;
bottom:10px;
width:100px;
height:20px;
font:normal 12px/1.5em "宋体";
text-align:center;
color:#fff;
}
#photo ul
{
list-style:none;
}
li
{
width:54px;
height:54px;
overflow:hidden;
float:left;
margin:10px;
display:inline;/*在IE6下浮动元素对父块元素设置左边距,会出现边距加倍的错误，可以设置父元素也浮动，或者设置本元素display:inline;解决在IE6下双倍间距的bug问题 */
}
ul
{
width:148px;
height:444px;
float:right;/*这里选择浮动布局，也可以使用定位布局 */
border:1px solid #fff;
border-width:0 0 1px 1px;
}
/* 使用定位布局将UL移动到右边,见下的注释： */
/*
ul
{
width:148px;
height:444px;
position:absolute;
top:0;
right:0;
border:1px solid #fff;
border-width:0 0 1px 1px;
}
*/
#photo li a
{
display:block;/*内联元素只有先转换为块元素之后才能设置宽度和高度属性*/
width:50px;/*width+border-left+border-right=54px */
height:50px;/*height+border-top+border-bottom=54px */
border:2px solid #cccccc;
overflow:hidden;/*添加overflow:hidden;主要功能是避免相片的宽度和高度过大而撑开a标签设置的宽度和高度属性值：50px */
}
img
{
border:none;/*在IE6下图片的边缘有蓝色的边框线，IE8和FF浏览器没有蓝色边框线，这里的蓝色边框线说明图片是有超链接功能的，超链接默认给图片添加了边框，不过这里有蓝色边框线很丑，我们将其删除 */
display:block;/*视乎没有作用*/
margin:-150px 0 0 -80px;/*相册在默认情况下以略缩图的形式在右边展现给浏览者，不压缩图片的原有宽度和高度属性，而是取相片中任意某个部分作为略缩图形式。不压缩图片的原有宽度和高度属性，取相片中任意某个部分作为略缩图形式的方法：1.利用position移动照片在a中的位置，这个时候需要将img和a同时设置成定位;2.利用负边距（margin的属性值为负值）的方式改变图片的位置*/
}
/*利用position取相片中任意某个部分作为略缩图形式如下:*/
/*
a
{
position:relative;
}
img
{
position:absolute;
left:-80px;
top:-150px;
}
*/
/*下面实现当鼠标悬停于某一张图片上时，相册列表中的略缩图恢复原为原始的相片的宽度和高度，并且展现在相册的某个区域*/
/*首先解决IE6的:hover BUG问题*/
li a:hover
{
border:2px solid #000;/*没有这个属性也可以,这个属性只是为了改变鼠标触发的时候a标签的边框颜色，提升页面的显示效果，并非是解决ie6 BUG问题 */
background-color:#333333;
}/*IE6浏览器的解析效果十分怪异，如果我们在CSS样式中没有定义锚点a的:hover伪类属性，那么li a:hover img就会失效，不仅如此，如果在锚点a的:hover伪类属性中延用了a标签的部分或者全部属性，即使属性值有任何改变，li a:hover img中的效果一样会失效（例如这里li a:hover中只有border:2px solid #000;时，它延用了a标签的部分属性，而且改变了边框的颜色值，会发现在IE6下一样无效）。 为了解决这个问题，我们必须且只能在li a:hover中增加锚点a中没有的属性，这里增加的是：background-color:#333333; 这样的修改不仅不会对页面有任何不好的影响，反而或许还会有好处*/
/*解决IE6的:hover BUG问题到此结束*/
li a:hover img,.normal
{
position:absolute;
left:10px;
top:10px;
width:576px;
height:500px;
margin:0;/*清除前面img中的margin:-120px 0px 0px -100px;*/
border:2px solid #ffffff;
}
.normal/*li a:hover img固定定位以后.normal才进行定位，它们在同一个层次内，由后定位的.normal图片遮挡住先定位的li a:hover img的图片，所以需要用z-index:-1;使li a:hover img中的图片优先级高于.normal*/
{
z-index:-1;
}
</style>
</head> <body>
<div id="photo">
<h1>简易CSS相册</h1>
<ul>
<li><a href="#"><img src="images/1.jpg" alt="美图" /></a></li>
<li><a href="#"><img src="images/2.jpg" alt="美图" /></a></li>
<li><a href="#"><img src="images/3.jpg" alt="美图" /></a></li>
<li><a href="#"><img src="images/4.jpg" alt="美图" /></a></li>
<li><a href="#"><img src="images/5.jpg" alt="美图" /></a></li>
<li><a href="#"><img src="images/6.jpg" alt="美图" /></a></li>
<li><a href="#"><img src="images/7.jpg" alt="美图" /></a></li>
<li><a href="#"><img src="images/8.jpg" alt="美图" /></a></li>
<li><a href="#"><img src="images/9.jpg" alt="美图" /></a></li>
<li><a href="#"><img src="images/10.jpg" alt="美图" /></a></li>
<li><a href="#"><img src="images/11.jpg" alt="美图" /></a></li>
</ul>
<img src="images/7.jpg" class="normal" />
</div>
</body>
</html> 效果图片
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
