Dreamweaver中banner两侧的按钮怎么添加?

所属分类: 网页制作 / Dreamweaver 阅读数: 2011
收藏 0 赞 0 分享

Dreamweaver网页中的banner图片需要切换,我们可以添加按钮来切换图片,下面我们就来看看详细的教程。

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

2、打开Dreamweaver软件,ctrl+n新建一个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>

在一个大框中包含图片和两个方向键,最后将左右定位到左右位置

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中的建单选按钮不能实现二选一该怎么办?

dreamweaver cs5怎么给网页添加设置为主页的按钮?

更多精彩内容其他人还在看

通过Dreamweaver学习了解CSS

层叠样式表 (CSS) 是一系列格式设置规则,它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时,内容与表现形式是相互分开的。页面内容(HTML 代码)位于自身的 HTML 文件中,而定义代码表现形式的 CSS 规则位于另一个文件(外部样式表)或 HTML 文档的另一
收藏 0 赞 0 分享

网页中插入Flash按钮与文本

  Flash 的动画按钮能够给网站带来动感,这让不少读者觉得十分有趣,同时也为网站增加了许多访客,其实在 Dreamweaver MX 2004 中只需几步简单的操作,就可以插入 Flash 按钮。   一、在网页中插入Flash 按钮   ( 1 )打开 Dr
收藏 0 赞 0 分享

写给喜欢用DW编写CSS人的一些建议

  在DreamWeaver中编写CSS,这种编写习惯并不提倡,不过由于"可视化"和操作简便,使用的朋友依然很多,今天罗列一些“最佳习惯”,希望对这些朋友有所帮助。   CSS正在改变网站设计的进程。为迎合不断增长的倾向于CSS的
收藏 0 赞 0 分享

在Dreamweaver中利用CSS样式表设置网页

  本文介绍如何在Dreamweaver 中使用层叠样式表 (CSS) 设置页面中的文本格式。您可以使用 CSS 以 HTML 无法提供的方式来设置文本格式和定位文本,从而能更加灵活自如地控制页面的外观。   了解 CSS   层叠样式表 (CSS) 是一系列格式设置
收藏 0 赞 0 分享

DreamWeaver中p标签br标签怎么使用?

DreamWeaver中p标签br标签怎么使用?DreamWeaver中想要让文字换行,该怎么实现呢?下面我们就来看看dw文字换行的两种方法,需要的朋友可以参考下
收藏 0 赞 0 分享

DreamWeaver怎么使用块状标签div?

DreamWeaver怎么使用块状标签div?DreamWeaver页面中想要使用块状标签,该怎么使用呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

dreamweaver怎么实现鼠标放在不同的位置显示不同的图片?

dreamweaver怎么实现鼠标放在不同的位置显示不同的图片?dw中想要制作图片切换效果 ,该怎么制作呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

Dreamweaver数据库连接出现错误404该怎么解决?

Dreamweaver数据库连接出现错误404该怎么解决?Dreamweaver在连接数据库的时候出现404错误,该怎么解决呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

Dreamweaver cs6怎么设计一款简单的网页?

Dreamweaver cs6怎么设计一款简单的网页?Dreamweaver中想要设计一款简单的网页,该怎么设计呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

Dreamweaver怎么输入文本并设置文本样式?

Dreamweaver怎么输入文本并设置文本样式?Dreamweaver设计网页的时候,想要输入文本并设置文本样式,该怎么设置呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多