1、新建html文档。
2、书写hmtl代艨位雅剖码。<div class="box"> <section class="date"> <div class="head"> <div class="prev">上一月</div> <div class="tomon"><span class="year"></span>年 <span class="month"></span>月</div> <div class="next">下一月</div> </div> <ol><li>周日</li><li>周一</li><li>周二</li><li>周三</li><li>周四</li><li>周五</li><li>周六</li></ol> <ul> <li>日期</li><li>日期</li><li>日期</li><li>日期</li><li>日期</li><li>日期</li><li>日期</li> <li>日期</li><li>日期</li><li>日期</li><li>日期</li> </ul> </section></div>
3、书写hmtl代艨位雅剖码。*{margin: 0;padding: 0;font-style: normal稆糨孝汶;}.clear{clear: both;}html,body{font-size: 62.5%;font-family: "Microsoft YaHei", "SimSun", Helvetica, Arial, sans-serif;background: #f1f5f8;}.box{width: 100%;height: 100%;}.head{width: 100%;height:4.5rem;cursor: pointer;}.head .prev,.head .next{width: 20%;text-align: center;float: left;line-height: 4.5rem;font-size:1.6rem;}.head .tomon{width: 60%;float: left;text-align: center;line-height: 4.5rem;font-size: 1.6rem;}.date ol{width: 100%;height: 4rem;background: #005bac;padding: 0;}.date ol li{display:block;float: left;width: 14.2857%;text-align: center;font-size: 1.6rem;color: #fff;border: none;padding: 0;line-height: 4rem;height: 4rem;}.date ul{width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;}.date ul li{display: block;width: 14.2857%;height: 4.5rem;text-align: center;font-size: 1.6rem;background: #fff;position: relative;}.date ul li i{font-size: 10px;position: absolute;right: 0;bottom:0.3rem;display:block;height: 15px;line-height: 15px;width: 100%;text-align: center;color: #e35925;}.date ul li span{display: block;width: 100%;height: 100%;line-height: 4.5rem;text-align: center;}.date ul .no_date{background: #fafafa;color: #999;line-height:4.5rem;}.date ul .act_wk{color: #e35925;}.date ul .act_date{background: #ff6600;color: #fff;}.date ul .act_ds{background: #005bac;color: #fff;}
4、书写并添加js代码。<script src="js/jquery-1.8.3.min.js"></script><script src="js/mobile_date.js"></script>
5、代码整体结构。
6、查看效果。
