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
<!doctype html> <html> <head> <meta charset="utf-8"><!-- Definice kódování webu --> <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Tento zápis řekne prohlížeči aby nezmenšoval obsah webu --> <link rel="stylesheet" type="text/css" href="style.css" /> <title>JaPaJP</title> </head> <body> <div id="hlavicka"> <div id="horizontalni-menu"> <div class="logo"><a href="../japajp/index.php" title="JaPaJP">JaPaJP</a></div> <label for="display-menu" class="our-menu">Menu</label> <input type="checkbox" id="display-menu" role="button" /> <ul id="hor-menu"> <li><a href="#">Domu</a></li> <li><a href="#">novinky</a></li> <li><a href="#">Archiv</a></li> <li><a href="#">Ostatní</a> <ul> <li><a href="#">text 1</a></li> <li><a href="#">text 2</a></li> <li><a href="#">text 3</a></li> </ul> </li> </li> <li><a href="#">Ke stažení</a></li> <li><a href="#">Jine</a></li> </ul> </div> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
@charset "utf-8"; /* CSS Document */ /* Struktura webů */ body { height: 100%; margin:0; padding:0; font-family: Arial, Helvetica, Geneva, sans-serif, Verdana, Source Sans Pro, Tahoma; overflow-x: hidden; color: #111; background-color: #fff; font-size: 14px; line-height: 23px; width: 100%; } /*font-family: Tahoma,Verdana;*/ /*hlavička stranky*/ #hlavicka { min-width: 100%; height: 56px; background: #e74c3c; } #hlavicka a { color: #FFF; text-decoration: none; } #horizontalni-menu { width: 1000px; margin: 0 auto; position: static; } .logo { color: #fff; float: left; line-height: 2em; font-size: 2em; text-decoration: none; font-weight: bold; margin: 0 0 0 40px; } .logo a { color: #fff; text-decoration: none; } .our-menu { text-decoration: none; color: #ffffff; text-align: center; padding: 20px 0; display: none; font-weight: bold; } #display-menu { display: none; } #display-menu:checked ~ #hor-menu{ display: block; } #hor-menu { float: right; padding: 0; margin: 0; } #hor-menu li { display: inline; height: auto; float: left; } #hor-menu a { float: left; display: block; text-decoration: none; padding-top: 17px; padding-right: 15px; padding-left: 15px; padding-bottom: 16px; text-align: center; color: #ffffff; background: #e74c3c; font-weight: bold; } #hor-menu li a:hover, #hor-menu li .aktualni { background-color: #2F2F2F; } .clear {clear: both} @media (max-width: 1020px) { #hlavicka { width: 90%; } #horizontalni-menu { width: 100%; } .logo { margin-left: 5%; } .our-menu { display: block; margin-left: 1%; margin-bottom: 0.25%; } #hor-menu { position: static; display: none; } #hor-menu li { margin-bottom: 2px; } #hor-menu li, #hor-menu a { width: 100%; min-width: 145px; } #hor-menu a { line-height: 20px; height: 20px; } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>