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
<div class="case"> <div class="main"> <div class="caltitle">Prosinec 2016</div> <div class="days"> <ul> <li>po</li> <li>út</li> <li>st</li> <li>čt</li> <li>pá</li> <li>so</li> <li>ne</li> </ul> </div> <div class="dayfield"> <div class="daybar"> <div class="prenull"></div> <button class="daybutton" onclick="alert('Nope!')">1</button> <button class="daybutton" onclick="alert('Nope!')">2</button> <button class="daybutton" onclick="alert('Nope!')">3</button> <button class="daybutton" onclick="alert('Nope!')">4</button> </div> <div class="daybar"> <button class="daybutton" onclick="alert('Nope!')">5</button> <button class="daybutton" onclick="alert('Nope!')">6</button> <button class="daybutton" onclick="alert('Nope!')">7</button> <button class="daybutton" onclick="alert('Nope!')">8</button> <button class="daybutton" onclick="alert('Nope!')">9</button> <button class="daybutton" onclick="alert('Nope!')">10</button> <button class="daybutton" onclick="alert('Nope!')">11</button> </div> <div class="daybar"> <button class="daybutton" onclick="alert('Nope!')">12</button> <button class="daybutton" onclick="alert('Nope!')">13</button> <button class="daybutton" onclick="alert('')">14</button> <button class="daybutton" onclick="alert('Nope!')">15</button> <button class="daybutton" onclick="alert('Nope!')">16</button> <button class="daybutton" onclick="alert('Nope!')">17</button> <button class="daybutton" onclick="alert('Nope!')">18</button> </div> <div class="daybar"> <button class="daybutton" onclick="alert('Nope!')">19</button> <button class="daybutton" onclick="alert('Nope!')">20</button> <button class="daybutton" onclick="alert('Nope!')">21</button> <button class="daybutton" onclick="alert('Nope!')">22</button> <button class="daybutton" onclick="alert('Nope!')">23</button> <button class="daybutton" onclick="alert('Nope!')">24</button> <button class="daybutton" onclick="alert('Nope!')">25</button> </div> <div class="daybar"> <button class="daybutton" onclick="alert('Nope!')">26</button> <button class="daybutton" onclick="alert('Nope!')">27</button> <button class="daybutton" onclick="alert('Nope!')">28</button> <button class="daybutton" onclick="alert('Nope!')">29</button> <button class="daybutton" onclick="alert('Nope!')">30</button> <div class="postnull"></div> </div> </div> <div class="monthfoot"> <div class="prevmont"> <div class="prevmontharrow">«</div>Lis </div> <div class="nextmonth">Led <div class="nextmontharrow">»</div> </div> </div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.case { width: 580px; height: 323px; margin: 0px auto; background-color: ; padding: 0px; font-family: arial; } .main { width: 217px; height: 237px; margin: 40px 0px 0px 180px; float: left; } .caltitle { background-color: #383838; width: 100%; height: 36px; font-size: 20px; color: white; text-align: center; line-height: 185%; } .days { width: 217px; height: 20px; background: linear-gradient(#F2F2F2, #E8E8E8); margin-top: -10px; border-bottom: #BBBBBB solid 1px; } li { text-transform: uppercase; color: #616369; list-style-type: none; margin-top: 4px; float: left; padding: 0px 8px; } ul { padding: 0px; font-size: 10px; margin-left: 3px; } .dayfield { width: 217px; height: 150px; } .daybar { width: 217px; height: 28px; border-bottom: #BBBBBB solid 1px; border-top: #F5F5F5 solid 1px; } .prenull { height: 28px; width: 91px; background: linear-gradient(#ECECEC, #F5F5F5); border-right: #BBBBBB solid 1px; border-left: #F5F5F5 solid 1px; float: left; } .postnull { height: 28px; width: 60px; background: linear-gradient(#ECECEC, #F5F5F5); border-right: #BBBBBB solid 1px; border-left: #F5F5F5 solid 1px; float: left; } .daybutton { height: 28px; width: 31px; font-size: 11px; font-weight: bold; color: #616369; background: linear-gradient(#F5F5F5, #ECECEC); text-align: center; border-right: #BBBBBB solid 1px; border-bottom: none; border-top: none; border-left: #F5F5F5 solid 1px; float: left; cursor: pointer; } .daybutton:hover { height: 28px; width: 31px; font-size: 11px; font-weight: bold; color: #467B89; background: linear-gradient(#ECECEC, #F5F5F5); text-align: center; border-right: #BBBBBB solid 1px; border-bottom: none; border-top: none; border-left: #F5F5F5 solid 1px; float: left; } .daybutton:active { height: 30px; width: 31px; font-size: 11px; font-weight: bold; color: white; background: #61A6B7; text-align: center; border: #467B89 solid 1px; float: left; margin-top: -1px; } .monthfoot { width: 217px; height: 32px; background: linear-gradient(#E5E5E5, #F5F5F5); } .prevmontharrow { font-size: 10px; color: #616369; float: left; margin: 5px; } .nextmontharrow { font-size: 10px; color: #616369; float: right; margin: 5px; } .prevmont { float: left; color: #616369; font-size: 20px; margin-top: 4px; cursor: pointer; } .prevmont:hover { float: left; color: #467B89; font-size: 20px; margin-top: 4px; } .nextmonth { float: right; font-size: 20px; color: #616369; margin-top: 4px; cursor: pointer; } .nextmonth:hover { float: right; font-size: 20px; color: #467B89; margin-top: 4px; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>