Wie stelle ich die DW-Taste ein? Banner-Schaltflächeninstanz in DW hinzufügen

Dieses Mal zeige ich Ihnen, wie Sie eine Banner-Schaltfläche in DW hinzufügen und welche Vorsichtsmaßnahmen beim Hinzufügen einer Banner-Schaltfläche in DW gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

1 Bereiten Sie ein Bannermaterial vor, wie im Bild gezeigt, und platzieren Sie es in der img-Bildbibliothek

Öffnen Sie die Dreamweaver-Software, Strg+NErstellen Sie eine neue HTML-Datei und speichern Sie sie

3. Erstellen Sie ein Inhaltsfeld im Hauptteil und legen Sie den Klassennamen fest

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

in Ein großes Feld enthält das Bild und zwei Richtungstasten. Positionieren Sie abschließend die linke und rechte Seite an der linken und rechten Position

4. Fügen Sie das Style-Tag unter dem hinzu head und legen Sie die Breiten- und Höhenattributwerte für das Banner fest:

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

5 Stellen Sie das große Rahmenbanner auf relative Positionierung ein, stellen Sie die linke Schaltfläche auf absolute Positionierung ein und legen Sie die Position fest

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

6 position

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

Ich glaube, Sie haben die Methode danach gemeistert Lesen Sie den Fall in diesem Artikel. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

20 Dinge, die Sie bei der Verwendung von CSS-Code in Frontend-Praxisprojekten beachten sollten

Verwenden Sie reines CSS3 Zeichenfolgen abfangen

Das obige ist der detaillierte Inhalt vonWie stelle ich die DW-Taste ein? Banner-Schaltflächeninstanz in DW hinzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!