Div+css Album effect instance source code

css| Source Code

Used to make a flash album with flash-network version This effect a little learning this meaning.

For a line of code, I have spent two of nights to think about it, the result is that the feeling ie a bit abnormal. With the normal idea to do, FIREFOX and other browsers are no problem, only IE can not. Only if you add a line of garbage code, IE can be displayed properly.

Here's the effect:

Run Code Box

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title>test div</title><style>body{margin:0; padding:0; font-size:12px; Background: #333333; line-height:1.7; Font-family:verdana, "Song Body"; Overflow:hidden} #info {width:600px; background: #666666; margin-left:auto; margin-right:auto; text-align:center; border:1px solid #FFFFFF; height:450px; margin-top:20px;} h3{margin:30px 0 0 0; color: #CC0000; Font-size:12px;color: #FFF}span{visibility:hidden; position:absolute; overflow: Hidden;} ul,li{list-style:none; margin:0; padding:0;} a:active,a:hover{cursor:pointer}a:hover span,a:active span{position:absolute; top:90px; z-index:20px; visibility:visible; margin-left:-500px;} #info img{width:400px height:280px border:7px Solid #FFFFFF} #zs {height:340px; overflow:auto; width:140px; Float:right; margin-top:20px; margin-bottom:50px}. z{width:80px height:56px;display:block border:1px solid #FFFFFF margin:4px 0 4px 25px;color: #FFF}.b1{Background:url (/uploadpic/2007-7/200777205430312.jpg)}. b2{Background:url (/uploadpic/2007-7/200777205430562.jpg)}.b3{Background:url (/uploadpic/2007-7/200777205430945. JPG)}.b4{background:url (/uploadpic/2007-7/200777205431703.jpg)}.b5{Background:url (/UploadPic/2007-7/ 200777205431906.jpg)}.b6{Background:url (/uploadpic/2007-7/200777205430312.jpg)}</style></pead>< Body><div id= "Info" > <p> mouse CSS album </p> <div id= "ZS" > <ul> <li><a href= "Http://webjx.com" class= "B1 z" target= "_blank" title= "Photo 1" ><span><br/> This is the photo 1<br/> WEBJX.COM&LT;/SPAN&GT;&LT;/A&GT;&LT;/LI&G T <li><a href= "http://webjx.com" class= "B2 z" target= "_blank" title= "Photo 2" ><spAn><br/> This is the photo 2<br/> x.com</span></a></li> <li><a href= "http://webjx.com" class= "B3 z" target= "_blank" title= " Photo 3 "><span><br/> This is the photo 3<br/&G T webjx.com</span></a></li> <li><a href= "http://webjx.com" class= "B4 z" target= "_blank" tit le= "Photo 4" ><span><br/> This is the photo 4<br /> webjx.com</span></a></li> <li><a href= "http://webjx.com" class= "B5 z" target = "_blank" title= "Photo 5" ><span><br/ > This is the photo 5<br/> webjx.com</span></a></li> <li><a href= "http://webjx.c Om "class=" B6 z "target=" _Blank "title=" Photo 6 "><span><br/> This is the photo 6<br/> webjx.com</span></a></li> <li><a href= "http://webjx.com" class= Z "target=" _blank "title=" Photo 1 "><span> <br/> This is the photo 1<br/> webjx.com</span></a></li> <li><a href= "http:/ /webjx.com "class=" B2 z "target=" _blank "title=" Photo 2 "><span><br/> This is the photo 2<br/> webjx.com</span></a></li> </ul&gt ; </div></div></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

These codes are not optimal, I'm thinking better.

CODE:<style>
body{margin:0; padding:0 font-size:12px; background: #333333; line-height:1.7; Font-family:verdana, "Song-Body"; Overflow: Hidden}
#info {width:600px; background: #666666; margin-left:auto; margin-right:auto; text-align:center; border:1px Solid FFFFFF; height:450px; margin-top:20px;}
h3{margin:30px 0 0 0; color: #CC0000; Font-size:12px;color: #FFF}
Span{visibility:hidden; position:absolute; overflow:hidden;}
ul,li{list-style:none; margin:0; padding:0;}
a:active,a:hover{Cursor:pointer}
A:hover span,a:active Span{position:absolute; top:90px; z-index:20px; visibility:visible; margin-left:-500px;}
#info img{width:400px; height:280px border:7px Solid #FFFFFF}
#zs {height:340px; overflow:auto; width:140px; float:right; margin-top:20px; margin-bottom:50px;}
. z{width:80px Height:56px;display:block border:1px solid #FFFFFF margin:4px 0 4px 25px;color: #FFF}
. b1{Background:url (/articleimg/2006/07/3784/b1.jpg)}
. b2{Background:url (/articleimg/2006/07/3784/b2.jpg)}
. b3{Background:url (/articleimg/2006/07/3784/b3.jpg)}
. b4{Background:url (/articleimg/2006/07/3784/b4.jpg)}
. b5{Background:url (/articleimg/2006/07/3784/b5.jpg)}
. b6{Background:url (/articleimg/2006/07/3784/b6.jpg)}
</style>

CODE:

<div id= "Info" >
<div id= "ZS" >
<ul>
<li><a href= "http://www.blueidea.com" class= "B1 z" target= "_blank" title= "Photo 1" ><span><br/>
This is the photo 1<br/>
Www.blueidea.com</span></a></li>
<li><a href= "http://www.blueidea.com" class= "B2 z" target= "_blank" title= "Photo 2" ><span><br/>
This is the photo 2<br/>
Www.blueidea.com</span></a></li>
<li><a href= "http://www.blueidea.com" class= "B3 z" target= "_blank" title= "Photo 3" ><span><br/>
This is the photo 3<br/>
Www.blueidea.com</span></a></li>
<li><a href= "http://www.blueidea.com" class= "B4 z" target= "_blank" title= "Photo 4" ><span><br/>
This is the photo 4<br/>
Www.blueidea.com</span></a></li>
<li><a href= "http://www.blueidea.com" class= "B5 z" target= "_blank" title= "Photo 5" ><span><br/>
This is the photo 5<br/>
Www.blueidea.com</span></a></li>
<li><a href= "http://www.blueidea.com" class= "B6 z" target= "_blank" title= "Photo 6" ><span><br/>
This is the photo 6<br/>
Www.blueidea.com</span></a></li>
<li><a href= "http://www.blueidea.com" class= "B1 z" target= "_blank" title= "Photo 1" ><span><br/>
This is the photo 1<br/>
Www.blueidea.com</span></a></li>
<li><a href= "http://www.blueidea.com" class= "B2 z" target= "_blank" title= "Photo 2" ><span><br/>
This is the photo 2<br/>
Www.blueidea.com</span></a></li>
</ul>
</div>
</div>