CSS3图片说明滑动特效-caption资源-CSDN文库

共12个文件

jpg：6个

css：2个

project：1个

CSS3

需积分: 9 88 浏览量 2013-04-26 15:31:00 上传评论收藏 197KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

Caption.zip （12个子文件）

css

master.css 2KB

images

2.jpg 56KB

1.jpg 34KB

6.jpg 14KB

3.jpg 35KB

5.jpg 15KB

4.jpg 38KB

index.html 2KB

.DS_Store 6KB

.project 313B

icon.png 3KB

style.css 7KB

<!DOCTYPE html> <html> <head> <title>Image Caption with CSS3</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="mainwrapper">  <div id="box-1" class="box"> <img id="image-1" src="images/1.jpg"/> <span class="caption simple-caption"> <p>Simple Caption</p> </span> </div>  <div id="box-2" class="box"> <img id="image-2" src="images/2.jpg"/> <span class="caption full-caption"> <h3>Full Caption</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div>  <div id="box-3" class="box"> <img id="image-3" src="images/3.jpg"/> <span class="caption fade-caption"> <h3>Fade Caption</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div>  <div id="box-4" class="box"> <img id="image-4" src="images/4.jpg"/> <span class="caption slide-caption"> <h3>Slide Caption</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div>  <div id="box-5" class="box"> <div class="rotate"> <img id="image-5" src="images/5.jpg"/> <span class="caption rotate-caption"> <h3>This is rotate caption</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div> </div>  <div id="box-6" class="box"> <img id="image-6" src="images/6.jpg"/> <span class="caption scale-caption"> <h3>Scale Caption</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div> </div> </body> </html>

评论收藏

内容反馈