本文详细介绍了如何使用HTML和CSS3来创建类似艺龙网站的炫酷效果，包括图片缩略图展示、点击图片放大以及文字介绍功能。通过项目准备、项目实现、效果展示和总结四个部分，逐步教你实现这一视觉效果。
【一、项目背景】
在浏览一些网站的时候，经常会看到很多的炫酷的效果去装饰页面，使它看起来更高端大气一些。比如，艺龙就采用了图片上加载文字，点击图片使把对应的图片放大，使用户清晰，直观的看到内容。这种效果该怎么做呢？
今天教大家用简单的html+css3结合制作艺龙的页面效果。
【二、项目准备】
1、图片：新建img文件，准备自己喜欢的五张图，保存在文件夹。
2、软件：Dreamweaver
【三、项目目标】
运行时：图片显示缩略图。文字显示在上面。
点击时：把对应的图片显示并放大，点击文字有详细的介绍。
【四、项目实现】
1、创建div 存放图片和文件，添加class属性。
<body>
<div class="show">
<div class="wap">
<div class="box" >
<img src="images/img1.jpg">
<span class='ba'>
</div>
<div class="box">
<img src="images/img2.jpg">
<span class='ba'></span>
</div>
<div class="box">
<img src
最低0.47元/天 解锁文章
1849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
