Live Code Editor Version 2.0

Hướng dẫn tạo Calendar Layout với HTML và CSS - Demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css"> 
          * {
            box-sizing:border-box;
          }
          .container {
            width: 500px;
            margin: auto;
            font-weight: bold;
          }
          ul {
            list-style-type: none;
          }
          body {
            font-family: Verdana,sans-serif;
          }

.month {
              padding: 70px 25px;
              width: 100%;
              background: #CC0000 ;
          }

.month ul {
              margin: 0;
              padding: 0;
          }

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

.month .prev {
              float: left;
              padding-top: 10px;
          }

.month .next {
              float: right;
              padding-top: 10px;
          }

.weekdays {
              margin: auto;
              padding: 10px 0;
              background-color: #ddd;
          }

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

.days {
              margin: auto;
              padding: 10px 0;
              background: #eee;
              margin: 0;
          }

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

.days li .active {
              padding: 5px;
              background: #CC0000;
              color: white !important
          }
        </style>
    </head>
    <body> 
      <div class="container">
        <h2>Freetuts.net hướng dẫn định dạng Calendar</h2>

<div class="month">      
          <ul>
            <li class="prev">&#10094;</li>
            <li class="next">&#10095;</li>
            <li style="text-align:center">
              Tháng 5<br>
              <span style="font-size:18px">2017</span>
            </li>
          </ul>
        </div>