用CSS制作照片走廊

玉树传说

玉树传说

2016-02-19 17:45

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的用CSS制作照片走廊,手机电脑控们准备好了吗?一起看过来吧!

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

以下是引用片段:!--[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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

用CSS制作照片走廊

Web开发
用CSS制作照片走廊

怎样选择走廊灯 走廊用什么灯好

怎样选择走廊灯 走廊用什么灯好

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

走廊风水 走廊的平面位置

风水 走廊背景墙效果图
走廊风水 走廊的平面位置

CSS实例:用CSS制作网页像素画

Web开发
CSS实例:用CSS制作网页像素画

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS制作网页实例:用CSS控制li标记样式

Web开发
CSS制作网页实例:用CSS控制li标记样式

用CSS制作Alpha滤镜测试板

Web开发
用CSS制作Alpha滤镜测试板

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

旁门左道 你没见过的CSS效果

旁门左道 你没见过的CSS效果

超圆滑圆角框的半完美解决方案

超圆滑圆角框的半完美解决方案
下拉加载更多内容 ↓