Rozvržení webu CSS
Rozvržení webu
Webová stránka se často dělí na záhlaví, nabídky, obsah a zápatí:
Na výběr je spousta různých designů rozvržení. Výše uvedená struktura je však jednou z nejběžnějších a v tomto tutoriálu se na ni podíváme blíže.
Záhlaví
Záhlaví se obvykle nachází v horní části webu (nebo přímo pod horní navigační nabídkou). Často obsahuje logo nebo název webu:
Příklad
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
Výsledek
Header
Navigační lišta
Navigační panel obsahuje seznam odkazů, které pomohou návštěvníkům procházet vaším webem:
Příklad
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Výsledek
Obsah
Rozložení v této sekci často závisí na cílových uživatelích. Nejběžnější rozložení je jedno (nebo jejich kombinace) z následujících:
- 1-sloupec (často používaný pro mobilní prohlížeče)
- 2-sloupcový (často používaný pro tablety a notebooky)
- 3sloupcové rozložení (používá se pouze pro stolní počítače)
1-sloupec:
2-sloupec:
3 sloupec:
Vytvoříme rozložení se 3 sloupci a na menších obrazovkách ho změníme na rozložení s jedním sloupcem:
Příklad
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
layout - makes the three columns stack on top of each other instead of next
to each other on smaller screens (600px wide or less) */
@media screen and (max-width:
600px) {
.column
{
width: 100%;
}
}
Výsledek
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Tip: Chcete-li vytvořit rozvržení se 2 sloupci, změňte šířku na 50 %. Chcete-li vytvořit rozvržení se 4 sloupci, použijte 25 % atd.
Tip: Zajímá vás, jak funguje pravidlo @media? Přečtěte si o tom více v naší kapitole CSS Media Queries .
Tip: Modernějším způsobem vytváření rozvržení sloupců je použití CSS Flexbox. Není však podporován v Internet Exploreru 10 a starších verzích. Pokud požadujete podporu IE6-10, použijte plováky (jak je uvedeno výše).
Chcete-li se dozvědět více o modulu Flexible Box Layout Module, přečtěte si naši kapitolu CSS Flexbox .
Nerovné sloupce
Hlavní obsah je největší a nejdůležitější částí vašeho webu.
Je to běžné u nestejných šířek sloupců, takže většina prostoru je vyhrazena pro hlavní obsah. Vedlejší obsah (pokud existuje) se často používá jako alternativní navigace nebo k upřesnění informací souvisejících s hlavním obsahem. Změňte šířky, jak chcete, pamatujte pouze na to, že celkový součet by měl být 100 %:
Příklad
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle
{
width: 50%;
}
/* Responsive layout - makes
the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
Výsledek
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Zápatí
Zápatí je umístěno ve spodní části stránky. Často obsahuje informace, jako jsou autorská práva a kontaktní údaje:
Příklad
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
Výsledek
Responzivní rozvržení webu
Pomocí některých výše uvedených CSS kódu jsme vytvořili responzivní rozvržení webu, které se liší mezi dvěma sloupci a sloupci s plnou šířkou v závislosti na šířce obrazovky:
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.
Začněte zdarma ❯* není vyžadována žádná kreditní karta