澳门博彩官网

百度经验   发布时间:2018-12-02 10:23:04   作者:怒浪吼   我要评论

Dreamweaver怎么制作手风琴图片展示效果?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="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制作手风琴图片展示效果的教程,希望大家喜欢,请继续关注脚本之家。

相关推荐:

DW怎么设置网站的背景图像?

dreamweaver中怎么将文字放到图片上?

dreamweaver中怎么交互图像? dw制作鼠标经过图像换图的教程

相关文章

  • Dreamweaver cc2018主题颜色怎么设置?

    Dreamweaver cc2018主题颜色怎么设置?Dreamweaver中想要设置主题颜色,该怎么设置呢?下面我们就来看看dw2018设置主题颜色的教程,需要的朋友可以参考下
    2018-09-28
  • Dreamweaver怎么制作虚线表格?

    Dreamweaver怎么制作虚线表格?Dreamweaver制作的表格是实线边框的,想要制作虚线边框,该怎么制作呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-08-23
  • Dreamweaver怎么添加windows字体?

    Dreamweaver怎么添加windows字体?Dreamweaver设计网页的时候,想要添加windows系统中的字体,该怎么添加呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-08-09
  • Dreamweaver中CSS怎么制作径向圆形渐变?

    Dreamweaver中CSS怎么制作径向圆形渐变?Dreamweaver中可以利用DIV+CSS制作圆形渐变效果,今天我们就来介绍五种简单的制作方法,需要的朋友可以参考下
    2018-08-01
  • Dreamweaver图片的亮度和对比度怎么设置?

    Dreamweaver图片的亮度和对比度怎么设置?dw cs6中插入的图片想要简单的调节亮度和对比度,该怎么调节呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-07-31
  • Dreamweaver怎么设置div的背景颜色?

    Dreamweaver怎么设置div的背景颜色?dw cs6中想要设置div标签的背景颜色,该怎么设置呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-07-25
  • Dreamweaver中div标签怎么设置左右并排?

    Dreamweaver中div标签怎么设置左右并排?Dreamweaver中div标签默认是上下并排的,想要设置成左右并排,该怎么设置呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-07-17
  • Dreamweaver2018怎么插入项目列表?

    Dreamweaver2018项目列表怎么使用?Dreamweaver中的文本想要添加项目列表,看上去条理分明,该怎么添加项目列表呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-07-06
  • Dreamweaver2018怎么快速插入按钮?

    Dreamweaver2018怎么快速插入按钮?dw2018需要按钮,该怎么快速插入按钮,节省自己制作的时间呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-07-06
  • Dreamweaver2018怎么快速插入文本框?

    Dreamweaver2018怎么快速插入文本框?dw2018制作网页的时候,想要插入文本框,该怎么插入文本框呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-07-06

最新评论