css 日历图标实现

首先看一下效果图,可以跟随当天日期变动

html代码

<p class="calendar"><span id="dayStr"></span><em><span id="monthStr"></span></em>
</p>

css代码

.calendar{margin:.25em 10px 10px 0;padding-top:5px;float:left;width:65px;background:#ededef;background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc)); background: -moz-linear-gradient(top,  #ededef,  #ccc); font:bold 25px/30px Arial Black, Arial, Helvetica, sans-serif;text-align:center;color:#000;text-shadow:#fff 0 1px 0;    -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;    position:relative;-moz-box-shadow:0 2px 2px #888;-webkit-box-shadow:0 2px 2px #888;box-shadow:0 2px 2px #888;
}
.calendar em{display:block;font:normal bold 11px/30px Arial, Helvetica, sans-serif;color:#fff;text-shadow:#00365a 0 -1px 0;    background:#04599a;background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a)); background:-moz-linear-gradient(top,  #04599a,  #00365a); -moz-border-radius-bottomright:3px;-webkit-border-bottom-right-radius:3px;    border-bottom-right-radius:3px;-moz-border-radius-bottomleft:3px;-webkit-border-bottom-left-radius:3px;    border-bottom-left-radius:3px;    border-top:1px solid #00365a;
}

js代码

function getToday(){var date = new Date();var strDate = date.getDate();$("#monthStr").html(date.toDateString().split(" ")[1]);$("#dayStr").html(strDate);
}

参考网址:http://developer.51cto.com/art/201304/387840.htm

css 日历图标实现相关推荐

php日历css样式,如何在HTML5和CSS3创建一个日历图标
你有没有看到西蒙娜萨拉的最近的一篇文章, 如何在Photoshop中创建一个日历应用程序图标 ? 它看起来很棒,非常适合智能手机的日历应用程序,是大家非常关注的,因为我们进入2014年. 有没有可能建 ...
插入网络CSS矢量图标、网络SVG矢量图标
 <link rel="stylesheet" href="https://use.fontawesome.com/re ...
CSS染色图标（图片）
之前一直以为用background引入的图标无法染色(非字体图标),现在才知道有黑科技可以用,就是利用drop-shadow. 代码示例 <!DOCTYPE html> <html& ...
html+css+小图标,HTML+CSS入门一个简单实用的CSS loading图标
本篇教程介绍了HTML+CSS入门一个简单实用的CSS loading图标,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 在web开发中,为了提高用户体验,在加载数据的时 ...
css 字体图标更改颜色_在CSS中更改字体
css 字体图标更改颜色 CSS字体属性 (CSS font properties ) Font properties in CSS is used to define the font family ...
css加号图标_一步步打造自己的纯CSS单标签图标库
原标题:一步步打造自己的纯CSS单标签图标库作者:深海鱼在掘金原文:https://juejin.im/post/5a1c21c1f265da430b7af6e5 图标作为网页设计中的一部分,其在 ...
【技法操作】PS制作日历图标，UI设计教程
今天教大家制作UI日历图标,粉粉的配色刚好满足你. 所用软件为:PSCC2018版本,还没有这个软件的小伙伴们可以关注公号领取:design257,回复:UI必备软件,领取 (喜欢的小伙伴记得收藏点 ...
100多个纯CSS动画图标
我们在做页面开发的时候,可能要用到许多的动画图标. 那么只要套用这个CSS的图标框架,在加上一些修饰,就可以得到非常棒的图标样式, 下面我们来看一下这些图标的样式. 图标样式图片首先我们要引用写好 ...
Web前端技术分享：CSS菜单图标相关知识
CSS是一种用来表现HTML或XML等文件样式的计算机语言,它是Web前端人才必须要掌握的基础技能之一.想要学习Web前端,最开始的基础学习一定是CSS.接下来我就给大家简单分享CSS菜单图标相关知识 ...

css 日历图标实现

css 日历图标实现相关推荐

最新文章

热门文章