黑松山资源网 Design By www.paidiu.com

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

软件名称:
adobe dreamweaver cc 2014 中文安装版 32&64位
软件大小:
320MB
更新时间:
2014-06-25立即下载

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上就是dw制作手风琴图片展示效果的教程,希望大家喜欢,请继续关注。

相关推荐:

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

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

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

黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。