以顯眼的日期表示方式呈現活動欄位

circular_date_presentation.html

<style>
    .circle_box { width: 64px; height: 64px; border-radius: 50%; text-align: center; vertical-align: middle; font-size: 20; font-family: helvetica; color: #888;  -webkit-box-shadow: inset 3px 2px 19px -2px rgba(0,0,0,0.58);
-moz-box-shadow: inset 3px 2px 19px -2px rgba(0,0,0,0.58);
box-shadow: inset 3px 2px 19px -2px rgba(0,0,0,0.58); float: left; margin-right: 8px; }
    .mon { font-size: 32px; font-weight: bold; }
    .m_title { color: steelblue; font-weight: bold; font-family: helvetica; width: 360px; }
    .m_title p { font-size: 14px; color: #333; margin-top: 0;}
    .cr { clear: both; }
</style>
<div class="circle_box"><span class="mon">12</span><br />2</div>
<div class="m_title">本(105)年志願服務協會辦理之訓練
    <p>成就非凡成就非凡成就非凡成就非凡成就非凡成就非凡成就非凡成就非凡成就非凡成就非凡</p>
</div>
<p class="cr"/>
<div class="circle_box"><span class="mon">5</span><br />28</div>
<div class="m_title">志工得免費進入之場所及其主管機關𢑥整表
    <p>成就非凡成就非凡成就非凡成就非凡成就非凡成就非凡成就非凡成就非凡成就非凡成就非凡</p>
</div>
<p class="cr" />
<div class="circle_box"><span class="mon">5</span><br />28</div>
<div class="m_title">志工活動通告
    <p>台東市原家中心於美術館擺攤，推廣原家中心工作，請志工踴躍協助。<br />日期：105年5⺼7日~8日(週六、日)</p>
</div>
<!-- 設計 Idea
 1. 月份顏色或季顏色
 2. 活動過期文字淡化
 3. 活動類別顏色區分
-->