Dreamweaver如何制做手风琴照片展现实际效果?

2020-10-31 03:42 jianzhan

Dreamweaver制做网页页面的情况下,发现网页页面的访问互动实际效果会令人觉得爽心悦目地觉得,该如何制做呢?下面大家就看来看Dreamweaver何呈现手风琴照片的互动实际效果的实例教程。

手机软件名字:
adobe dreamweaver cc 2014 汉语安裝版 32&64位
手机软件尺寸:
320MB
升级時间:
2014-06⑵5马上免费下载

1、开启Dreamweaver cc  2014手机软件,挑选创建html页面,里边全自动转化成1些必要编码的编码文件格式,节约時间。

2、先储存编码到1个建好的文档夹里,里边的已有提前准备好的即将做实际效果的照片的文档夹。

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的文档相对路径的照片部位和照片取名都要11对应

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制做电脑鼠标历经图象换图的实例教程