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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title> </title> <link rel="stylesheet" href="css.css" type="text/css"> <link rel="stylesheet" href="menu.css" type="text/css"> <script src="js/min/jquery-v1.10.2.min.js" type="text/javascript"></script> <script src="js/min/modernizr-custom-v2.7.1.min.js" type="text/javascript"></script> <script src="js/min/jquery-finger-v0.1.0.min.js" type="text/javascript"></script> <!--Include flickerplate--> <link href="css/flickerplate.css" type="text/css" rel="stylesheet"> <script> $(document).ready(function(){ $('.flicker-example').flicker(); }); </script> <style> </style> </head> <body> <div class="zaklad"> <div class="flicker-example" data-block-text="false"> <ul> <li data-background="img/field.jpg"> <div class="flick-title">Flickerplate Is Working </div> <div class="flick-sub-text">Heaven forbid this package you downloaded is broken. That wouldn't be embarrassing at all. </div> </li> <li data-background="img/forest.jpg"> <div class="flick-title">Editable via Javascript or CSS </div> <div class="flick-sub-text">Take a look at the extensive documentation to see how you can change the settings in multiple ways. </div> </li> <li data-background="img/frozen-water.jpg"> <div class="flick-title">Touch Enabled Through the jQuery Finger Library </div> <div class="flick-sub-text">jQuery Finger is a great touch library that has been included as part of the Flickerplate package. </div> </li> </ul> </div> <div id="menu1"> <ul> <li> <a href="#">6.třida</a> <ul> <div> <li> <a href="#">Pododkaz 1</a> </li> <li> <a href="#">Pododkaz 2</a> </li> <li> <a href="#">Pododkaz 3</a> </li> </div> </ul> </li> <li> <a href="#">6.třida</a> <ul> <div> <li> <a href="#">Pododkaz 1</a> </li> <li> <a href="#">Pododkaz 2</a> </li> <li> <a href="#">Pododkaz 3</a> </li> </div> </ul> </li> <li> <a href="#">6.třida</a> <ul> <div> <li> <a href="#">Pododkaz 1</a> </li> <li> <a href="#">Pododkaz 2</a> </li> <li> <a href="#">Pododkaz 3</a> </li> </div> </ul> </li> <li> <a href="#">6.třida</a> <ul> <div> <li> <a href="#">Pododkaz 1</a> </li> <li> <a href="#">Pododkaz 2</a> </li> <li> <a href="#">Pododkaz 3</a> </li> </div> </ul> </li> <li> <a href="#">6.třida</a> <ul> <div> <li> <a href="#">Pododkaz 1</a> </li> <li> <a href="#">Pododkaz 2</a> </li> <li> <a href="#">Pododkaz 3</a> </li> </ul> <li> <a href="#">Novinky</a> </li> <div class="vyhledat"> <!-- Use of this code assumes agreement with the Google Custom Search Terms of Service. --> <!-- The terms of service are available at /coop/docs/cse/tos.html --> <form name="cse" id="searchbox_demo" action="http://www.google.cz/cse"> <input type="hidden" name="cref" value="" /> <input value="Vyhledávač..." name="q" type="text" size="15" /> <input class="hledat"type="submit" name="sa" value="Hledat" /> </form> <script type="text/javascript" src="http://www.google.cz/cse/tools/onthefly?form=searchbox_demo"></script> </div> </div> </ul> </li> <table id="novinky"> <tr><td>d</td></tr> <tr><td>s</td></tr> <tr><td></td> </tr> </table> <div id="text"> sadasdsadsadsadsadasdadasdsadsadasdasdasdasdsadasd sadasdsadsadsadsadasdadasdsadsadasdasdasdasdsadasd sadasdsadsadsadsadasdadasdsadsadasdasdasdasdsadasd sadasdsadsadsadsadasdadasdsadsadasdasdasdasdsadasd sadasdsadsadsadsadasdadasdsadsadasdasdasdasdsadasd </div> </div> </div> </body> <!-- <div id="blok-bbsluzba-998300"></div> <a id="odkaz-bbsluzba-998300" href="http://miniaplikace.blueboard.cz">Miniaplikace</a> <script type="text/javascript" src="http://miniaplikace.blueboard.cz/widget-anketa-998300"></script> <--- <a href="http://pocitadlo.abz.cz/" title="počítadlo přístupů: pocitadlo.abz.cz"><img src="http://pocitadlo.abz.cz/aip.php?tp=sq" alt="počítadlo.abz.cz" border="0" /></a> <script type="text/javascript" src="http://widgets.amung.us/classic.js"></script><script type="text/javascript">WAU_classic('xjrgiqmb4iwh')</script></p> </font><font color="#0000ff" size="1"> --> -->
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#menu1 a { color: white; font-weight:bolder; text-decoration:none; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; border-radius:25px } #menu1 {background: rgb(102,51,0); width: auto; height: 50px; padding: 5px 5px 5px 5px; position: relative; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; top: 0px; } #menu1 ul li ul a {color: white; } #menu1 ul li ul {/*display:none;*/ visibility: collapse; } #menu1 ul li { float:left; list-style:none; width:130px; height:30px; background: rgb(255,204,0); text-align:center; padding-top:12px; border-right:; border-radius:25px; border: 0 ; right: 30px; left: -13px; position: relative; } #menu1 ul li:hover a{color: black; } #menu1 ul li:hover { background: rgb(255,255,0); text-align:center; color: rgb(0,0,0); /*border: 2px solid rgb(102,51,0); */ text-decoration: underline;} #menu1 ul ul { margin-top:10px; } #menu1 ul li ul li { margin-left:-40px; } #menu1 ul li:hover > ul {visibility: visible; position: relative; left: 3px; top: 3px; } #menu1 ul li ul li {background: rgb(255,204,0);} #menu1 ul li ul li:hover {background: rgb(255,255,0); color: black; } #menu1 ul li ul li:hover a{color: black;} #menu1 ul {position: relative; top: -15px; left: -35px; } .zaklad{position: relative; border: 1px solid black; border-radius: 15px ; width: 1000px; height: px; left: 12%; right: 10%; background: rgb(102,51,0); top: 20px; } body{background: red; } .hledat{position: relative; top: -25px; left: 100px; border-radius: 25px; background: rgb(255,204,0); } .vyhledat{float:left; list-style:none; width:150px; height:30px; background: rgb(255,204,0); text-align:center; padding-top:12px; border-right:; border-radius:25px; border: 0 ; right: 30px; left: -13px; position: relative; } .vyhledat input{background: rgb(255,204,0); border: 1px solid black; border-radius: 10px; height: 25px; text-align: center; color: white; font-family:Arial, Helvetica, sans-serif; } #novinky {position: relative; background: rgb(102,51,0); border-bottom-left-radius: 10px; width: 200px; left: 80%; height: 804px; border-bottom-right-radius: 10px; top: -5px;} #novinky tr td{ list-style:none; width:130px; height:200px; background: rgb(255,204,0); text-align:center; padding-top:12px; border-right:; border-radius:25px; border: 0 ; right: 0px; left: px; position: relative; } /*Tadyzačí nají třidy od textu*/ #text {width: 78%; padding: 5px 5px 5px; position: static; top: 0x; background: rgb(255,204,0); border-radius: 25px; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>