Hvordan lage Overlapp CSS Divs flytter sammen

September 4

Web design teknikker er basert på å være i stand til å manipulere HTML og CSS; henholdsvis, disse er Hypertext Markup Language og Cascading Style Sheets. Divs er HTML-elementer som brukes til å skille forskjellige typer innhold. For Webdesignere, å kunne visuelt manipulere divs er en viktig ferdighet. Faktisk er de fleste web-design basert på å være i stand til å manipulere divs. Å få to divs å okkupere samme plass i et nettleservindu som kan gjøres. Det er litt bakvendt, men krever ikke mye kode.

Bruksanvisning

1 Åpne et tekstredigeringsprogram som Notisblokk. Notepad er vanligvis funnet under Tilbehør-mappen på Start-menyen.

2 Skriv inn følgende kode:

<Html>

<Body>

<Style>

wrapper {width: 900px; margin: 0 auto; } Div1 {float: left; width: 300px; height: 300px; background-color: red; } DIV2 {float: left; width: 300px; height: 300px; background-color: blue; margin-left: -50px}

</ Style>

</ Div>

</ Div>

</ Body>

</ Html>

Lagre koden med en ".html" forlengelse. Åpne den i en nettleser. En rød og blå firkant vil være synlig. Hver fargede delen er faktisk et torg i den fargen. Siden de er overlappende, er det full farge av en av rutene ikke er synlig.

3 Endre følgende linje med kode:

DIV2 {float: left; width: 300px; height: 300px; background-color: blue; margin-left: -50px}

Slik at det lyder:

DIV2 {float: left; width: 300px; height: 300px; background-color: blue; margin-left: -300px}

Lagre filen og åpne den i en nettleser again.The blå firkanten vil være helt overlapp Red.