Dreamweaver中banner两边的按钮如何加上?

日期:2020-12-14 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

Dreamweaver网页页面中的banner照片必须切换,大家能够加上按钮来切换照片,下面大家就看来看详尽的实例教程。

手机软件名字:
Adobe Dreamweaver CC 2018 V18.0 汉语/英文安裝版 32/64位
手机软件尺寸:
968MB
升级時间:
2017⑴0⑴9马上免费下载

1、提前准备好1张banner素材,如图,放在img照片库中

2、开启Dreamweaver手机软件,ctrl+n新建1个html文档并储存

3、在body中创建內容搭建內容框并设定类名字

<div class="banner">
<img src="img/banner.jpg" >
<input type="button" value="左"  class="bt_left">
    <input type="button" value="右" class="bt_right">
</div>

在1个大框中包括照片和两个方位键,最终将上下精准定位到上下部位

4、在head下添加style标识,对banner设定宽高特性值:

<style>
.banner{width:1200px;height:300px;margin:0 auto;overflow:hidden;}
.banner img{width:100%;}
</style>

5、对大框banner设定为相对性精准定位,设定左边按钮肯定精准定位,并设定部位

.bt_left{position:absolute;top:50%;left:20px;}

6、对右边按钮设定肯定精准定位,并设定部位

.bt_right{position:absolute;top:50%;right:20px;}

以上便是Dreamweaver给banner加上上下按钮的实例教程,期待大伙儿喜爱,请再次关心脚本制作之家。

有关强烈推荐:

Dreamweaver如何自身制做图型按钮?

DW中的建单选按钮不可以完成2选1应该怎么办?

dreamweaver cs5如何给网页页面加上设定为首页的按钮?