Sådan opretter du: CSS Kalender

Sådan opretter du en kalenderlayout

Første trin - Tilføj HTML:

<div class="month">
  <ul>
    <li class="prev">❮</li>
    <li class="next">❯</li>
    <li>August<br><span style="font-size:18px">2021</span></li>
  </ul>
</div>
<ul class="weekdays">
  <li>Fre</li>
  <li>Fre</li>
  <li>Fre</li>
  <li>Fre</li>
  <li>Fre</li>
  <li>Lø</li>
  <li>Sø</li>
</ul>
<ul class="dage">
  <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="aktiv">10</span></li>
  <li>11</li>
  ...etc
</ul>

Trin 2 - Tilføj CSS:

ul {liste-type: ingen;}
body {font-familie: Verdana, sans-serif;}
/* Månedstitel */
.måned {
  marg: 70px 25px;
  bredde: 100%;
  baggrund: #1abc9c;
  tekst-justering: center;
}
/* Månedsliste */
.måned ul {
  marg: 0;
  marg: 0;
}
.måned ul li {
  farve: hvid;
  font-størrelse: 20px;
  tekst-skift: store bogstaver;
  bogstaver-mellemrum: 3px;
}
/* Månedstitelens forrige måned knap */
.måned .forrige {
  flydende: venstre;
  marg-top: 10px;
}
/* Næste måned knap */
.måned .næste {
  flydende: højre;
  marg-top: 10px;
}
/* Arbejdsdage (mandag til søndag) */
.uge-dage {
  marg: 0;
  marg: 10px 0;
  baggrund-farve: #ddd;
}
.uge-dage li {
  vis: inline-block;
  bredde: 13.6%;
  farve: #666;
  tekst-justering: center;
}
/* Dage (1-31) */
.dage {
  marg: 10px 0;
  baggrund: #eee;
  marg: 0;
}
.dage li {
  liste-type: ingen;
  vis: inline-block;
  bredde: 13.6%;
  tekst-justering: center;
  marg-bund: 5px;
  font-størrelse: 12px;
  farve: #777;
}
/* Fremhæv “nuværende” dag */
.dage li .aktiv {
  marg: 5px;
  baggrund: #1abc9c;
  color: white !important
}

Prøv selv