Hvordan designe vi samme layout ved hjelp av CSS? Bruke float attributtet. Ved hjelp av CSS du i utgangspunktet dele innholdet på siden i blokker, avgrenset av /... /tags. Flottøren attributtet kan du plassere (float) en del av innholdet langs høyre eller venstre marg på blokken din. Resten av innholdet i denne blokken vil flyte rundt flytende delen. La oss gjøre det. Vi trenger en HTML-side og en CSS-stilark. La oss se på HTML først.
Som du ser, har vi delt hver logisk del av vår side i blokker.
Som du kan se, er alle elementer av vår side (header, footer, navigasjon og innhold) som inngår i en blokk som heter container, som i utgangspunktet er hele siden. Vi vil plassere våre elementer inne i "container" plass. Som du kan forestille deg, vi kommer til å flyte navigeringsblokken til venstre for vår "container" block.
Her er koden for å arbeide magi.
Som Jeg sa: Jeg vil ikke gå i detaljer her, forklarer hva hver kommando betyr. Men la oss gå gjennom det raskt, og peker på det som interesserer oss.
Først av alt vi tildelt skriften for sidene, spesifiserer sin attributt. Vi har også tildelt en formatering til H1 og H2-tagger.
"div # noe" samtaler er der vi tildele en formatering og en bestemt atferd til hver av blokkene vi definert i vår html. Vær oppmerksom på samtalene for navigasjon og innhold. Vi tildelt navigasjons "venstre" eiendom, plassere den på venstre side av vår side. Så vi definert kolonnebredden og hovedinnholdet margin fra kolonnen. Vær oppmerksom på at "klar: left" attributt vi tildelt bunnteksten. En vanlig feil er å glemme dette attributtet til bunnteksten.
Hvis du glemmer det, vil footer ikke plasseres nederst på siden, men på bunnen av hovedinnholdet området og på venstre side av navigasjonsområdet. Hvis navigasjonsområdet er lengre enn hovedinnholdet, vil det forlenge under bunnteksten. Bruke "klar: left" attributt vi unngå dette vanlig feil. Du kan argumentere for at vi kan få til det samme resultatet med mindre innsats og mindre kode ved hjelp av tabeller.
Men husk: dette er bare en veldig rask hvordan, jeg bare rørte veldig overflaten av CSS for å svare på vanlige spørsmål: hvordan lager jeg en tableless side med CSS? For å gi deg en idé om kraften i CSS, hvis vi ønsker å endre fra vertikal navigering til horisontal navigasjon, alt vi må gjøre er å endre noen få linjer med kode i vår CSS og utformingen av alle våre sider vil endre seg. Anmel