Webové stránky často zobrazují obsah ve více sloupcích (jako časopis nebo noviny).
Příklad
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Prvky rozvržení HTML
HTML má několik sémantických prvků, které definují různé části webové stránky:
<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> - Definuje záhlaví pro dokument nebo oddíl
<nav> - Definuje sadu navigačních odkazů
<section> - Definuje sekci v dokumentu
<article> - Definuje nezávislý, samostatný obsah
<aside> - Definuje obsah vedle obsahu (jako postranní panel)
<footer> - Definuje zápatí dokumentu nebo oddílu
<details> - Definuje další podrobnosti, které může uživatel na požádání otevřít a zavřít
<summary>- Definuje nadpis pro <details>prvek
Více o sémantických prvcích si můžete přečíst v naší
kapitole Sémantika HTML .
Techniky rozvržení HTML
Existují čtyři různé techniky vytváření vícesloupcových rozvržení. Každá technika má své klady a zápory:
CSS framework
Vlastnost CSS float
CSS flexbox
CSS mřížka
CSS rámce
Pokud chcete vytvořit rozvržení rychle, můžete použít framework CSS, jako je
W3.CSS nebo Bootstrap .
Slyšeli jste někdy o W3Schools Spaces ? Zde si můžete vytvořit svůj web od začátku nebo použít šablonu a hostovat jej zdarma.
Je běžné dělat rozvržení celého webu pomocí vlastnosti CSS
float. Float je snadné se naučit - stačí si zapamatovat, jak floata
clearvlastnosti fungují.
Nevýhody: Plovoucí prvky jsou svázány s tokem dokumentů, což může narušit flexibilitu. Více se o floatingu dozvíte v naší kapitole CSS Float and Clear .
Příklad
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Rozložení CSS Flexbox
Použití flexboxu zajišťuje, že se prvky chovají předvídatelně, když se rozložení stránky musí přizpůsobit různým velikostem obrazovky a různým zobrazovacím zařízením.
Více o flexboxu se dozvíte v naší
kapitole CSS Flexbox .
Příklad
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Rozložení mřížky CSS
Modul CSS Grid Layout Module nabízí systém rozvržení založený na mřížce s řádky a sloupci, což usnadňuje navrhování webových stránek bez nutnosti použití plovoucích prvků a umístění.
Další informace o mřížkách CSS naleznete v
úvodní kapitole mřížky CSS.