CSS日历对齐

时间:2017-08-13 05:04:57

标签: html css calendar

我是CSS新手,构建这个日历我做了这个,我需要这个日历适合JSP页面。

  1. 这涵盖了整个页面。任何人都可以建议如何制作可调整大小的
  2. 此外,当我必须将盒子放空以将月份的第1个移动到 随着盒子上下移动,一周中的哪一天。可以做些什么
  3. 有没有更好的方法来做到这一点,需要这样一个工具 小费。谢谢你的期待。
  4. 
    
    * {
      box-sizing: border-box;
    }
    
    ul {
      list-style-type: none;
    }
    
    body {
      font-family: Verdana, sans-serif;
    }
    
    .month {
      padding: 70px 25px;
      width: 100%;
      background: #1abc9c;
    }
    
    .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: 0;
      padding: 10px 0;
      background-color: #ddd;
    }
    
    .weekdays li {
      display: inline-block;
      width: 13.6%;
      color: #666;
      text-align: center;
    }
    
    .days {
      padding: 10px 0;
      background: #eee;
      margin: 0;
    }
    
    .days li {
      list-style-type: none;
      display: inline-block;
      width: 13.6%;
      height: 75px;
      text-align: center;
      margin-bottom: 20px;
      font-size: 17px;
      border: 3px solid #73AD21;
      color: #777;
    }
    
    .days li .active {
      padding: 5px;
      background: #1abc9c;
      color: white !important
    }
    
    
    /* Add media queries for smaller screens */
    
    @media screen and (max-width:720px) {
      .weekdays li,
      .days li {
        width: 13.1%;
      }
    }
    
    @media screen and (max-width: 420px) {
      .weekdays li,
      .days li {
        width: 12.5%;
      }
      .days li .active {
        padding: 2px;
      }
    }
    
    @media screen and (max-width: 290px) {
      .weekdays li,
      .days li {
        width: 12.2%;
      }
    }
    
    .tooltip {
      position: relative;
      display: inline-block;
    }
    
    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -60px;
      opacity: 0;
      transition: opacity 1s;
    }
    
    .tooltip .tooltiptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
    }
    
    <!DOCTYPE html>
    <html>
    <head/>
    
    <body>
    
      <h1>CSS Calendar</h1>
    
      <div class="month">
        <ul>
          <li class="prev">&#10094;</li>
          <li class="next">&#10095;</li>
          <li style="text-align:center">
            August<br>
            <span style="font-size:18px">2016</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>&nbsp;</li>
        <li>1<br><br>$1.25
        </li>
        <li>2<br><br>$1.25
        </li>
        <li>3<br><br>$1.25
        </li>
        <li>4<br><br>$1.25
        </li>
        <li>5<br><br>$1.25
        </li>
        <li>6<br><br>$1.25
        </li>
        <li>7<br><br>$1.25
        </li>
        <li>8<br><br>$1.25
        </li>
        <li>9<br><br>$1.25
        </li>
        <li>10<br><br>$1.25
        </li>
        <li>11<br><br>$1.25
        </li>
        <li>12<br><br>$1.25
        </li>
        <li>13<br><br>$1.25
        </li>
        <li>14<br><br>$1.25
        </li>
        <li>15<br><br>$1.25
        </li>
        <li>16<br><br>$1.25
        </li>
        <li>17<br><br>$1.25
        </li>
        <li>18<br><br>$1.25
        </li>
        <li>19<br><br>$1.25
        </li>
        <li>20<br><br>$1.25
        </li>
        <li>21<br><br>$1.25
        </li>
        <li>22<br><br>$1.25
        </li>
        <li>23<br><br>$1.25
        </li>
        <li>24<br><br>$1.25
        </li>
        <li>
          <div class="tooltip">25<br><br>$1.25
            <span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
          </div>
        </li>
        <li>
          <div class="tooltip">26<br><br>$1.25
            <span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
          </div>
        </li>
        <li>
          <div class="tooltip">27<br><br>$1.25
            <span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
          </div>
        </li>
        <li>
          <div class="tooltip">28<br><br>$1.25
            <span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
          </div>
        </li>
        <li>
          <div class="tooltip">29<br><br>$1.25
            <span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
          </div>
        </li>
        <li>
          <div class="tooltip">30<br><br>$1.25
            <span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
          </div>
        </li>
        <li>
          <div class="tooltip">31<br><br>$1.25
            <span class="tooltiptext">Plan One:$1.25<br>Plan Two: $2.34</span>
          </div>
        </li>
      </ul>
    
    </body>
    
    </html>
    &#13;
    &#13;
    &#13;

1 个答案:

答案 0 :(得分:0)

我不确定这是否是您正在寻找的。

  1. 使用vertical-align: bottom来修复框对齐。
  2. 使用margin: 0 auto在页面中水平居中日历。
  3. https://jsfiddle.net/yxhgq1tz/3/

    .wrapper {
      width: 500px;
      margin: 0 auto;
    }
    

    垂直居中。有几种选择。

    1. 使用css3 flexbox。
    2. 使用vertical-align: middledisplay: table