Dreamweaver怎么制作手风琴图片展示效果?
百度经验 发布时间：2018-12-02 10:23:04 作者：怒浪吼 
我要评论
我要评论Dreamweaver怎么制作手风琴图片展示效果？Dreamweaver中想要制作动态图片，该怎么制作手风琴图片展示效果的交互呢？请看下文详细介绍，需要的朋友可以参考下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
Dreamweaver制作网页的时候，发现网页的浏览交互效果会使人感到爽心悦目的感觉，该怎么制作呢？下面我们就来看看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、弹出页面后，鼠标移到图片上面左右移动，就可以看到图片滑动效果。
以上就是dw制作手风琴图片展示效果的教程，希望大家喜欢，请继续关注程序员之家。
相关推荐：
dreamweaver中怎么交互图像? dw制作鼠标经过图像换图的教程
相关文章
Dreamweaver cc2018主题颜色怎么设置？Dreamweaver中想要设置主题颜色，该怎么设置呢？下面我们就来看看dw2018设置主题颜色的教程，需要的朋友可以参考下2018-09-28
Dreamweaver怎么制作虚线表格？Dreamweaver制作的表格是实线边框的，想要制作虚线边框，该怎么制作呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-08-23
Dreamweaver怎么添加windows字体？Dreamweaver设计网页的时候，想要添加windows系统中的字体，该怎么添加呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-08-09
Dreamweaver中CSS怎么制作径向圆形渐变？Dreamweaver中可以利用DIV+CSS制作圆形渐变效果，今天我们就来介绍五种简单的制作方法，需要的朋友可以参考下2018-08-01
Dreamweaver图片的亮度和对比度怎么设置？dw cs6中插入的图片想要简单的调节亮度和对比度，该怎么调节呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-07-31
Dreamweaver怎么设置div的背景颜色？dw cs6中想要设置div标签的背景颜色，该怎么设置呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-07-25
Dreamweaver中div标签怎么设置左右并排？Dreamweaver中div标签默认是上下并排的，想要设置成左右并排，该怎么设置呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-07-17
Dreamweaver2018项目列表怎么使用？Dreamweaver中的文本想要添加项目列表，看上去条理分明，该怎么添加项目列表呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-07-06
Dreamweaver2018怎么快速插入按钮？dw2018需要按钮，该怎么快速插入按钮，节省自己制作的时间呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-07-06
Dreamweaver2018怎么快速插入文本框？dw2018制作网页的时候，想要插入文本框，该怎么插入文本框呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-07-06
最新评论