一款纯CSS的多彩创意日历,日历的样式非常的华丽漂亮,而且点击带有事件的日期,会有一个大气的时间段时间列表,可点击“左箭头”返回日历。
页面的head部分,需远程调用font-awesome图标字体库,并引入页面所需的样式文件,代码如下:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
页面的body部分,设置好日历日期的容器列表和日期事件的内容列表,代码如下:
<div class="route" id="index"></div>
<div class="route" id="oct-week-3"></div>
<div class="route" id="oct-week-4"></div>
<div class="route" id="nov-week-1"></div>
<div class="route" id="schedule"></div>
<main class="cal-device">
<header class="cal-header">
<div class="cal-subheader"></div>
<div class="cal-bar">
<div class="cal-button -left">
<i class="fa fa-bars -calendar"></i>
<a href="#index" class="fa fa-chevron-left -schedule"></a>
</div>
<div class="cal-title">
<div class="cal-heading -calendar">Calendar</div>
<div class="cal-heading -schedule">Wednesday, November 10</div>
</div>
<div class="cal-button -right">
<i class="fa fa-search"></i>
</div>
</div>
</header>
<section class="cal-app">
<header class="cal-week">
<div class="cal-weekday">周日</div>
<div class="cal-weekday">周一</div>
<div class="cal-weekday">周二</div>
<div class="cal-weekday">周三</div>
<div class="cal-weekday">周四</div>
<div class="cal-weekday">周五</div>
<div class="cal-weekday">周六</div>
</header>
<div class="cal-scene -calendar">
<!-- 省略部分演示代码 -->
</div>
<div class="cal-scene -schedule">
<div class="cal-item">
<div class="cal-time"><span>08:00</span></div>
<div class="cal-task">
<p>wake up</p>
</div>
</div>
<div class="cal-item -long">
<div class="cal-time"><span>12:15</span></div>
<div class="cal-task">
<p>meeting with the team, discussing the project requirements</p>
</div>
</div>
<div class="cal-item">
<div class="cal-time"><span>13:00</span></div>
<div class="cal-task">
<p>lunch with Peter</p>
<a><i class="fa fa-map-marker"></i>cafe <q>Petit brasserie</q></a>
</div>
</div>
<div class="cal-item">
<div class="cal-time"><span>14:30</span></div>
<div class="cal-task">
<p>call with Johnathan and Stevie</p>
</div>
</div>
<div class="cal-item -long">
<div class="cal-time"><span>16:45</span></div>
<div class="cal-task">
<p>project presentation</p>
<a><i class="fa fa-map-marker"></i>Head Office</a>
</div>
</div>
<div class="cal-item">
<div class="cal-time"><span>18:00</span></div>
<div class="cal-task">
<p>call with Johnathan and Stevie</p>
</div>
</div>
<div class="cal-item -long">
<div class="cal-time"><span>19:00</span></div>
<div class="cal-task">
<p>David's birthday party</p>
<a><i class="fa fa-map-marker"></i>bar <q>Tailor's John</q></a>
</div>
</div>
<div class="cal-item">
<div class="cal-time"></div>
<div class="cal-task"></div>
</div>
</div>
</section>
</main>
<div class="meta">
<h1>CSS-only Colorful <br>Calendar Concept</h1>
<p>
Dribbble Rework<br />
Original Shot by <a href="http://www.sucaihuo.com" target="_blank">素材火</a>
</p>
<p>
Click on the arrows (when enabled) and the highlighted date to see the effect.<br>
You can also go <strong>back</strong> in your browser to navigate between scenes, or click the left arrow in the schedule view.
</p>
<p>
Works in all modern browsers.
</p>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791