CSS:CSS基础之六

来源：互联网发布：如何评价马化腾知乎编辑：程序博客网时间：2024/06/04 18:45

PHOTO.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=gb2312" />
<title>装潢图片展览</title>

<body>
<div id="info">
<h3>装潢图片展览</h3>
<div id="zs">
<ul>
<li><a href="#" title="照片1" target="_blank" class="b1 z"><span><img src="jpg/zh0001.jpg" alt=="照片1" /><br/>
这是照片1</span></a>
</li>
<li><a href="#" title="照片2" target="_blank" class="b2 z"><span><img src="jpg/zh0002.jpg" alt=="照片2"/><br/>
这是照片2</span></a>
</li>
<li><a href="#" title="照片3" target="_blank" class="b3 z"><span><img src="jpg/zh0003.jpg" alt=="照片3"/><br/>
这是照片3</span></a>
</li>
<li><a href="#" title="照片4" target="_blank" class="b4 z"><span><img src="jpg/zh0004.jpg" alt=="照片4"/><br/>
这是照片4</span></a>
</li>
<li><a href="#" title="照片5" target="_blank" class="b5 z"><span><img src="jpg/zh0005.jpg" alt=="照片5"/><br/>
这是照片5</span></a>
</li>
<li><a href="#" title="照片6" target="_blank" class="b6 z"><span><img src="jpg/zh0006.jpg" alt=="照片6"/><br/>
这是照片6</span></a>
</li>
</ul>
</div>
</div>

</body>
</html>

PHOTO.CSS

* {
margin:0;
padding:0;
}
body{
font-size:12px;
line-height:1.7;
font-family:Verdana, "宋体";
overflow:hidden;
background-color: #004200;
}
#info{
width:600px;
margin-left:auto;
margin-right:auto;
text-align:center;
border:1px solid #FFFFFF;
height:450px;
margin-top:20px;
background-color: #003300;
}
h3{ margin:30px 0 0 0; color:#CC0000; font-size:16px;color:#FFF}

a span{visibility:hidden; position:absolute; overflow:hidden;}

a:active,a:hover{ cursor:pointer}
a:hover span,a:active span{position:absolute; top:90px; z-index:20px; visibility: visible; margin-left:-500px;}

ul,li{ list-style:none; margin:0; padding:0;}

#info img{
width:400px;
height:280px;
border:5px solid #FFFFFF;
padding: 1px;
}

/*可能出现垂直滚动条*/

#zs{ height:340px; overflow: auto; width:140px; float:right; margin-top:20px; margin-bottom:50px;}

/*将类Z与B1等分离*/

.z{ width:80px; height:56px;display:block; border:1px solid #FFFFFF; margin:4px 0 4px 25px;color:#FFF;}
.b1{
background-image: url(jpg/zh0001z.jpg);
}
.b2{
background-image: url(jpg/zh0002z.jpg);
}
.b3{
background-image: url(jpg/zh0003z.jpg);
}
.b4{
background-image: url(jpg/zh0004z.jpg);
}
.b5{
background-image: url(jpg/zh0005z.jpg);
}
.b6{
background-image: url(jpg/zh0006z.jpg);
}

效果演示如下: