这篇文章主要介绍了Dreamweaver如何制作手风琴图片展示效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
打开Dreamweaver cc 2014软件,选择建立html界面,里面自动生成一些必要代码的代码格式,节省时间。
先保存代码到一个建好的文件夹里,里面的已有准备好的将要做效果的图片的文件夹。
在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的文件路径的图片位置和图片命名都要一一对应。
在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键,弹出页面,可以看到图片。
弹出页面后,鼠标移到图片上面左右移动,就可以看到图片滑动效果。
感谢你能够认真阅读完这篇文章,希望小编分享的“Dreamweaver如何制作手风琴图片展示效果”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!