用CSS制作制作一个照片演示特效代码

2009-12-16 02:43| 发布者: admin| 查看: 41| 评论: 0|原作者: 心然

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
以下是引用片段：

XHTML部分
以下是引用片段：