Habari ya kufanya: Kalenda cha CSS

Habari ya kufanya muundo wa kalenda

Kipimo cha kwanza - Ongeza HTML:

<div class="month">
  <ul>
    <li class="prev">❮</li>
    <li class="next">❯</li>
    <li>Agosti<br><span style="font-size:18px">2021</span></li>
  </ul>
</div>
<ul class="weekdays">
  <li>Mo</li>
  <li>Tu</li>
  <li>We</li>
  <li>Th</li>
  <li>Fr</li>
  <li>Sa</li>
  <li>Su</li>
</ul>
<ul class="days">
  <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>9</li>
  <li><span class="active">10</span></li>
  <li>11</li>
  ...etc
</ul>

Mwongozo wa pili - Ongeza CSS:

ul {michoro wa orodha: kimsingi;}
body {font-family: Verdana, sans-serif;}
/* Jina la mwezi */
.month {
  kutano: 70px 25px;
  nguvu: 100%;
  mabaki: #1abc9c;
  kueleza: kati;
}
/* Orodha ya mwezi */
.month ul {
  mavuno: 0;
  kutano: 0;
}
.month ul li {
  mikifu: bila mabaki;
  ukurabati: 20px;
  mimba herufi: kifupi;
  mavuno herufi: 3px;
}
/* Msaa wa mwezi wa hivi karibuni */
.month .prev {
  kueleza: kushoto;
  kutano: 10px;
}
/* Msaa wa mwezi wa kuzia */
.month .next {
  kueleza: ghafla;
  kutano: 10px;
}
/* Siku za kazi (Mtu wa kuzioa hadi Jumapili) */
.weekdays {
  mavuno: 0;
  kutano: 10px 0;
  mwandiko wa nguvu: #ddd;
}
.weekdays li {
  kuonekana: kichwani;
  nguvu: 13.6%;
  mikifu: #666;
  kueleza: kati;
}
/* Siku (1-31) */
.days {
  kutano: 10px 0;
  mabaki: #eee;
  mavuno: 0;
}
.days li {
  michoro wa orodha: kimsingi;
  kuonekana: kichwani;
  nguvu: 13.6%;
  kueleza: kati;
  mavuno: 5px;
  ukurabati: 12px;
  mikifu: #777;
}
/* Kupambana kwa siku ya sasa */
.days li .active {
  kutano: 5px;
  mabaki: #1abc9c;
  color: white !important
}

Jifunze kwa kufikia