Hoe te maken: CSS-kalender

Hoe een kalenderindeling te maken

Eerste stap - Voeg HTML toe:

<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>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>

Tweede stap - Voeg CSS toe:

ul {lijststijl-type: none;}
lichaam {font-family: Verdana, sans-serif;}
/* Maandtitel */
.month {
  uitlijning: 70px 25px;
  breedte: 100%;
  achtergrond: #1abc9c;
  tekstuitlijning: center;
{}
/* Maandlijst */
.month ul {
  marge: 0;
  uitlijning: 0;
{}
.month ul li {
  kleur: wit;
  lettergrootte: 20px;
  tekstomvorming: hoofdletters;
  letterspacing: 3px;
{}
/* Knop voor vorige maand in maandtitel */
.month .prev {
  zeefloat: links;
  bovenmarge-top: 10px;
{}
/* Knop voor volgende maand */
.month .next {
  zeefloat: recht;
  bovenmarge-top: 10px;
{}
/* Werkdagen (maandag tot zondag) */
.weekdays {
  marge: 0;
  uitlijning: 10px 0;
  achtergrondkleur: #ddd;
{}
.weekdays li {
  weergave: inline-blok;
  breedte: 13,6%;
  kleur: #666;
  tekstuitlijning: center;
{}
/* Dagen (1-31) */
.days {
  uitlijning: 10px 0;
  achtergrond: #eee;
  marge: 0;
{}
.days li {
  lijststijl-type: none;
  weergave: inline-blok;
  breedte: 13,6%;
  tekstuitlijning: center;
  marge-beneden: 5px;
  lettergrootte: 12px;
  kleur: #777;
{}
/* Benadruk “huidige” dag */
.days li .active {
  uitlijning: 5px;
  achtergrond: #1abc9c;
  color: white !important
{}

Try it yourself