Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
August 2015
Mo
Tu
We
Th
Fr
Sa
Su
-4
-3
-2
-1
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
css
html { position: relative; position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; } body { background-color: #e6dc83; } section.calendar { background-color: #29323f; font-family: 'Dosis', sans-serif; color: #fff; width: 290px; padding: 45px; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.6); border-radius: 5px; } section.calendar h1 { text-align: center; color: #fcee6d; margin: 0 0 30px 0; } section.calendar form { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; } section.calendar form label.weekday { display: inline-block; width: 25px; margin: 8px; text-align: center; color: #999; } section.calendar form form { margin: 0; padding: 0; } section.calendar form label.day { display: inline-block; width: 25px; margin: 8px; } section.calendar form label.day span { display: inline-block; width: 25px; height: 25px; line-height: 25px; margin: -2px 0 0 -2px; border-radius: 50%; border: 2px solid #29323f; text-align: center; -webkit-transition: all .2s linear; transition: all .2s linear; cursor: pointer; } section.calendar form label.day span:hover { border-color: #e7d84f; } section.calendar form label.day em { display: inline-block; position: absolute; border-radius: 50%; border-color: #29323f; width: 3px; height: 3px; background-color: #685e02; margin-left: 11px; margin-top: 2px; opacity: 0; -webkit-transition: all .2s linear; transition: all .2s linear; } section.calendar form label.day input[type=text] { border: 0; opacity: 0; position: absolute; margin-top: 40px; left: -45px; width: 380px; height: 1px; padding: 0; outline: none; font-size: 16px; -webkit-transition: height .2s linear, opacity .2s linear, color .02s linear; transition: height .2s linear, opacity .2s linear, color .02s linear; color: #fff; } section.calendar form label.day input[type=text]:focus { opacity: 1; height: 35px; padding: 10px 40px; left: -45px; width: 300px; color: #29323f; } section.calendar form label.day input[type=text]:focus + span { color: #fcee6d; border-color: #fcee6d; background: #fcee6d; color: #29323f; font-weight: bold; margin-bottom: 65px; } section.calendar form label.day input[type=text]:focus ~ em { border-radius: 0; border: 5px solid transparent; background: transparent; border-bottom-color: white; margin-top: -62px; margin-left: 7px; width: 0; height: 0; display: inline-block; opacity: 1; } section.calendar form label.day input[type=text]:valid ~ em { display: inline-block; opacity: 1; } section.calendar form label.day.invalid { opacity: 0; width: 25px; height: 25px; } section.calendar form label.day.invalid span, section.calendar form label.day.invalid input { display: none; } section.calendar div.clearfix { clear: both; } section.calendar div.hidden { display: none; }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title> Calendar Widget 日历小工具-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号