龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

用CSS制作制作一个照片演示特效代码-(0)

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
CSS代码 以下是引用片段: #info{ position:relative; background:#fffurl(../../updata/pic1b.gif)175px44pxno-repeat;} #scrollbox{ width:400px; height:80px; background:#f4f4f4; overflow:auto; border:1pxsolid#aaa; margin-left:175px; mar

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;}



精彩图集

赞助商链接