Comment régler le bouton DW ? Ajouter une instance de bouton de bannière dans DW

Cette fois, je vais vous montrer comment ajouter un bouton Bannière dans DW, et quelles sont les précautions à prendre pour ajouter un bouton Bannière dans DW. Ce qui suit est un cas pratique, jetons un coup d'œil.

1. Préparez un matériau de bannière, comme indiqué sur l'image, et placez-le dans la bibliothèque d'images img

2. Ouvrez le logiciel Dreamweaver, . 🎜>ctrl+n

Créez un nouveau fichier html et enregistrez-le

3 Créez une zone de contenu dans le corps et définissez le nom de la classe

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

Contenir l'image et les deux touches de direction dans une grande case, et enfin positionner les positions gauche et droite

4. Ajouter la balise de style sous la tête, et définissez les valeurs des attributs de largeur et de hauteur​​pour la bannière :

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

5. Définissez la bannière à grand cadre sur un positionnement relatif, définissez le bouton gauche sur un positionnement absolu et définissez la position

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

6. Définissez le positionnement absolu du bouton droit et définissez le position

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

Je crois que vous maîtrisez la méthode après en lisant le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

20 éléments à noter lors de l'utilisation du code CSS dans des projets pratiques front-end

Utiliser du CSS3 pur pour intercepter les chaînes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!