Hvordan Nest Posisjons Div Tags

February 10

DIV tags er HTML-tagger som skaper en DIV container. DIV beholdere kan brukes til å plassere eller stil tekst, bilder og andre DIV containere, og er vanligvis brukt til å lage den grunnleggende utformingen av en nettside. DIV beholdere kan plasseres ved hjelp av CSS "posisjon" eiendommen, sammen med informasjon som indikerer den relative eller absolutte posisjonen din trenger. Du kan også sette en DIV container i en annen beholder, som kalles "fuglefjell". Ved å kombinere posisjons egenskaper nestede DIV containere, kan du lage unike layout effekter som ville være vanskelig å gjenskape ved hjelp av HTML-tabeller eller "<span>" tags.

Bruksanvisning

1 Åpne nettsiders dokument i en HTML eller tekst editor. For å åpne dokumentet med de innfødte Windows tekst editor, høyreklikke på filen og klikk på «Åpne med." Klikk for å velge "Notisblokk" fra programlisten, og klikk deretter "OK".

2 Klikk for å plassere markøren på en linje i dokumentet, mellom "<BODY>" og "</ BODY>" koder, der du ønsker å opprette nestede DIV beholdere.

3 Type "<div style =" position: absolute; top: [x] px; venstre:. [y] px; '> "for å lage den ytre DIV beholder med" stilling "eiendom satt til" absolutt "Den" absolutt "verdi betyr at DIV er plassert på skjermen uten tilknytning til noen andre beholdere The. stilling av en "absolutt" side element er definert bare i forhold til nettleseren visningsområdet. Bytt ut "[x]" tekst med antall piksler fra toppen av skjermen som du ønsker å plassere DIV. Bytt ut " [y] "tekst med antall piksler du ønsker å plassere DIV fra venstre side av skjermen.

4 Type "<div style =" position: relative; top: [x] px; venstre: [y] px; '> "for å lage en nestet indre DIV beholder med en relativ posisjon." slektning "posisjon verdi gjør DIV beholder skjerm i en posisjon som er i forhold til sine inneholder sideelementer I dette tilfellet inneholder. side element er DIV container opprettet i forrige trinn. Bytt ut "[x]" tekst med avstanden i piksler du ønsker å vise den indre DIV container fra toppen av den ytre DIV container. Erstatt "[y]" med avstand i piksler som du ønsker å plassere den indre DIV container fra venstre kant av den ytre DIV beholder.

5 Skriv eller lim inn innhold som du ønsker å vise i indre DIV beholder.

6 Type "</ div>" for å lukke den indre DIV beholderen med den relative posisjonering.

7 Type "</ div>" for å lukke den ytre DIV beholder med absolutt posisjonering.

8 Klikk på "File" -menyen og klikk på "Lagre" for å lagre websiden dokumentet.

Hint

Man kan endre "posisjon" verdier av de ytre og indre DIV beholdere laget ovenfor for å skape en ytre DIV beholder med relativ posisjonering og en indre DIV beholder med absolutt posisjonering. Du kan også opprette nestet DIV beholder som begge har absolutt eller relativ posisjonering.