iT邦幫忙

0

全端基礎-前端(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;
}

尚未有邦友留言

立即登入留言