Hur kan vi utforma samma layout med CSS? Använda flyt attributet. Med hjälp av CSS du i princip dela upp innehållet på din sida i block, som avgränsas av de /... /taggar. Flyt attribut kan du placera (float) en del av ditt innehåll längs höger eller vänster marginal på ditt kvarter. Resten av innehållet i detta block kommer att flyta runt flytande del. Låt oss göra det. Vi behöver en HTML-sida och en CSS-formatmall. Låt oss titta på HTML först.
Omdömen
Som ni kan se, vi har delat varje logisk del av vår sida i block. Som ni kan se, är alla delar av vår sida (rubrik, sidfot, navigation och innehåll) som finns i ett block som kallas behållare, som i princip är hela sidan. Vi kommer att placera våra element inne i "container" utrymme. Som ni kan föreställa er, vi kommer att flyta navigeringsblocket till vänster om vår "container" block. Omdömen
Här är koden för att arbeta magi. Omdömen
Omdömen
Som Jag sa, jag kommer inte att gå in på detaljer här, förklarar vad varje kommandoorgan.
Men låt oss granska det snabbt, pekar ut vad som intresserar oss. Först av allt vi tilldelade teckensnittet för sidorna, specificera dess attribut. Vi tilldelas också en formatering till H1 och H2-taggar. Omdömen
"div # något" samtal där vi tilldelar en formatering och ett specifikt beteende till vart och ett av blocken vi definieras i vår html. Observera ansöknings navigation och innehåll. Vi tilldelas navigation "vänster" egendom, placera den på vänster sida av vår sida. Sedan fastställde vi kolumnbredden och det huvudsakliga innehållet marginalen från kolonnen.
Observera "clear: left" attribut vi tilldelats sidfoten. Ett vanligt misstag är att glömma detta attribut till sidfoten. Om du glömmer det, kommer din sidfot inte placeras längst ner på sidan, men längst ned på huvudinnehållet området och på vänster om navigeringsområdet. Om navigeringsområdet är längre än din huvudsakliga innehåll, kommer det att sträcka sig under sidfoten. Använda "clear: left" attribut vi undvika detta vanligt misstag. Du kan hävda att vi kan komma till samma resultat med mindre ansträngning och mindre kod med hjälp av tabeller.
Men kom ihåg: det är bara en mycket snabb hur, jag rörde bara själva ytan av CSS för att svara på vanlig fråga: hur gör jag designar en tableless sida med CSS? För att ge dig en uppfattning om kraften i CSS, om vi vill