Hvordan vi designer det samme layout ved hjælp af CSS? Ved hjælp af float attribut. Ved hjælp af CSS du dybest set opdele indholdet på din side i blokke, der afgrænses af de /... /tags. Svømmeren attribut giver mulighed for at placere (float) en del af dit indhold langs højre eller venstre margen på din blok. Resten af indholdet af denne blok vil flyde omkring din flydende del. Lad os gøre det.
Vi har brug for en HTML-side, og en CSS style sheet. Lad os se på HTML først.
Som du kan se, har vi inddelt hver logisk del af vores side i blokke. Som du kan se, er alle elementer i vores side (sidehoved, sidefod, navigation og indhold) indeholdt i en blok kaldet beholder, der dybest set er hele siden. Vi vil placere vores elementer inde i "container" plads. Som du kan forestille dig, vi kommer til at flyde navigationsblokken til venstre for vores "container" blok.
Her er koden til at arbejde magi.
Som Jeg sagde: Jeg vil ikke gå i detaljer her, forklarer, hvad hver kommando betyder. Men lad os gennemgå det hurtigt, påpege det, der interesserer os. Først og fremmest vi tildelt skrifttypen for siderne, specificere dens attribut. Vi tildelt også en formatering til H1 og H2 tags.
De "div # noget" opkald er, hvor vi tildeler en formatering og en bestemt adfærd til hver af blokkene, vi definerede i vores html. Bemærk de opfordringer til navigation og indhold. Vi tildelt navigationen "venstre" ejendom, hvilket placerer den på venstre side af vores side.
Derefter definerede vi kolonnebredde og hovedindholdet margin fra kolonnen. Bemærk venligst "klart: venstre" attribut vi tildelt til sidefoden. En almindelig fejl er at glemme denne attribut til sidefoden. Hvis du glemmer det, vil din footer ikke placeres nederst på siden, men i bunden af det vigtigste indhold område og til venstre for dit navigationssystem område. Hvis navigationen område er længere end din hovedindhold, vil det strække sig under sidefoden. Brug af "klart: venstre" attribut vi undgå denne fælles fejl.
Du kan argumentere for, at vi kan komme til det samme resultat med en mindre indsats og mindre kode ved hjælp af tabeller. Men husk: Det er kun en meget hurtig, hvordan man, jeg rørte kun de meget overflade CSS til at besvare det fælles spørgsmål: hvordan kan jeg designe en tableless