Come fare un calendario | Guida creare con i CSS

Come fare un calendario


  • Agosto
    2017

  • Lu
  • Ma
  • Me
  • Gi
  • Ve
  • Sa
  • Do
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31



Codice HTML

<div class="mydiv">
<div class="month">
 <ul>
 <li class="prev">&#10094;</li>
 <li class="next">&#10095;</li>
 <li>Agosto<br><span style="font-size:18px">2017</span></li>
 </ul>
</div>



<ul class="weekdays">
 <li>Lu</li>
 <li>Ma</li>
 <li>Me</li>
 <li>Gi</li>
 <li>Ve</li>
 <li>Sa</li>
 <li>Do</li>
</ul>



<ul class="days">
 <li></li>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li><span class="active">9</span></li>
 <li>10</li>
 <li>11</li>
 <li>12</li>
 <li>13</li>
 <li>14</li>
 <li>15</li>
 <li>16</li>
 <li>17</li>
 <li>18</li>
 <li>19</li>
 <li>20</li>
 <li>21</li>
 <li>22</li>
 <li>23</li>
 <li>24</li>
 <li>25</li>
 <li>26</li>
 <li>27</li>
 <li>88</li>
 <li>29</li>
 <li>30</li>
 <li>31</li>
</ul>
</div>


Codice CSS

ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}



/* Month header */
.month {
 padding: 70px 25px;
 width: 100%;
 background: #1abc9c;
 text-align: center;
}



/* Month list */
.month ul {
 margin: 0;
 padding: 0;
}



.month ul li {
 color: white;
 font-size: 20px;
 text-transform: uppercase;
 letter-spacing: 3px;
}



/* Previous button inside month header */
.month .prev {
 float: left;
 padding-top: 10px;
}



/* Next button */
.month .next {
 float: right;
 padding-top: 10px;
}



/* Weekdays (Mon-Sun) */
.weekdays {
 margin: 0;
 padding: 10px 0;
 background-color:#ddd;
}



.weekdays li {
 display: inline-block;
 width: 13.6%;
 color: #666;
 text-align: center;
}



/* Days (1-31) */
.days {
 padding: 10px 0;
 background: #eee;
 margin: 0;
}



.days li {
 list-style-type: none;
 display: inline-block;
 width: 13.6%;
 text-align: center;
 margin-bottom: 5px;
 font-size:12px;
 color: #777;
}



/* Highlight the "current" day */
.days li .active {
 padding: 5px;
 background: #1abc9c;
 color: white !important
}



/* impostare larghezza minima pagina web */
body {
min-width: 550px;
}