html制作日历备忘录,CSS3制作日历备忘录

「爱情、让人受尽委屈。」 2022-10-09 05:54 193阅读 0赞

在发这个案例前，首先非常感谢藤藤加入w3cplus，今天开始w3cplus又多了一员猛将，我们会继续为大家制作一些实际可用的CSS3案例，帮助喜欢CSS3的同学一起学习和成长。今天这个案例就是藤藤(本来是要用藤藤的名发布，但由于我们设置还出了问题，所以先放上来让大家看看效果吧)制作的，将两张psd图转换到一个CSS3案例中。在这个案例中主要使用了：CSS3渐变制作日期的头部渐变效果；使用box-shadow制作了多层纸张的效果。

HTML Code:

##  ##

June

*  29
 *  30
 *  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
    
    ## Your Journey(2 items) ##
    
     *  ![大漠 前端攻城师][8868080c6e0a678e4fc7a6b8bce9ae52.png]
        
        http://www.w3cplus.com
     *  ![大漠 前端攻城师][8868080c6e0a678e4fc7a6b8bce9ae52.png]
        
        http://www.w3cplus.com
 *  26
 *  27
 *  28
 *  29
    
    ## Your Journey(2 items) ##
    
     *  ![大漠 前端攻城师][8868080c6e0a678e4fc7a6b8bce9ae52.png]
        
        http://www.w3cplus.com
     *  ![大漠 前端攻城师][8868080c6e0a678e4fc7a6b8bce9ae52.png]
        
        http://www.w3cplus.com
 *  30
 *  31
 *  1
 *  2

CSS Code\*\{

margin: 0;

padding: 0;

body\{

background:url(data:image/jpeg...k=);

font:12px 'Courgette', cursive;

color: \#000;

line-height: 32px;

font-weight: bold;

padding: 50px;

ul\{

list-style: none;

h2\{

font-size: 14px;

a\{

color:\#fff;

text-decoration: none;

letter-spacing: -3px;

.left\{

float: left;

.right\{

float:right;

.box\{

width: 211px;

padding: 4px;

box-shadow: 0 1px 1px \#ebedea;

margin:50px auto;

background: \#a2a4a1;

border-radius: 5px;

.box > h2\{

margin:0 -1px 0 0;

border:1px solid \#41531d;

box-shadow:inset 0 1px 1px \#a5ce55;

border-radius: 3px 3px 0 0;

padding:0 8px;

text-align: center;

color: \#fff;

text-shadow:0 -1px 0px \#999;

height: 32px;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(146,183,74,1)), color-stop(100%,rgba(100,134,34,1)));

background-image: -webkit-linear-gradient(top, rgba(146,183,74,1) 0%, rgba(100,134,34,1) 100%);

background-image: -moz-linear-gradient(top, rgba(146,183,74,1) 0%, rgba(100,134,34,1) 100%);

background-image: -o-linear-gradient(top, rgba(146,183,74,1) 0%, rgba(100,134,34,1) 100%);

background-image: -ms-linear-gradient(top, rgba(146,183,74,1) 0%, rgba(100,134,34,1) 100%);

background-image: linear-gradient(top, rgba(146,183,74,1) 0%, rgba(100,134,34,1) 100%);

.box .cal:after,

.box .cal:before \{

content:"";

display: table;

.box .cal:after \{

clear:both;

overflow: hidden;

.box .cal\{

border-radius: 0 0 5px 5px;

border:1px solid \#818380;

font-size: 0;

background: \#fff;

box-shadow:0 1px 1px \#d9d9d9,0 2px 1px \#555;

margin-right: -1px;

zoom: 1;

.box .cal > li\{

float:left;

width:29px;

border-right: 1px solid \#ccc;

border-top: 1px solid \#ccc;

text-align: center;

font-size: 12px;

cursor:pointer;

.box .cal > li:nth-of-type(7n)\{

border-right: none;

.fgray\{

color: \#ccc;

.tip\{

position: relative;

color:orange;

.tip:after\{

display: block;

content: "";

position: absolute;

border:4px solid orange;

border-color:orange orange transparent transparent ;

top: 0;

right: 0;

.gray,

.pink\{

position: relative;

.pink\{

color: \#a55353;

background: \#fff6f6;

.gray\{

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(216,216,216,1)), color-stop(100%,rgba(255,255,255,1)));

background-image: -webkit-linear-gradient(top, rgba(216,216,216,1) 0%, rgba(255,255,255,1) 100%);

background-image: -moz-linear-gradient(top, rgba(216,216,216,1) 0%, rgba(255,255,255,1) 100%);

background-image: -o-linear-gradient(top, rgba(216,216,216,1) 0%, rgba(255,255,255,1) 100%);

background-image: -ms-linear-gradient(top, rgba(216,216,216,1) 0%, rgba(255,255,255,1) 100%);

background-image: linear-gradient(top, rgba(216,216,216,1) 0%, rgba(255,255,255,1) 100%);

.gray:before,

.pink:before\{

content: "·";

position:absolute;

display:block;

font-size: 16px;

top: 10px;

left: 50%;

margin-left:-3px;

font-family: "Microsoft YaHei";

.gray:before\{

color: \#d8d8d8;

.pink:before\{

color: \#e5a9a9;

.tooltipBox\{

position: absolute;

top:32px;

left:-15px;

z-index: 99;

display: none;

width: 215px;

background: \#eaeff5;

border:1px solid \#64777e;

border-radius:5px;

box-shadow:0 1px 0 \#cdd5d8,0 2px 0 \#64777e,0 3px 0 \#cdd5d8,0 4px 0 \#64777e;

.box .cal > li:hover .tooltipBox\{

display: block;

.tooltipBox:after,

.tooltipBox:before\{

position: absolute;

display: block;

content: "";

border-style: solid;

.tooltipBox:after\{

border-width: 10px;

border-color: transparent transparent \#64777e;

top: -20px;

left: 20px;

z-index: 2;

.tooltipBox:before\{

border-width: 8px;

border-color:transparent transparent \#717f8a;

top:-16px;

left: 22px;

z-index: 3;

.tooltipBox > h2\{

background: \#717f8a;

line-height: 40px;

color: \#fff;

border-radius: 4px 4px 0 0;

text-indent: 1em;

.tooltip li\{

min-height: 36px;

padding: 5px;

border-bottom: 1px solid \#a8adb1;

box-shadow: 0 1px 1px \#fff;

color: \#232323;

.tooltip li:last-child\{

border-bottom: none;

box-shadow: none;

.timg\{

width:36px;

height: 36px;

float: left;

margin-right: 10px;

background: \#232323;

border-radius: 5px;

overflow: hidden;

.timg img\{

width: 36px;

height: 36px;

.ttext \{

overflow: hidden;

zoom:1;

[8868080c6e0a678e4fc7a6b8bce9ae52.png]: /images/20221005/bd96f28afcc14d04a4909e8c217730fd.png

html制作日历备忘录,CSS3制作日历备忘录

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 HTML+CSS制作导航栏

相关 3 行 CSS 代码实现日历界面

相关 3 行 CSS 代码实现日历界面

相关 python日历_如何在Python中动态创建HTML日历

相关 vue打卡日历_vue实现日历备忘录功能

相关 html制作日历备忘录,CSS3制作日历备忘录

相关备忘录html源码,备忘录.html

相关 html css制作404页面,CSS3绘制404页面

相关 css 翻日历,CSS3 日历卡

相关 css样式——常用备忘录