全端基础-前端(2).calendar(切版)

main.css

#calender{   margin: 0 auto;   width: 90%;}.day, .date-block{   float: left;   width: calc(100%/7);}#dates{   border-right: 1px solid #ccc;   border-bottom: 1px solid #ccc;}.date-block{   border-top: 1px solid #ccc;   border-left: 1px solid #ccc;   height: 15vh;}

--vh、vw在使用上与百分比%很相似，vh代表view height，指的是萤幕可视範围高度的百分比，而vw则代表view width，是指萤幕可视範围宽度的百分比。
vmin：宽度或高度较小值的百分比
vmax：宽度或高度较大值的百分比

index.php

<div id="dates" class="clearfix">        <?php foreach($dates as $key => $date): ?>            <div class="date-block <?= (is_null($date))? 'empty': ' ' ?>">                <div class="date"><?= $date ?></div>                <div class="events">                        </div>            </div>        <?php endforeach ?></div>

--">
--这里的意思是，$date如果空的话，成立一个empty的class

main.css

.date-block.empty{   background-color: #eee;}#header{   font-size: 2.4rem;   font-weight: bold;}