Dreamweaver怎么制作手风琴图片展示效果?

Dreamweaver制作网页的时候，发现网页的浏览交互效果会使人感到爽心悦目的感觉，该怎么制作呢？下面我们就来看看Dreamweaver何展现手风琴图片的交互效果的教程。

软件名称：

adobe dreamweaver cc 2014 32&64位中文破解安装版(附破解教程)

软件大小：

320MB

更新时间：

2014-06-25

1、打开Dreamweaver cc  2014软件，选择建立html界面，里面自动生成一些必要代码的代码格式，节省时间。

2、先保存代码到一个建好的文件夹里，里面的已有准备好的将要做效果的图片的文件夹。

3、在body标签内输入：

1. <ul>
2. <li><img src="images/ad1.jpg" alt="图片"></li>
3. <li><img src="images/ad2.jpg" alt="图片"></li>
4. <li><img src="images/ad3.jpg" alt="图片"></li>
5. <li><img src="images/ad4.jpg" alt="图片"></li>
6. <li><img src="images/ad5.jpg" alt="图片"></li>
7. <li><img src="images/ad6.jpg" alt="图片"></li>
8. </ul>

注意：src的文件路径的图片位置和图片命名都要一一对应。

4、在body标签前面位置，输入：

1. <style>
2. ul,li{list-style:none; padding:0; margin:0;}
3. ul{width:960px; height:300px; margin:100px auto; border:1px solid #000; overflow:hidden;}
4. ul li{
5. width:160px;
6. height:300px;
7. float:left;
8. background-color:red;
9. transition-property:width;
10. transition-duration:1s;
11. }
12. ul:hover li{
13. width:58px;
14. }
15. ul li:hover{
16. width:670px
17. }
18. </style>；

输入完后，摁F12键，弹出页面，可以看到图片。

5、弹出页面后，鼠标移到图片上面左右移动，就可以看到图片滑动效果。

以上就是dw制作手风琴图片展示效果的教程，希望大家喜欢，请继续关注我们。