Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<body> <div id="obal"> <div id="zahlavi"> <h1>Pro Evolution Soccer</h1> </div> <!-- konec bloku zahlavi --> <div id="menu"> <h2>Navigace </h2> <ul> <li><a href="turnaje.html">Turnaje</a></li> <li><a href="hraci.html">Hráči</a></li> <li><a href="Diskuse.html">Diskuse</a></li> </ul> </div> <!-- konec bloku menu --> <div id="hlavni"> <div id="obsah"> <h2>Obsah stránky</h2> <p> Vítejte na webu věnovaný herní sérii Pro Evolution Soccer na platformu Playstation 4 .</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean accumsan elementum mauris. Praesent congue libero eget ipsum. Nullam vestibulum turpis non quam. Cras a nunc eget mi varius dapibus. Phasellus sem erat, fermentum pulvinar, bibendum ut, vehicula vel, magna.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean accumsan elementum mauris. Praesent congue libero eget ipsum. Nullam vestibulum turpis non quam. Cras a nunc eget mi varius dapibus. Phasellus sem erat, fermentum pulvinar, bibendum ut, vehicula vel, magna.</p> </div> <!-- konec bloku obsah --> <div id="panel.tabulka"> <h2>Aktualni tabulka</h2> <p>Místo pro ligovou tabulku.</p> </div> <!-- konec bloku panel.tabulka --> <div id="panel.vysledky"> <h2>Výsledky</h2> <p>Místo pro výsledky zápasů</p> </div> <!-- konec bloku panel.vysledky --> </div> <!-- konec bloku hlavní --> <div id="zapati"> <p>Zápatí stránky</p> </div> <!-- konec bloku zapati --> </div> <!-- konec bloku obal -->
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* Vodorovná navigaèní nabídka */ body { font-family: Arial, Verdana, sans-serif; font-size: small; margin: 0; } /* ----- layout ---- */ #obal { width: 80%; margin: 0 auto; background: yellow; } #zahlavi { width: 100%; height: 100px; background: red; } #hlavni { width: 100%; float: left; background: yellow; } #obsah { width: 50%; float: left; } #panel.tabulka { padding: 5px 0 0 0; width: 25%; float: right; border-left; 1px solid black; } #zapati { width: 100% float: left; background: silver; } /* ----- Navigační nabídka ----- */ #menu ul { width: 100%; float: left; margin: 0; padding: 4px 0; background:aqua; list-style-type: none; } #menu ul li { float: left; border-right: 1px solid black; } #menu a { display: block; padding: 5px 20px; color: #000; font-size: 105%; font-weight: bold; text-decoration: none; } #menu h2 { display: none; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>