这篇文章主要介绍了Dreamweaver如何制作手风琴图片展示效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
1、打开Dreamweaver cc 2014软件，选择建立html界面，里面自动生成一些必要代码的代码格式，节省时间。
2、先保存代码到一个建好的文件夹里，里面的已有准备好的将要做效果的图片的文件夹。
3、在body标签内输入：
<ul> <li><img src="images/ad1.jpg" alt="图片"></li> <li><img src="images/ad2.jpg" alt="图片"></li> <li><img src="images/ad3.jpg" alt="图片"></li> <li><img src="images/ad4.jpg" alt="图片"></li> <li><img src="images/ad5.jpg" alt="图片"></li> <li><img src="images/ad6.jpg" alt="图片"></li> </ul>
注意：src的文件路径的图片位置和图片命名都要一一对应。
4、在body标签前面位置，输入：
<style>
ul,li{list-style:none; padding:0; margin:0;}
ul{width:960px; height:300px; margin:100px auto; border:1px solid #000; overflow:hidden;}
ul li{
width:160px;
height:300px;
float:left;
background-color:red;
transition-property:width;
transition-duration:1s;
}
ul:hover li{
width:58px;
}
ul li:hover{
width:670px
}
</style>；输入完后，摁F12键，弹出页面，可以看到图片。
5、弹出页面后，鼠标移到图片上面左右移动，就可以看到图片滑动效果。
感谢你能够认真阅读完这篇文章，希望小编分享的“Dreamweaver如何制作手风琴图片展示效果”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
