您现在的位置: 圆点视线 >> 教程 >> 网页设计 >> DIV+CSS专栏 >> 文章正文
用CSS制作照片走廊         ★★★
用CSS制作照片走廊
作者:fifty st…  文章来源:圆点视线整理  点击数:  更新时间:2007-4-3 10:30:19 
 页面功能:【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口 【字体:
用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">
<span><img src="../../updata/pic2.jpg" alt="Fishes" title="Fishes" />
<br />pic2.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slideb" href="#nogo" title="Funnels">
<span><img src="../../updata/pic3.jpg" alt="Funnels" title="Funnels" />
<br />pic3.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidec" href="#nogo" title="Vases">
<span><img src="../../updata/pic4.jpg" alt="Vases" title="Vases" />
<br />pic4.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slided" href="#nogo" title="Window">
<span><img src="../../updata/pic5.jpg" alt="Window" title="Window" />
<br />pic5.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidee" href="#nogo" title="Cascade">
<span><img src="../../updata/pic6.jpg" alt="Cascade" title="Cascade" />
<br />pic6.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidef" href="#nogo" title="Cascade">
<span><img src="../../updata/pic7.jpg" alt="Flowers" title="Flowers" />
<br />pic7.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slideg" href="#nogo" title="Cascade">
<span><img src="../../updata/pic8.jpg" alt="Butterfly" title="Butterfly" />
<br />pic8.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slideh" href="#nogo" title="Cascade">
<span><img src="../../updata/pic9.jpg" alt="Birds" title="Birds" />
<br />pic9.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidei" href="#nogo" title="Cascade">
<span><img src="../../updata/pic10.jpg" alt="Shells" title="Shells" />
<br />pic10.jpg<br />Photographs courtesy of morgueFile.com</span></a>
<a class="gallery slidej" href="#nogo" title="Cascade">
<span><img src="../../updata/pic11.jpg" alt="Fishing" title="Fishing" />
<br />pic11.jpg<br />Photographs courtesy of morgueFile.com</span></a>
</div>
</div>
查看效果:http://www.cssplay.co.uk/menu/scroll_gallery.html
 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 文章录入:apoints    责任编辑:apoints  【字体:
 
  • 上一篇文章:

  •  
  • 下一篇文章:
  • 最新文章
    相关文章
    XHTML+CSS的目的和好处(WEB标准的目的和好处
    常见的CSS问题的“一站式”的解决方案
    国外译文:网页设计如何使用CSS的选择器模式
    CSS实现图片阴影效果三部曲(译文)
    CSS实现不定高度DIV绝对居中
    25条CSS制作网页编写的提醒及小技巧整理
    Opera 中的 CSS 妙用 ── Flash block
    什么是用户定义的样式表?
    制作网页时手写CSS应该注意的一点技巧
    网页中用于构造图表的一些基本CSS代码
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    发表评论:
     姓  名: 评 分: 1分 2分 3分 4分 5分
     评论内容: ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点,与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门