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 lang="cs"> <head> <meta charset=”UTF-8”> <meta name="language" content="czech"> <link rel="stylesheet" href="styl.css" type="text/css"> <title>Testovaci stranka 2</title> </head> <body> <div id="zarovnani"><!-- začatek atributu web --> <!-- hlavicka --> <header> <div id="lista"> <div id="kyticka"></div> </div> </header> <!-- konec hlavicky --> <!-- Obsah --> <section> <div id="page"> <p>www.pokus.cz</p> <p>Hokus pokus snad to výjde HTML5 + CSS3</p> <br /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus justo aliquet, euismod massa et, venenatis odio. Donec dictum sagittis feugiat. Mauris a dolor cursus, pharetra odio ut, tincidunt mauris. Duis vestibulum, quam et imperdiet sagittis, tellus eros mollis eros, a dictum enim urna in elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc diam ligula, ultricies nec eros id, sodales consequat dui. <br />Curabitur imperdiet, arcu et pharetra adipiscing, mi justo volutpat diam, nec porta nulla ligula consectetur lorem. <div id="button"></div> </div> </section> </div> <!-- konec obsahu --> </div><!-- konec atributu web --> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { background-image: url(zahlav.png); margin:0; background-repeat: repeat; font-family: Arial, Helvetica, sans-serif; } section { top:0px; position: relative; background-color: red; height:304px; } header{ top:0px; position: relative; background-color: green; height: 131px; } #lista { width: 960px; height: 131px; margin: 0px auto; position: relative; } #kyticka { margin: 0px auto; top: 20px; left: 150px; width: 50px; height: 50px; position: absolute; background-color: blue; } /* stranka */ #zarovnani { margin: 0px auto; position: relative; } /* hlavicka */ #hlavicka { text-align: center; } /* celý obsah */ #page { width: 960px; height: 200px; margin: 0px auto; color: rgb(153,153,153); padding: 70px; top: -50px; position: relative; } #button { top: 80px; left: 150px; width: 50px; height: 50px; position: absolute; background-color: blue; } /* konec obsahu nabídky */ /* patička */ #zahlaviuv { font-size: small; color: rgb(94,94,94); width: 350px; position: relative; left: 490px; top: 250px; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>