Nwlapcug.com


Come fare DIV CSS Drop pannelli sovrapposti

CSS permette di sovrapporre i tag div, quindi è possibile creare un'immagine da immagini separate. Questo significa che si possono tagliare immagini in file più piccoli per produrre meno carico del server, che rende le pagine si caricano più velocemente nel browser dell'utente. Le classi CSS forniscono un modo per creare menu, visual indicazioni stradali e le intestazioni sito dalle vostre immagini.

Istruzioni

1

Pulsante destro del mouse il file HTML che si desidera modificare che contiene il vostro div. Fare clic su "Apri con", quindi fare clic sul programma di editor HTML che si desidera utilizzare.

2

Creare le classi CSS. In questo esempio, vengono utilizzati due div sovrapposti e ogni div contiene un'immagine. Il seguente codice CSS imposta il div sovrapposti proprietà:

< script type = "text/css" >

div.leftimage{float:Left;}

div.rightimage{float:Right;}

div.leftimage_width{Width:200px;}

div.rightimage_width{Width:300px;}

div.Overlap{position:relative;left:20px}

< / script >

3

Impostare i div si sovrappongono. Il seguente codice HTML crea due div tag, che si utilizza per i pannelli sovrapposti:

< div class = "leftimage leftimage_width sovrapposizione >< img >< / div >

< div class = "rightimage rightimage_width >< img >< / div >

Sostituire le immagini con le tue immagini del pannello.

4

Salvare il file e aprire la pagina HTML nel browser Web. Rivedere i div sovrapposti. Se si desidera spostare l'immagine verso sinistra o destra, è necessario modificare le impostazioni di classe CSS. In genere, ci vogliono un paio di prove prima di capire le impostazioni di pixel corretta per i tag div.