Share
Välkommen till den sjätte lektionen i vår webbdesign för barnserie, CSS Layout!
Här lägger vi alla våra element exakt var vi vill ha dem på skärmen. Vi lägger till både våra HTML- och CSS-filer för att göra det.
För att påminna dig själv, ta en titt på webbplatsen vi bygger. Filerna för den här kursen kan hämtas här och glöm inte att ställa några frågor du har i kommentarfältet längst ner på den här sidan.
Det finns några saker vi behöver veta innan vi hoppar direkt in i layout. I det här första avsnittet kommer vi att titta på hur man håller sig organiserad. Vi kommer att täcka några grundläggande grunder och prata om vilken typ av CSS egenskaper används för layout.
Att hålla ett CSS-dokument organiserat är mycket viktigt. Korrekt organisation gör det lättare för oss att hitta alla bitar i vår fil, vilket gör det enklare att ändra och lägga till saker senare. Generellt sett är det bäst att beställa vår CSS deklarationer i den ordning de äger rum på sidan.
Vi lägger till stilar i den här lektionen till huvud, till exempel. Denna extra styling på ett sådant huvudelement bör ingå i vårt CSS-dokument innan alla andra element som är nestade inom huvud.
HTML-element är lite som rektangulära lådor. De CSS-boxmodell beskriver avståndet mellan dessa lådor.
Varje låda har fyra sidor. Vi kan tillämpa ett värde på alla fyra sidorna samtidigt i vår CSS genom stoppning, gräns, och / eller marginal. Men om vi vill stila en sida av ett element kan vi också göra det. Till exempel:
stoppning-vänster: 20px; gräns: 4px fast # 205D76;
Låt oss säga att den här rosa rutan representerar text. Vi kan se att vaddering har lagts till endast till vänster och en tjockblå gräns täcker Allt fyra sidor av innehållet.
CSS ger oss en uppsättning egenskaper som är gjorda speciellt för att hjälpa oss med vår webbplatss layout. Så medan boxmodellen hjälper till att förklara mellanrum kring HTML-element, Flexbox kommer att tillåta oss att flytta dessa element på plats.
När vi använder flexbox på ett behållarelement blir detta element ett flexbehållare och alla element inom det blir flex-objekt.
När vi applicerar flexbox till en behållare lägger den automatiskt ut objekten längs en rak linje (horisontellt) och sedan kan vi komma in i mer detalj med andra flexboxegenskaper.
Vi behöver inte använda flexbox för mycket för vår hemsida, men det är viktigt att tänka på flexbox eftersom det anses vara det mest moderna, rätt sättet att placera små bitar av innehåll på en webbplats.
De h1 och stadsbilden inom rubrik centreras på sidan. Det finns flera olika sätt att centrera något med CSS, men för nu kommer vi att använda text-align: center; på rubrik.
Vi pekar på rubriken genom att använda det klassnamn som vi lagt till tidigare:
.primärrubrik text-align: center;
Glöm inte! Spara dokumenten och uppdatera webbläsaren för att se våra ändringar när vi gör dem!
Det allra första vi vill göra i våra avsnitt är att göra innehållet, bilden och listan, inom varje sektion sitta bredvid varandra istället för staplade.
För att uppnå detta ska vi använda Flexbox. Flexbox appliceras på föremålen i ett behållarelement genom att använda display: flex; på behållaren:
.butikssektion display: flex; display: -webkit-flex; / * Detta är ett leverantörs prefix! * /
För att få tillbaka detta till vad vi pratade om tidigare, bilden och div innehållande butikslistan är nu flex-objekt, för att de är inom detta flexbehållare.
Medan det finns många alternativ för att ange exakt var ett element ska gå, fungerar flexboxs standardbeteende här perfekt för oss - och vår butikslista bor nu till höger om butikens bild.
Eftersom Flexbox är ganska ny har inte alla webbläsare haft möjlighet att inkludera det ordentligt. För att arbeta runt detta kan vi inkludera a leverantörs prefix att flexbox egenskaper, lägga till detta saknas stöd för tillfället. Trots att vi bara fokuserar på de senaste versionerna av moderna webbläsare för detta projekt, behöver vi fortfarande inkludera en -webkit- leverantörs prefix för flexbox för att se till att det fungerar i "Safari".
Vi kan använda lite avstånd mellan bilden och elementet som innehåller all text, så i vår HTML lägger vi till en klass av store-detaljer till div innehållande texten.
När vi har sparat det kan vi hoppa över till vår CSS och lägga till det här avståndet, men bara till vänster av div:
.butik-detaljer margin-left: 30px;
Det finns en del avstånd till vänster om våra lagrade oordnade listor. Detta beror på att det finns några standard styling som följer med att använda en HTML-lista. Ibland är denna standard styling OK, och andra gånger kan det inte producera effekten vi ska åka till.
Vi kan bli av med den här standardlistoravståndet med hjälp av vaddering: 0; på den oordnade listan, men det skulle leda till att vår kula pekar på att gå för långt till vänster jämfört med vår lista.
Vi vill ha lite av stoppning här, men inte så mycket som anges av listens standard styling. Ställa in en padding-vänster av 15px På listan kommer våra punkter på kullen att riktas upp med rubriken ganska snyggt, så vi lägger till detta förutom de saker vi lade till i listan i föregående lektion:
.butikslista padding-left: 15px; / * Nyligt tillagt styling * / Färg: # FFC122;
Vi har fortfarande den fråga som vi nämnde i den tidigare lektionen med listobjekten för nära varandra. För att lösa detta ska vi lägga till en klass av affärsnamn till alla listobjekt, , i vår HTML. Vi lägger sedan till en liten marginal till botten av dessa föremål.
.butiksnamn margin-bottom: 10px;
Spacing måste läggas till i avsnitten samt få dem centrerad på sidan. Vi kommer att göra det här genom marginal och bredd egenskaper.
Återigen lägger vi till styling som vi redan har skrivit:
.butikssektion display: flex; display: -webkit-flex; marginal: 50px auto; bredd: 450px;
De x 50 bildpunkter värde inom marginal Här appliceras den mängden utrymme vid topp av varje butikssektion. Efter detta med bil berättar om webbläsaren ska överväga elementets bredd (som vi satt till 450px) och centrera det automatiskt i webbläsarfönstret.
För vår sidfot Vi kommer att centrera texten och lägga till en liten mängd stoppning för att se till att texten inte är för nära sidorna på sidfoten.
.primärfotare vaddering: 2px; text-align: center; bakgrundsfärg: # FFC122;
Vi pratade om standard styling lite när vi fick våra listor på plats. De kropp elementet kommer med sina egna standardstilar, varav en är en marginal som omger hela sidan. Medan det ibland inte är ett problem kan vi se att det förhindrar bakgrundsfärg av vår sidfot från att sträcka sig helt till sidorna i webbläsarfönstret.
Lösningen här är att hoppa tillbaka till kroppen i vårt CSS-dokument och lägga till följande:
kropp marginal: 0;
I denna kurs fick vi alla våra element på plats med CSS layouttekniker. Medan det oftast finns flera olika sätt att uppnå en specifik layout, blir det mer bekvämt med CSS-boxmodellen och flexboxen som ger en väldigt solid förståelse för dessa olika tillvägagångssätt.
Eftersom vår webbplats är komplett (grattis!) Talar vi om design, typografi, och Färg i lektionen att följa. Detta hjälper dig att bli en väl avrundad, informerad webbdesigner.
Vi ses runt om i staden!
Accentsconagua