Hvordan å gi et dokumentoversikt med CSS3 - dummies

Bruk CSS3 til å lage et dokumentoversikt er nyttig når en side inneholder mye materiale og du vil at brukeren skal navigere det enkelt. Utsikten er avhengig av de forskjellige kodene du gir. Den nåværende metoden for å lage et dokumentoversikt er å bruke

gjennom

-kodene.

Denne tilnærmingen fungerer bra når materialet kommer fra samme side, eller du har kontroll over formateringen av innholdet. Det virker ikke så bra når innholdet kommer fra et annet sted, og derfor måtte standardgruppene komme opp med en helt ny måte å gjøre ting på.

Følgende prosedyre viser en teknikk for å legge til en oversikt over en side som allerede inneholder en meny. Du bruker navigasjonen som utgangspunkt.

1. Åpne navigasjonen. HTML-fil og legg til følgende kode til slutten av seksjonen (etter den eksisterende menyen).

   
   Hovedrubrik 1
   
   Underrubrik 1
   Underrubrik 2
   
   
   Hovedrubrik 2
   
   Underrubrik 3
   Underrubrik 4
   
   
   
   
   
   
   
   
   
   
   
   Hovedrubrik 1
   Innledende materiale
   
   Underrubrik 1
   Artikkel
   
   Underrubrik 2
   Artikkel
   
   Hovedrubrik 2
   Innledende materiale > Underoverskrift 3
   
   
   Artikkel
   Underrubrik 4
   
   
   Artikkel
   Oppføringene består av en dokumentoversikt og tilhørende innhold. Oversikten følger spesielt
   

   og

   -objektene i dette eksemplet. Det finnes metoder for å generere denne typen innhold automatisk, men alle krever koding.

   Dette er et tilfelle der bruk av CSS innebærer noen manuell koding som du ikke trenger å utføre når du bruker andre teknikker, som for eksempel JavaScript. Fordelen er imidlertid at eksemplet vil fungere bra med en hvilken som helst nettleser som støtter CSS.

   Lagre HTML-filen.

2. Åpne navigasjon. CSS og skriv inn følgende stiler på slutten av filen.

3. #DocOutline {font-family: Arial, Helvetica, sans-serif; skriftstørrelse: 14px; bredde: 145px; høyde: 800px;} #DocOutline ul {margin-bottom: 20px; listestil: none; margin-left: -40px;} #DocOutline ul ul {margin-left: -20px;} #DocContent {margin-top: -800px; margin-left: 150px;}

   Hovedfokus ligger på dokumentoversikten der du må gi formaterte koblinger til innholdet som finnes på resten av siden. Legg merke til at omrisset er satt til en bestemt høyde. Årsaken til denne innstillingen er å gjøre det lettere å plassere dokumentinnholdet når koblingene vises.
   

   Eksemplet setter #DocOutline ul style list-style-egenskapen til ingen. Du kan like enkelt bruke tall, bokstaver eller en annen oversiktlig indeks du foretrekker.

   Denne listen angir automatisk halvparten av avstanden til de enkelte menyelementene du opprettet tidligere. For å plassere linkene på venstre side av siden, må du reversere listens innrykk ved å sette margin-left til -40px, som er halvparten av 80px bredden av de enkelte menyelementene.

   Hvert nivå krever litt ekstra innrykk, slik at brukeren kan se de relative nivåene av hver oppføring. #DocOutline ul ul endrer innrykket for overskriftene på andre nivå. Hvis du hadde et tredje nivå på overskrifter, ville du opprette en #DocOutline ul ul ul-stil for å formatere den.

   Dokumentinnholdet starter etter dokumentoversikten, med mindre en av to ting skjer. Først kan du bruke faktiske kolonner. Denne funksjonaliteten krever imidlertid CSS3. For det andre kan du bruke pseudokolonner. Du angir margins topp eiendomsverdi lik høyden på dokumentoversikten.

   Teknikken som vises i dette eksemplet, vil fungere med en hvilken som helst nettleser som fullt ut støtter CSS. Legg merke til at du også må sette margin-venstre til en verdi som tilsvarer bredden på dokumentoversikten (pluss noen få piksler for avstand.

   Lagre CSS-filen.

4. Last opp navigasjonseksemplet.

5. Du ser dokumentoversikt og tilhørende innhold. Denne oversikten virker faktisk - du kan klikke på koblinger for å gå til de forskjellige overskriftene som presenteres i oversikten.