Dreamweaver制作手风琴图片展示效果(附代码)

本篇文章给大家介绍一下Dreamweaver制作手风琴图片展示效果(附代码)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

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

1.jpg

2.jpg

3.jpg

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

4.jpg

5.jpg

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的文件路径的图片位置和图片命名都要一一对应。

6.jpg

7.jpg

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键,弹出页面,可以看到图片。

8.jpg

9.jpg

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

10.jpg

11.jpg

12.jpg

想要下载Dreamweaver或者更多工具,可访问:前端工具 !!

更多web前端知识,请查阅 HTML中文网 !!

以上就是Dreamweaver制作手风琴图片展示效果(附代码)的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » Dreamweaver

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏