css3简单日历表ui布局特效代码下载


css3简单日历表ui布局特效代码下载
css3简单日历表ui布局特效代码下载以及简单日历表、ui布局等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. HTML代码

<div class="main-container">
	<div class="calendar-head">
		<h4 class="current-weekday">18号 星期一</h4>
		<h4 class="month-year">2020 5月</h4>
	</div>
	<div class="calendar-body">
		<ul class="weekdays">
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
			<li>五</li>
			<li>六</li>
			<li>日</li>
		</ul>
		<ul class="days">
			<li class="previous-month">27</li>
			<li class="previous-month">28</li>
			<li class="previous-month">29</li>
			<li class="previous-month">30</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>11</li>
			<li> <span class="date-with-event">12</span><span class="event-count">3</span></li>
			<li>13</li>
			<li>14</li>
			<li>15</li>
			<li>16</li>
			<li>17</li>
			<li><span class="active">18</span></li>
			<li>19</li>
			<li>20</li>
			<li>21</li>
			<li>22</li>
			<li>23</li>
			<li>24</li>
			<li>25</li>
			<li>26</li>
			<li>27</li>
			<li> <span class="date-with-event">28</span><span class="event-count">5</span></li>
			<li>29</li>
			<li>30</li>
			<li>31</li>
		</ul>
	</div>
	<div class="calendar-footer">
		<h4 class="current-hour">10:10 上午</h4>
		<a href="#" class="add-event-btn">+</a>
		<h4 class="current-temperature">28ºC</h4>
	</div>
</div>

相关推荐

发表评论

相关文章