<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS控制漂亮的缩略图样式 - 分享JavaScript-sharejs.com</title>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: 800px;
color: #000000;
font: normal 80%/120% Georgia, "Times New Roman", Times, serif;
}
a {
color: #000000;
}
h1 {
font: normal 320%/100% Georgia, "Times New Roman", Times, serif;
margin: 20px 0 5px 10px;
letter-spacing: -2px;
}
.credits {
border-bottom: solid 1px #ccc;
padding-bottom: 5px;
margin: 0 0 30px 10px;
font: 120% Garamond, Georgia, serif;
}
.credits em {
color: #999;
}
.credits a {
color: #666;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
}
.credits a:hover {
color: #000;
}
img {
border: none;
}
.footer {
clear: both;
margin-bottom: 30px;
border-top: solid 1px #ccc;
padding-top: 5px;
text-align: center;
}
.footer a {
color: #999;
}
.footer a:hover {
color: #000;
}
/* ---------- gallery styles start here ----------------------- */
.photo {
margin: 30px;
position: relative;
width: 180px;
height: 130px;
float: left;
}
.photo img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.photo span {
width: 20px;
height: 18px;
display: block;
position: absolute;
top: 12px;
left: 12px;
background: url(images/digg-style.gif) no-repeat;
}
.photo a {
text-decoration: none;
}
.sample1 span {
width: 28px;
height: 21px;
display: block;
position: absolute;
top: -12px;
left: 90px;
background: url(images/pin.png) no-repeat;
}
.sample2 span {
width: 77px;
height: 27px;
display: block;
position: absolute;
top: -12px;
left: 50px;
background: url(images/tape.png) no-repeat;
}
.sample3 span {
width: 30px;
height: 60px;
display: block;
position: absolute;
top: -5px;
left: -2px;
background: url(images/paper-clip.png) no-repeat;
}
.sample4 span {
width: 115px;
height: 32px;
display: block;
position: absolute;
top: -13px;
left: 30px;
background: url(images/tape2.png) no-repeat;
}
.sample5 span {
width: 216px;
height: 166px;
display: block;
position: absolute;
top: -17px;
left: -18px;
background: url(images/gold-frame.png) no-repeat;
}
.sample6 span {
width: 189px;
height: 137px;
display: block;
position: absolute;
top: -5px;
left: -5px;
background: url(images/cut-corner.png) no-repeat;
}
.sample7 span {
width: 170px;
height: 120px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(images/round-corner.png) no-repeat;
}
.sample7 img {
border: none;
padding: 0;
}
.sample8 span {
width: 170px;
height: 120px;
display: block;
position: absolute;
top: 5px;
left: 6px;
background: url(images/round-corner.png) no-repeat;
}
.sample8 img {
border: none;
padding: 5px 6px 6px;
background: url(images/round-bg.gif) no-repeat;
}
.sample9 span {
width: 170px;
height: 120px;
display: block;
position: absolute;
top: 6px;
left: 7px;
background: url(images/stamp-pattern.png) no-repeat;
}
.sample9 img {
border: none;
padding: 6px 7px 7px;
background: url(images/stamp-bg.gif) no-repeat;
}
.sample10 span {
width: 181px;
height: 134px;
display: block;
position: absolute;
top: -6px;
left: -6px;
background: url(images/brush-border.png) no-repeat;
}
.sample10 img {
border: none;
padding: 0;
}
.sample11 span {
width: 122px;
height: 72px;
display: block;
position: absolute;
top: -22px;
left: -15px;
background: url(images/floral-corner.png) no-repeat;
}
.sample12 span {
width: 186px;
height: 137px;
display: block;
position: absolute;
top: 2px;
left: 2px;
background: url(images/watercolor-top.png) no-repeat;
}
.sample12 img {
border: none;
padding: 9px 12px 12px 11px;
background: url(images/watercolor-bg.png) no-repeat;
}
.sample13 span {
width: 170px;
height: 120px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(images/mask.png) no-repeat;
}
.sample13 img {
border: none;
padding: 0;
}
.sample14 span {
width: 170px;
height: 84px;
display: block;
position: absolute;
top: 5px;
left: 5px;
background: url(images/glossy-gradient.png);
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.photo span { behavior: url(iepngfix.htc); cursor: pointer; }
.sample12 img {
background: url(images/watercolor-bg.gif) no-repeat;
}
</style>
<![endif]-->
</head>
<body>
<h1>CSS Decorative Gallery / Demos</h1>
<p class="credits"><em>by:</em> <a href="http://www.webdesignerwall.com">Web Designer Wall</a></p>
<div class="photo">
<a href="#"><span></span>
<img src="images/11.jpg" alt="image" />
</a>
</div>
<div class="photo sample1">
<a href="#"><span></span>
<img src="images/9.jpg" alt="image" />
</a>
</div>
<div class="photo sample2">
<a href="#"><span></span>
<img src="images/13.jpg" alt="image" />
</a>
</div>
<div class="photo sample3">
<a href="#"><span></span>
<img src="images/2.jpg" alt="image" />
</a>
</div>
<div class="photo sample4">
<a href="#"><span></span>
<img src="images/9.jpg" alt="image" />
</a>
</div>
<div class="photo sample5">
<a href="#"><span></span>
<img src="images/6.jpg" alt="image" />
</a>
</div>
<div class="photo sample6">
<a href="#"><span></span>
<img src="images/10.jpg" alt="image" />
</a>
</div>
<div class="photo sample7">
<a href="#"><span></span>
<img src="images/12.jpg" alt="image" />
</a>
</div>
<div class="photo sample8">
<a href="#"><span></span>
<img src="images/14.jpg" alt="image" />
</a>
</div>
<div class="photo sample9">
<a href="#"><span></span>
<img src="images/5.jpg" alt="image" />
</a>
</div>
<div class="photo sample10">
<a href="#"><span></span>
<img src="images/4.jpg" alt="image" />
</a>
</div>
<div class="photo sample11">
<a href="#"><span></span>
<img src="images/8.jpg" alt="image" />
</a>
</div>
<div class="photo sample12">
<a href="#"><span></span>
<img src="images/9.jpg" alt="image" />
</a>
</div>
<div class="photo sample13">
<a href="#"><span></span>
<img src="images/13.jpg" alt="image" />
</a>
</div>
<div class="photo sample14">
<a href="#"><span></span>
<img src="images/5.jpg" alt="image" />
</a>
</div>
<p class="footer">
</p>
<br><br>
</body>
</html>
CSS控制漂亮的缩略图样式
需积分: 28 141 浏览量
2009-05-04
10:13:48
上传
评论
收藏 1.11MB RAR 举报
CSS控制漂亮的缩略图样式.rar （94个子文件） 
CSS控制漂亮的缩略图样式 
iepngfix.htc 2KB
4b_cork-masking-tape.html 3KB 8_wood-panel.html 3KB 4_cork-board.html 3KB 2b_popup-title.html 3KB sifr 
cochin.swf 74KB sketch-rockwell.swf 513KB sIFR-print.css 883B sIFR-screen.css 1KB hand-of-sean.swf 22KB sifr.js 30KB .DS_Store 6KB rockwell.swf 36KB sifr-debug.js 5KB sifr-config.js 0B decorative-gallery-index-jquery.html 6KB 4b_cork-masking-tape-ie6.html 3KB 3_mini-paper-clip.html 3KB 6_watercolor.html 3KB 1b_mini-icons.html 3KB 7_glossy.html 3KB 1_simple-gallery.html 2KB 4_cork-board-sifr.html 4KB 5b_gallery-gold-frame.html 3KB 5_gallery-black-frame.html 3KB images 
5.jpg 15KB
grey-gradient.gif 95B
paper-clip.png 2KB orange-gradient.gif 95B tile-bg.gif 5KB watercolor-bg.png 6KB polaroid-short.png 2KB glossy-gradient.png 2KB paper-clip.gif 888B 3.jpg 10KB brush-border.png 3KB polaroid.png 2KB flower-bg.gif 19KB 8.jpg 12KB 4.jpg 7KB watercolor-top.png 9KB gold-frame.gif 15KB cut-corner.png 4KB stamp-bg.gif 2KB stamp-pattern.png 2KB 12.jpg 9KB pin.png 1KB 9.jpg 10KB mask.png 4KB wood-bg.jpg 9KB round-bg.gif 1KB 2.jpg 13KB paper-clip-mini.png 1KB watercolor-mask.png 11KB cork-bg.png 26KB 10.jpg 7KB gold-frame.png 32KB arrow.gif 173B white-gradient.png 276B polaroid2.png 675B picture-frame.gif 3KB photo.gif 1KB round-corner.png 578B stamp-bg.png 4KB bubble.gif 681B floral-corner.png 7KB drop-shadow.gif 1KB watercolor-bg-tall.png 8KB 1.jpg 10KB Thumbs.db 140KB round-bg.png 1KB play.gif 641B 11.jpg 8KB 14.jpg 8KB 6.jpg 11KB picture-frame.png 2KB gradient-bg.gif 357B tape.png 743B 15.jpg 8KB digg-style.gif 619B .DS_Store 6KB watercolor-bg.gif 5KB drop-shadow.png 1KB tape2.png 7KB video.gif 1KB 7.jpg 10KB favorite.gif 1KB 13.jpg 9KB jquery.js 30KB 2_photo-with-text.html 3KB index.html 6KB .DS_Store 6KB 4_cork-board-ie6.html 3KB 6_watercolor-sifr.html 4KB资源评论
zhongchen110
- 粉丝: 3
- 资源: 65
最新资源
- 流程图转PAD-N-S图和伪码(软件工程).doc
- C#winform excel导入导出
- 毕业论文上传111111111111
- raisin.zip
- 322个地级市-市场分割指数、市场一体化指数+居民消费价格指数（2004-2022年）.txt
- 《基于Java实现自定义控件-天气温度折线图 》+源代码+设计资料
- 希尔伯特矩阵来综合演示数值矩阵与符号矩阵的基本操作
- 《基于51单片机和DS18B20的温度检测和报警系统，可设置报警温度上下限，输出温度采用数码管显示 》+源代码+设计资料
- ESP8266WIFI系统工作原理图.schdoc
- C语言《基于STM32的测量温度与压力的数据处理设计 》+源代码+设计资料
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
