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
<html> <base href='http://fabiar5.cz/test/1.php'> <head> <title>Test</title> <charset="utf-8"> </head> <body> <div class="posuvnik"> <div> <a href="#" title="1" target="_blank"> <img src="../test/obr.png"> </a> <span> Prosím vás </span> </div> <div> <a href="#" title="2" target="_blank"> <img src="../test/obr.png"> </a> <span> dokáže mi někdo pomoct </span> </div> <div> <a href="#" title="3" target="_blank"> <img src="../test/obr.png"> </a> <span> jak udělat popisky </span> </div> <div> <a href="#" title="4" target="_blank"> <img src="../test/obr.png"> </a> <span> pod jednotlivými obrázky </span> </div> <div> <a href="#" title="5" target="_blank"> <img src="../test/obr.png"> </a> <span> když je tam ten posuvník </span> </div> <div> <a href="#" title="6" target="_blank"> <img src="../test/obr.png"> </a> <span> Zkoušel jsem už kde co </span> </div> <div> <a href="#" title="7" target="_blank"> <img src="../test/obr.png"> </a> <span> ale nedaří se mi :-( díky moc </span> </div> <div> <a href="#" title="8" target="_blank"> <img src="../test/obr.png"> </a> <span> Není zač, vždyť je to jednoduché </span> </div> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.posuvnik img { border: 1px solid #111; } .posuvnik a { display: inline-block; margin: 0 2px; background: #eee; } .posuvnik a:hover { background: #def; } .posuvnik div { display: inline-block; } .posuvnik span { display: block; text-align: center; color: #007; background: #def; } .posuvnik { width: 960px; height: 220px; white-space: nowrap; overflow: auto; margin-left: 50px; margin-top: 50px; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>