用CSS制作照片走廊

【 tulaoshi.com - Web开发 】

CSS代码
以下是引用片段：#info { position:relative; background:#fff url(../../updata/pic1b.gif) 175px 44px no-repeat;} #scrollbox { width:400px; height:80px; background:#f4f4f4; overflow:auto; border:1px solid #aaa; margin-left:175px; margin-top:70px;} a.gallery, a.gallery:visited { display:block;  color:#000;  ext-decoration:none; border:1px solid #000; width:75px; height:47px; margin:3px; float:left;} a.slidea {background:url(../../updata/thumb2.jpg);} a.slideb {background:url(../../updata/thumb3.jpg);} a.slidec {background:url(../../updata/thumb4.jpg);} a.slided {background:url(../../updata/thumb5.jpg);} a.slidee {background:url(../../updata/thumb6.jpg);} a.slidef {background:url(../../updata/thumb7.jpg);} a.slideg {background:url(../../updata/thumb8.jpg);} a.slideh {background:url(../../updata/thumb9.jpg);} a.slidei {background:url(../../updata/thumb10.jpg);} a.slidej {background:url(../../updata/thumb11.jpg);} a.gallery span { display:block; position:absolute; left:150px; top:-1px; width:1px; height:1px; overflow:hidden; background:#efedec; z-index:100;} a.gallery:hover {white-space:normal; border:1px solid #fff;} a.gallery:hover img {border:1px solid #000; z-index:100;} a.gallery:active img, a.gallery:focus img {border:1px solid #000; z-index:50;} a.gallery:hover span { display:block; position:absolute; width:402px; height:290px; top:39px; left:170px; padding:5px; font-style:italic; color:#000; background:#fff; z-index:100;} a.gallery:active {border:1px solid #eee;} a.gallery:active span, a.gallery:focus span { display:block; position:absolute; width:402px; height:290px; top:39px; left:170px; padding:5px; font-style:italic;color:#000; background:#fff; z-index:50;} #thumbs {width:840px; height:60px;} #pad {height:310px; width:100px;} 针对IE6

以下是引用片段：!--[if lte IE 6] style #ads {display:none;} #adsie {clear:both; text-align:center; width:750px; margin-top:10px;} /style ![endif]-- XHTML部分
以下是引用片段：div id="info" div id="pad"/div div class="slidek"/div div id="scrollbox" div id="thumbs" a class="gallery slidea" href="#nogo" title="Fishes" spanimg src="../../updata/pic2.jpg" alt="Fishes" title="Fishes" / br /pic2.jpgbr /Photographs courtesy of morgueFile.com/span/a a class="gallery slideb" href="#nogo" title="Funnels" spanimg src="../../updata/pic3.jpg" alt="Funnels" title="Funnels" / br /pic3.jpgbr /Photographs courtesy of morgueFile.com/span/a a class="gallery slidec" href="#nogo" title="Vases" spanimg src="../../updata/pic4.jpg" alt="Vases" title="Vases" / br /pic4.jpgbr /Photographs courtesy of morgueFile.com/span/a a class="gallery slided" href="#nogo" title="Window" spanimg src="../../updata/pic5.jpg" alt="Window" title="Window" / br /pic5.jpgbr /Photographs courtesy of morgueFile.com/span/a a class="gallery slidee" href="#nogo" title="Cascade" spanimg src="../../updata/pic6.jpg" alt="Cascade" title="Cascade" / br /pic6.jpgbr /Photographs courtesy of morgueFile.com/span/a a class="gallery slidef" href="#nogo" title="Cascade" spanimg src="../../updata/pic7.jpg" alt="Flowers" title="Flowers" / br /pic7.jpgbr /Photographs courtesy of morgueFile.com/span/a a class="gallery slideg" href="#nogo" title="Cascade" spanimg src="../../updata/pic8.jpg" alt="Butterfly" title="Butterfly" / br /pic8.jpgbr /Photographs courtesy of morgueFile.com/span/a a class="gallery slideh" href="#nogo" title="Cascade" spanimg src="../../updata/pic9.jpg" alt="Birds" title="Birds" / br /pic9.jpgbr /Photographs courtesy of morgueFile.com/span/a a class="gallery slidei" href="#nogo" title="Cascade" spanimg src="../../updata/pic10.jpg" alt="Shells" title="Shells" / br /pic10.jpgbr /Photographs courtesy of morgueFile.com/span/a a class="gallery slidej" href="#nogo" title="Cascade" spanimg src="../../updata/pic11.jpg" alt="Fishing" title="Fishing" / br /pic11.jpgbr /Photographs courtesy of morgueFile.com/span/a /div /div