HTML -uitlegelemente en -tegnieke

Webwerwe vertoon dikwels inhoud in verskeie kolomme (soos 'n tydskrif of 'n koerant).

HTML-uitlegelemente

HTML het verskeie semantiese elemente wat die verskillende dele van 'n webblad definieer:

<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element

<header>- Definieer 'n kopskrif vir 'n dokument of 'n afdeling <nav>- Definieer 'n stel navigasieskakels <section>- Definieer 'n afdeling in 'n dokument <article> - Definieer 'n onafhanklike, selfstandige inhoud <aside> - Definieer inhoud afgesien van die inhoud (soos 'n sybalk) <footer> - Definieer 'n voetskrif vir 'n dokument of 'n afdeling <details> - Definieer bykomende besonderhede wat die gebruiker op aanvraag kan oopmaak en toemaak <summary>- Definieer 'n opskrif vir die <details>element Jy kan meer lees oor semantiese elemente in ons HTML Semantics hoofstuk.

HTML-uitlegtegnieke

Daar is vier verskillende tegnieke om multikolom-uitlegte te skep. Elke tegniek het sy voor- en nadele:

• CSS-raamwerk
• CSS dryf eiendom
• CSS flexbox
• CSS-rooster

CSS-raamwerke

As jy jou uitleg vinnig wil skep, kan jy 'n CSS-raamwerk gebruik, soos W3.CSS of Bootstrap .

CSS Float Uitleg

Dit is algemeen om hele webuitlegte te doen deur die CSS- floateienskap te gebruik. Float is maklik om te leer - jy moet net onthou hoe die floaten cleareienskappe werk. Nadele: Swewende elemente is aan die dokumentvloei gekoppel, wat die buigsaamheid kan benadeel. Kom meer te wete oor float in ons CSS Float and Clear- hoofstuk.

CSS Flexbox-uitleg

Gebruik van flexbox verseker dat elemente voorspelbaar optree wanneer die bladsyuitleg verskillende skermgroottes en verskillende vertoontoestelle moet akkommodeer.

Kom meer te wete oor flexbox in ons CSS Flexbox- hoofstuk.

CSS-roosteruitleg

Die CSS Grid Uitleg-module bied 'n rooster-gebaseerde uitlegstelsel, met rye en kolomme, wat dit makliker maak om webblaaie te ontwerp sonder om dryf en posisionering te gebruik.

Kom meer te wete oor CSS-roosters in ons CSS Grid Intro- hoofstuk.