成品的效果图
1.HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中兴城-考勤信息</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="keywords" content="中兴城">
<meta name="description" content="中兴城">
<meta name="format-detection" content="telephone=no,email=no,adress=no">
<!-- 防止UC浏览器字体放大 -->
<meta name="wap-font-scale" content="no">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->
<link href="/go.html?url=https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
<link rel="stylesheet" href="/go.html?url=css/kaoqin.css">
<link rel="stylesheet" href="/go.html?url=css/common.css">
</head>
<body>
<!-- 主内容 -->
<div class="container">
<!-- 分类 -->
<div class="banner_kq">
<div class="control_">
<a href="/go.html?url=javascript:;" class="preMonth"><img src="images/to_left_swiper_icon.png" alt=""></a>
<span class="date_">2017年12月</span>
<a href="/go.html?url=javascript:;" class="nextMonth"><img src="images/to_right_swiper_icon.png" alt=""></a>
</div>
<div class="show_info">
<div class="flex">
<div class="item">
<div class="circle"><span></span>27</div>应出勤</div>
<div class="item">
<div class="circle"><span></span>26</div>实际出勤</div>
<div class="item">
<div class="circle"><span></span>2</div>迟到</div>
<div class="item">
<div class="circle"><span></span>1</div>早退</div>
</div>
</div>
</div>
<ul class="calendT">
<!-- late:迟到 error:早退 errorLate:迟到及早退 today: 今天-->
<li>
<span>周一</span>
<span>周二</span>
<span>周三</span>
<span>周四</span>
<span>周五</span>
<span>周六</span>
<span>周七</span>
</li>
</ul>
<ul class="calendC">
<li>
<span></span>
<span></span>
<span></span>
<span></span>
<span>1</span>
<span>2</span>
<span>3</span>
</li>
<li>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span class="late">8</span>
<span>9</span>
<span>10</span>
</li>
<li>
<span class="error">11</span>
<span>12</span>
<span class="today">13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
</li>
<li>
<span>18</span>
<span class="errorLate">19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
</li>
<li>
<span>25</span>
<span>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
</ul>
<div class="show_tips">
<span>今日</span><span>休息日</span><span>迟到/早退</span>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="js/kaoqin.js"></script>
</body>
</html><!DOCTYPE html>
<html
