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>HTML Basic Layout</title> <link rek=stylesheet href="css/styly.css"> </head> <body> <div id="conteiner"> <header> <h1>This is Site</h1> </header> <nav> <ul> <li> <a href="#">Menu Item</a></li> <li> <a href="#">Item</a></li> <li> <a href="#">Menu Item</a></li> <li> <a href="#">Menu Item</a></li> <li> <a href="#">Menu menu</a></li> </ul> </nav> <aside> <article> <h3>Sidebar</h3> <p> This is Sidebar content.This is Sidebar content.This is Sidebar content.This is Sidebar content.This is Sidebar content. This is Sidebar content.This is Sidebar content.This is Sidebar content.This is Sidebar content.This is Sidebar content. This is Sidebar content. This is Sidebar content.This is Sidebar content.This is Sidebar content.This is Sidebar content. This is Sidebar content.This is Sidebar content.This is Sidebar content. </p> </article> </aside> <section> <article> <h3> Article title 1 </h3> <p> This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. </p> </article> <hr /> <article> <h3> Article title 1 </h3> <p> This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. This is article 1 content. </p> </article> </section> <footer> <p>copyright by <a href="#">FreeLancing Care</a></p> </footer> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* CSS Document */ html,body,h1,h2,h3,h4,h5,h6,ul{margin:0; padding:0} /**/header,nav,section,article,aside,footer{display:block;overflow:hidden} /* conteiner */ #conteiner { width: 900px; margin: 0 auto; display: block; background: silver; overflow: auto; } /* Top Header */ header { background: #ccc; padding: 16px 20px; } header h1 { color: #fff; text-shadow: 1px 1px 1px #000; } /* menu*/ nav { background-color: #949494; } nav ul { list-style: none; overflow: auto; } nav li { float: left; } nav a { display: block; color: #fff; text-decoration: none; padding: 10px 55px; border-right: 1px solid #8f867a; } aside { float: right; width: 20%; } section { float: left; width: 80%; } footer { clear: both; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>