How to set the DW button? Add Banner button instance in DW

This time I will show you how to add a Banner button in DW, and what are the precautions for adding a Banner button in DW. The following is a practical case, let's take a look.

1. Prepare a banner material, as shown in the picture, and place it in the img picture library.

2. Open the Dreamweaver software, ctrl nCreate a new html file and save it

3. Create content in the body, build the content box and Set the class name

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

in a The large frame contains the picture and two direction keys. Finally, position the left and right to the left and right positions

4. Add the style tag under the head, and set the width and height attribute values ​​​​for the banner:

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

5. Set the large frame banner to relative positioning, set the left button to absolute positioning, and set the position

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

6. Set absolute positioning for the right button and set the position

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

20 Precautions for using CSS code in front-end practical projects

Use pure CSS3 to intercept strings

The above is the detailed content of How to set the DW button? Add Banner button instance in DW. For more information, please follow other related articles on the PHP Chinese website!