Volg onderstaande gids om te zien hoe je iets host.
Hoe een website terug te verwijderen:
npm i surge -gsurgeMeer informatie hier:
Deze les geeft een samenvatting van enkele van de CSS-lay-outfuncties die we al hebben behandeld in eerdere modules - zoals verschillende display waarden - en introduceer enkele van de concepten die we in deze module zullen behandelen.
De basisprincipes van HTML (studie Inleiding tot HTML), en een idee van hoe CSS werkt (studie Inleiding tot CSS.)
Om u een overzicht te geven van CSS-pagina lay-out technieken. Elke techniek kan in meer detail worden geleerd in volgende tutorials.
CSS-pagina lay-out technieken stellen ons in staat elementen op een webpagina te nemen en te bepalen waar ze worden gepositioneerd ten opzichte van hun standaardpositie in de normale lay-outstroom, de andere elementen eromheen, hun bovenliggende container of het hoofdvenster / venster. De technieken voor pagina-indeling die we in deze module meer in detail zullen behandelen, zijn
displayElke techniek heeft zijn toepassingen, voor- en nadelen, en geen enkele techniek is ontworpen om afzonderlijk te worden gebruikt. Als u begrijpt waarvoor elke methode is ontworpen, bent u op een goede plek om te begrijpen wat de beste lay-outtool is voor elke taak.
Normal flow (normale stroom) is hoe de browser standaard HTML-pagina’s opmaakt als u niets doet om de pagina-indeling te regelen. Laten we eens kijken naar een snel HTML-voorbeeld:
<p>I love my cat.</p>
<ul>
<li>Buy cat food</li>
<li>Exercise</li>
<li>Cheer up friend</li>
</ul>
<p>The end!</p>
Standaard geeft de browser deze code als volgt weer:
I love my cat.
The end!
Merk hier op hoe de HTML wordt weergegeven in de exacte volgorde waarin deze in de broncode voorkomt, met elementen op elkaar gestapeld - de eerste alinea, gevolgd door de ongeordende lijst, gevolgd door de tweede alinea.
De elementen die onder elkaar verschijnen, worden beschreven als block-elementen, in tegenstelling tot inline-elementen, die naast elkaar verschijnen, zoals de afzonderlijke woorden in een alinea.
Opmerking: de richting waarin de inhoud van de blokelementen wordt opgemaakt, wordt beschreven als de blokrichting. De blokrichting wordt verticaal uitgevoerd in een taal zoals Engels, die een horizontale schrijfmodus heeft. Het zou horizontaal werken in elke taal met een verticale schrijfmodus, zoals Japans. De corresponderende Inline Direction is de richting waarin inline inhoud (zoals een zin) zou lopen.
Voor veel van de elementen op uw pagina zal de normale stroom precies de lay-out creëren die u nodig heeft, maar voor complexere lay-outs moet u dit standaardgedrag wijzigen met behulp van enkele van de tools die voor u beschikbaar zijn in CSS. Beginnen met een goed gestructureerd HTML-document is erg belangrijk, omdat je dan kunt werken met de manier waarop dingen standaard zijn ingedeeld in plaats van ertegen te vechten.
De methoden die de indeling van elementen in CSS kunnen veranderen, zijn als volgt:
display - Standaardwaarden zoals block, inline of inline -block kan veranderen hoe elementen zich gedragen in normale stroom, bijvoorbeeld door een element op blokniveau te laten gedragen als een inline-element (zie Soorten CSS-boxen voor meer informatie). We hebben ook volledige lay-outmethoden die worden ingeschakeld via specifieke ‘weergave’-waarden, bijvoorbeeld CSS Grid en Flexbox, die de indeling van elementen in het element waarop ze zijn ingesteld, wijzigen.float waarde zoals left kan ervoor zorgen dat blokniveau-elementen omwikkelen naast één kant van een element, zoals de manier waarop afbeeldingen soms tekst om zich heen laten zweven in tijdschriftlay-outs.** De position
position - Hiermee kunt u nauwkeurig de plaatsing van dozen in andere dozen regelen. statische positionering is de standaard in normale stroom, maar u kunt ervoor zorgen dat elementen anders worden ingedeeld met behulp van andere waarden, bijvoorbeeld altijd bevestigd aan de bovenkant van de browser viewport.display: table en bijbehorende eigenschappen.De belangrijkste methoden om een pagina-indeling in CSS te bereiken, zijn alle waarden van de eigenschap ‘weergave’. Met deze eigenschap kunnen we de standaard manier wijzigen waarop iets wordt weergegeven. Alles in de normale stroom heeft de waarde ‘weergave’, die wordt gebruikt als de standaard manier waarop elementen waarop ze zijn ingesteld zich gedragen. Het feit dat alinea’s in het Engels onder elkaar worden weergegeven, is bijvoorbeeld te wijten aan het feit dat ze zijn gestileerd met ‘display: block’. Als u een link maakt rond een tekst in een alinea, blijft die link inline met de rest van de tekst en wordt deze niet afgebroken op een nieuwe regel. Dit komt doordat het element <a> standaard display: inline is.
U kunt dit standaard weergavegedrag wijzigen. Het element <li> is bijvoorbeeld standaard display: block, wat betekent dat lijstitems onder elkaar weergeven in ons Engelse document. Als we de weergavewaarde wijzigen in ‘inline’, worden ze nu naast elkaar weergegeven, zoals woorden in een zin zouden doen. Het feit dat u de waarde van display voor elk element kunt wijzigen, betekent dat u HTML-elementen kunt kiezen voor hun semantische betekenis, zonder dat u zich zorgen hoeft te maken over hoe ze eruit zullen zien. De manier waarop ze eruit zien, is iets dat u kunt veranderen.
Naast de mogelijkheid om de standaardpresentatie te veranderen door een item van block naar inline en vice versa te veranderen, zijn er enkele grotere lay-outmethodes die beginnen als een waarde van display. Als u deze echter gebruikt, moet u in het algemeen aanvullende eigenschappen aanroepen. De twee waarden die voor onze doeleinden het belangrijkst zijn wanneer we de lay-out bespreken, zijn display: flex en display: grid.
( In deze oefening vind je een goed gebruik van FLEXBOX die je kan gebruiken in je eigen opdrachten :))
Vereenvoudige uitleg om Flexbox toe te passen
Hier leg ik uit hoe van een lijst een horizontale navigatie lijst kan maken door flexbox te gebruiken en het style attribuut justify-content.
Flexbox is de korte naam voor de module Flexible Box Layout Module, ontworpen om het ons gemakkelijk te maken om dingen in één dimensie - als rij of als kolom. Om flexbox te gebruiken, past u display: flex toe op het bovenliggende element van de elementen die u wilt opmaken; al zijn directe kinderen worden dan flexitems. We kunnen dit zien in een eenvoudig voorbeeld.
De HTML-opmaak hieronder geeft ons een bevattend element, met een klasse wrapper, waarin drie <div> elementen. Standaard worden deze weergegeven als blokelementen, onder elkaar, in ons Engelstalige document.
Als we echter display: flex aan de ouder toevoegen, rangschikken de drie items zichzelf in kolommen. Dit komt doordat ze flex items worden en worden beïnvloed door enkele initiële waarden die flexbox instelt op de flexcontainer. Ze worden in een rij weergegeven, omdat de initiële waarde van flex-direction ingesteld op hun ouder is rij. Ze lijken allemaal uit te rekken tot de hoogte van het hoogste item, omdat de initiële waarde van de align-items eigenschap ingesteld op hun ouder is stretch. Dit betekent dat de items uitrekken tot de hoogte van de flexcontainer, die in dit geval wordt bepaald door het hoogste item. De items staan allemaal aan het begin van de container, zodat er aan het einde van de rij extra ruimte overblijft.
* {box-sizing: border-box;}
.wrapper > div {
border-radius: 5px;
background-color: rgb(207,232,220);
padding: 1em;
}
.wrapper {
display: flex;
}
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>
In deze oefening vind je een goed gebruik van FLEXBOX die je kan gebruiken in je eigen opdrachten :)
Naast bovenstaande eigenschappen die op de flexcontainer kunnen worden toegepast, zijn er eigenschappen die op de flex items kunnen worden toegepast. Deze eigenschappen kunnen onder andere de manier waarop de items buigen veranderen, waardoor ze kunnen uitzetten en inkrimpen om in de beschikbare ruimte te passen.
Als een eenvoudig voorbeeld hiervan kunnen we de eigenschap flex aan al onze onderliggende items toevoegen, met een waarde van 1. Hierdoor zullen alle items groeien en de container vullen, in plaats van aan het einde ruimte te laten. Als er meer ruimte is, worden de items breder; als er minder ruimte is, worden ze smaller. Als u bovendien een ander element aan de opmaak toevoegt, worden de items allemaal kleiner om er ruimte voor te maken - ze zullen de grootte aanpassen om dezelfde hoeveelheid ruimte in te nemen, wat dat ook is.
.wrapper {
display: flex;
}
.wrapper > div {
flex: 1;
}
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>
Meer hier over Flexbox
Maak deze oefening om over Flexbox te leren: Flexbox Froggy
Op de volgende website, kan je je gratis registreren voor een video cursus om Flexbox te leren. Ga naar de site en registreer je met een mail om de cursus te beginnen:
Terwijl flexbox is ontworpen voor een eendimensionale lay-out, is rasterlay-out ontworpen voor twee dimensies: dingen uitlijnen in rijen en kolommen.
Nogmaals, u kunt Grid Layout inschakelen met een specifieke waarde van display - display: grid. Het onderstaande voorbeeld gebruikt vergelijkbare markeringen als het flex-voorbeeld, met een container en enkele onderliggende elementen. Naast het gebruik van display: grid, definiëren we ook enkele rij- en kolomsporen op de bovenliggende pagina met behulp van de grid-template-rijen en grid-template-columns eigenschappen. We hebben drie kolommen van elk ‘1fr’ en twee rijen van ‘100px’ gedefinieerd. Ik hoef geen regels te stellen voor de onderliggende elementen; ze worden automatisch in de cellen geplaatst die ons raster heeft gemaakt.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
grid-gap: 10px;
}
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
<div class="box6">Six</div>
</div>
Als u eenmaal een raster heeft, kunt u uw items er expliciet op plaatsen, in plaats van te vertrouwen op het gedrag van automatische plaatsing dat hierboven wordt weergegeven. In het tweede voorbeeld hieronder hebben we hetzelfde raster gedefinieerd, maar deze keer met drie onderliggende items. We hebben de begin- en eindregel van elk item ingesteld met behulp van de eigenschappen rasterkolom en rasterrij. Dit zorgt ervoor dat de items meerdere sporen beslaan.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
grid-gap: 10px;
}
.box1 {
grid-column: 2 / 4;
grid-row: 1;
}
.box2 {
grid-column: 1;
grid-row: 1 / 3;
}
.box3 {
grid-row: 2;
grid-column: 3;
}
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>
Opmerking: deze twee voorbeelden zijn slechts een klein deel van de kracht van Grid layout; Zie ons les Rasterlay-out voor meer informatie.
De rest van deze handleiding behandelt andere lay-outmethoden, die minder belangrijk zijn voor de belangrijkste lay-outstructuren van uw pagina, maar die u toch kunnen helpen bij het uitvoeren van specifieke taken. Als u de aard van elke lay-outtaak begrijpt, zult u snel merken dat wanneer u naar een bepaald onderdeel van uw ontwerp kijkt, het type lay-out dat er het meest geschikt voor is, vaak duidelijk zal zijn.