Hvordan bruke en wrapper Div

Hvordan bruke en wrapper Div


I de tidlige dagene av Internett, websider blandet innhold og formatering i samme dokument. Det var en grei - hvis mindre enn elegant - tilnærming. Nettsider som hadde flere paneler av innhold, for eksempel overskrifter, bunntekst og sidefelt, brukes ofte tabeller til å kontrollere layouten. Nyere standarder foreskrevet ved hjelp av divs i stedet for tabeller for å kontrollere oppsettet, som tillot formatering som skal kontrolleres eksternt. Det er gjort for renere - og raskere lasting - innhold.

Wrapper Divs Definert

I Web-tale, er en div et HTML-element, som ligner på overskriften eller ledd koder. Forskjellen er at divs er mest brukt til å "pakke inn" deler av innhold, i motsetning til å være nøye seg. Mens noen div kan være en wrapper, i vanlig bruk, er den wrapper div som inneholder alt annet innhold på en side, inkludert andre divs.

CSS til unnsetning

Mange moderne websider skille innhold fra formatering ved hjelp av gjennomgripende stilark. CSS-filer ga programmerere fleksibilitet til å angi formatering elementer som fonter og bakgrunner uavhengig av innholdet. Det ga dem også muligheten til å ha en CSS-fil kontroll formateringen av potensielt hver side av nettstedet. Endre en font ble så enkelt som å oppdatere én linje i stilarket.

Bruke Wrapper

Du kan bruke en div til å legge inn header eller navigeringsmenyen. Fordelen med denne tilnærmingen er at du kan tildele en ID eller klasse til at wrapper, som lar deg deretter målrette den og dens innhold ved å påberope seg ID eller klasse navn i CSS. Du kan bryte navigasjonselementer, for eksempel i en div og gi den "menyen" klasse. Så, i CSS, kan du angi attributter som bare gjelder den "meny" div, og ignorere alt annet på siden. HTML-koden kan se slik ut:

<Div class = "meny">
... Menyen innhold går her
</ Div>

Så, i CSS, kan du style det, som dette:

div.menu {... CSS-koden går her}