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

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

软件名称:
adobe dreamweaver cc 2014 32&64位中文破解安装版(附破解教程)
软件大小:
320MB
更新时间:
2014-06-25

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

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

3、在body标签内输入:

<ul>
  <li><img src=http://www.cppcns.com/web/dreamweaver/"images/ad1.jpg" alt="图片">
  
  • 图片
  • 图片
  • 图片
  • 图片
  • 图片
  • 注意: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怎么制作手风琴图片展示效果?

    扫一扫手机访问