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"> <title>Malazská encyklopedie</title> <link rel="stylesheet" type="text/css" href="temps/styles.css"> <script type="text/javascript" src="defines/scripts.js"></script> </head> <body> <div class="header"> <div class="header_image"> <div class="header_menus"> </div> </div> <div class="header_bottom"> </div> </div> <div class="menu_left"> <div class="menu_block"> <div class="menu_block_top">Systém</div> <div class="menu_block_middle"> <a href="index.php">Index</a><br> <a href="index.php?sec=login&action=login">Přihlásit</a> <br> <br><a onClick='showHide("left_system_submenu")'>Systém</a><br> <div class="submenu" id="left_system_submenu"> Ohlásit chybu<br> Buglist<br> Todo list<br><br> Kredit<br> FAQ<br> </div> </div> <div class="menu_block_bottom"></div> </div> <div class="menu_block"> <div class="menu_block_top">Uživatelé</div> <div class="menu_block_middle"></div> <div class="menu_block_bottom"></div> </div> <div class="menu_block"> <div class="menu_block_top">Databáze</div> <div class="menu_block_middle"></div> <div class="menu_block_bottom"></div> </div> </div> <div class="menu_right"> <div class="menu_block"> <div class="menu_block_top">Vyhledávání</div> <div class="menu_block_middle"> </div> <div class="menu_block_bottom"></div> </div> <div class="menu_block"> <div class="menu_block_top">Statistiky</div> <div class="menu_block_middle"></div> <div class="menu_block_bottom"></div> </div> <div class="menu_block"> <div class="menu_block_top">Odkazy</div> <div class="menu_block_middle"></div> <div class="menu_block_bottom"></div> </div> </div> <!-- <div class="content"> --> <div class="center"> <div class="center_top"> </div> <div class="center_middle"> </div> <div class="center_bottom"></div> </div> <!-- </div>--> <div class="footer"> <div class="footer_top"> </div> <div class="footer_main"></div> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { margin: 0 0 0 0; //background-color: red; } body { background-color: red; } .header { width: 100%; background-color: aqua; height:200px; } .header_image { height: 90%; background-color: yellow; } .header_menus { margin: 0 auto; position: relative; top: 30%; width: 50%; height: 50%; background-color: purple; } .header_bottom { background-color: black; width: 100%; height: 10%; } .center { width: 60%; height: 100%; background-color: pink; margin: 0 auto; word-wrap: break-word; } .center_top { width: 100%; height: 50px; background-color: chocolate; } .center_middle { background-color: coral; padding-left: 20px; padding-right: 20px; } .center_bottom { width: 100%; height: 50px; background-color: green; clear: both; } .footer { bottom: 0px; width: 100%; height: 100px; background-color: firebrick; } .footer_top { width: 100%; height: 30px; background-color: grey; } .footer_main { width: 100%; height: 70px; background-color: magenta; } .menu_left { text-align: center; background-color: tomato; width: 15%; position: relative; left: 3%; top: 30px; float: left; } /*.content { width: 1400px; background-color: maroon; margin: 0 auto; height: 100%; }*/ .menu_right { text-align: center; background-color: tomato; width: 15%; position: relative; right: 3%; float: right; top: 30px; } .menu_block { margin: 0 auto; width: 80%; background-color: aliceblue; position: relative; margin-top: 20px; margin-bottom: 40px; } .menu_block_top { font-size: 24px; } .menu_block_middle { font-size: 18px; } .submenu { font-size: 14px; display: none; }
CSS
Autoformát
CSS reset
Až na konci
/* * Author: Jelec * Page: Javascript scripts. * Here are located Javascript scripts used globally. */ function showHide(id) { elementStyle = document.getElementById(id).style; elementStyle.display = (elementStyle.display == "block") ? "none" : "block"; } function checkRegistForm() { }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>