标题:css 画廊(图片查看器)怎么没显示大图片
只看楼主
jin522
Rank: 1
等 级:新手上路
帖 子:22
专家分:0
注 册:2010-10-11
结帖率:60%
 问题点数:0 回复次数:1 
css 画廊(图片查看器)怎么没显示大图片
程序代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www. xmlns="http://www. xml:lang="en">
<head>
<style type="text/css">
#into{
    position:relative;
    background:#fff 175px 44px no-repeat;
}
#scrollbox{
    width:400px;
    height:80px;
    background:#f4f4f4;
    overflow:auto;
    border:1px solid #aaa;
    margin-left:300px;
    margin-top:100px;
}
a.gallery,a.gallery:visited{
    display:block;
    color:#000;
    text-decoration:none;
    border:1px solid #000;
    width:75px;
    height:47px;
    margin:3px;
    float:left;
}
a.slidea{background:url("images/blue1.jpg");}
a.slideb{background:url("images/blue2.jpg");}
a.slidec{background:url("images/blue3.jpg");}
a.slided{background:url("images/red1.jpg");}
a.slidee{background:url("images/red2.jpg");}
a.slidef{background:url("images/red3.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:450px;
    heigth:390px;
    top:1px;
    left:270px;
    padding:5px;
    font-style:italic;
    color:#000;
    background:#fff;
    z-index:100;
}
a.gallery:active{
    border:1px solid #eee;
}

#thumbs{
    width:840px;
    height:60px;
}
#pad{
    height:310px;
    width:100px;
}
</style>
</head>
<body>
<div id="info">

 <div id="pad"></div>

 <div class="slidek"></div>

 <div id="scrollbox">
  <div id="thumbs">
   <a class="gallery slidea" href="#" title="telephoto"><span>
    <img src="imgaes/blue1.jpg" alt="蓝色1" title=""/>
    <br/>blue1.jpg<br/>蓝色1</span>
   </a>
   <a class="gallery slideb" href="#" title="telephoto"><span>
    <img src="imgaes/blue2.jpg" alt="蓝色2" title=""/>
    <br/>blue1.jpg<br/>蓝色2</span>
   </a>
   <a class="gallery slidec" href="#" title="telephoto"><span>
    <img src="imgaes/blue3.jpg" alt="蓝色3" title=""/>
    <br/>blue1.jpg<br/>蓝色3</span>
   </a>
   <a class="gallery slided" href="#" title="telephoto"><span>
    <img src="imgaes/red1.jpg" alt="红色1" title=""/>
    <br/>blue1.jpg<br/>红色1</span>
   </a>
   <a class="gallery slidee" href="#" title="telephoto"><span>
    <img src="imgaes/red2.jpg" alt="红色2" title=""/>
    <br/>blue1.jpg<br/>红色2</span>
   </a>
   <a class="gallery slidef" href="#" title="telephoto"><span>
    <img src="imgaes/red3.jpg" alt="红色3" title=""/>
    <br/>blue1.jpg<br/>红色3</span>
   </a>
  </div>

 </div>
</div>
</body>
</html>
搜索更多相关主题的帖子: 画廊 css 
2010-12-22 14:33
foktime
Rank: 11Rank: 11Rank: 11Rank: 11
来 自:奥斯维辛
等 级:贵宾
威 望:35
帖 子:795
专家分:2742
注 册:2009-9-4
得分:0 
a.gallery:hover span{
    display:block;
    position:absolute;
    width:450px;
    heigth:390px; //应该是height
    top:1px;
    left:270px;
    padding:5px;
    font-style:italic;
    color:#000;
    background:#fff;
    z-index:100;
}
2010-12-22 16:49



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-329596-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.013948 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved