calendar html5,Use HTML5 To Build a Calendar

CSS

语言：

CSSSCSS

确定

/* How many days for a month to claim a row as its month?*/

@import url(http://fonts.googleapis.com/css?family=Roboto:400,900);

* {

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

font-family: 'Roboto', sans-serif;

font-weight: bold;

background: black;

padding: 0;

margin: 0;

}

.container {

position: relative;

width: 280px;

background: #44619d;

border-width: 0;

height: 660px;

}

.container .calendar {

position: absolute;

width: 245px;

margin: 0;

padding: 0;

}

.day {

display: inline-block;

list-style: none;

margin: 0;

padding: 8.75px 0;

position: absolute;

text-align: center;

width: 35px;

height: 35px;

}

.today {

/*rgba(80,24,137,1) */

background-color: rgba(255, 165, 0, 0.9) !important;

color: black;

}

.today:before {

opacity: 1;

width: 0;

left: 0;

-webkit-transition: all 0.7s ease;

}

.today:hover:after {

-webkit-transition: all 0.7s ease;

content: "Today";

position: absolute;

top: 0;

left: -60px;

background-color: rgba(0, 0, 0, 0.4);

z-index: 21;

padding: 8.75px 5px;

text-shadow: none;

letter-spacing: 1px;

font-weight: normal;

width: auto;

}

.past {

color: rgba(120, 120, 120, 0.51);

/* week relative to top position*/

}

[data-relativeweek="0"] {

top: 86.25px;

}

[data-relativeweek="1"] {

top: 121.25px;

}

[data-relativeweek="2"] {

top: 156.25px;

}

[data-relativeweek="3"] {

top: 191.25px;

}

[data-relativeweek="4"] {

top: 226.25px;

}

[data-relativeweek="5"] {

top: 261.25px;

}

[data-relativeweek="6"] {

top: 296.25px;

}

[data-relativeweek="7"] {

top: 331.25px;

}

[data-relativeweek="8"] {

top: 366.25px;

}

[data-relativeweek="9"] {

top: 401.25px;

}

[data-relativeweek="10"] {

top: 436.25px;

}

[data-relativeweek="11"] {

top: 471.25px;

}

[data-relativeweek="12"] {

top: 506.25px;

}

[data-relativeweek="13"] {

top: 541.25px;

}

[data-relativeweek="14"] {

top: 576.25px;

}

[data-relativeweek="15"] {

top: 611.25px;

}

[data-relativeweek="16"] {

top: 646.25px;

}

[data-relativeweek="17"] {

top: 681.25px;

}

[data-relativeweek="18"] {

top: 716.25px;

}

[data-relativeweek="19"] {

top: 751.25px;

}

[data-relativeweek="20"] {

top: 786.25px;

}

[data-relativeweek="21"] {

top: 821.25px;

}

[data-relativeweek="22"] {

top: 856.25px;

}

[data-relativeweek="23"] {

top: 891.25px;

}

[data-relativeweek="24"] {

top: 926.25px;

}

[data-relativeweek="25"] {

top: 961.25px;

}

[data-relativeweek="26"] {

top: 996.25px;

}

[data-relativeweek="27"] {

top: 1031.25px;

}

[data-relativeweek="28"] {

top: 1066.25px;

}

[data-relativeweek="29"] {

top: 1101.25px;

}

[data-relativeweek="30"] {

top: 1136.25px;

}

[data-relativeweek="31"] {

top: 1171.25px;

}

[data-relativeweek="32"] {

top: 1206.25px;

}

[data-relativeweek="33"] {

top: 1241.25px;

}

[data-relativeweek="34"] {

top: 1276.25px;

}

[data-relativeweek="35"] {

top: 1311.25px;

}

[data-relativeweek="36"] {

top: 1346.25px;

}

[data-relativeweek="37"] {

top: 1381.25px;

}

[data-relativeweek="38"] {

top: 1416.25px;

}

[data-relativeweek="39"] {

top: 1451.25px;

}

[data-relativeweek="40"] {

top: 1486.25px;

}

[data-relativeweek="41"] {

top: 1521.25px;

}

[data-relativeweek="42"] {

top: 1556.25px;

}

[data-relativeweek="43"] {

top: 1591.25px;

}

[data-relativeweek="44"] {

top: 1626.25px;

}

[data-relativeweek="45"] {

top: 1661.25px;

}

[data-relativeweek="46"] {

top: 1696.25px;

}

[data-relativeweek="47"] {

top: 1731.25px;

}

[data-relativeweek="48"] {

top: 1766.25px;

}

[data-relativeweek="49"] {

top: 1801.25px;

}

[data-relativeweek="50"] {

top: 1836.25px;

}

[data-relativeweek="51"] {

top: 1871.25px;

}

[data-relativeweek="52"] {

top: 1906.25px;

}

[data-relativeweek="53"] {

top: 1941.25px;

}

[data-relativeweek="54"] {

top: 1976.25px;

}

[data-relativeweek="55"] {

top: 2011.25px;

/* x position of day*/

}

.mondayFirst [data-dayofweek="1"] {

left: 35px;

}

.mondayFirst [data-dayofweek="2"] {

left: 70px;

}

.mondayFirst [data-dayofweek="3"] {

left: 105px;

}

.mondayFirst [data-dayofweek="4"] {

left: 140px;

}

.mondayFirst [data-dayofweek="5"] {

left: 175px;

}

.mondayFirst [data-dayofweek="6"] {

left: 210px;

}

.mondayFirst [data-dayofweek="0"] {

left: 245px;

/* header*/

}

[data-dayofweek="0"].header {

left: 35px;

}

[data-dayofweek="1"].header {

left: 70px;

}

[data-dayofweek="2"].header {

left: 105px;

}

[data-dayofweek="3"].header {

left: 140px;

}

[data-dayofweek="4"].header {

left: 175px;

}

[data-dayofweek="5"].header {

left: 210px;

}

[data-dayofweek="6"].header {

left: 245px;

/* month */

}

.jan,

.jan[data-dayofweek='4']:before {

background-color: #9cf;

}

.feb,

.feb[data-dayofweek='4']:before {

background-color: #cff;

}

.mar,

.mar[data-dayofweek='4']:before {

background-color: #3cc;

}

.apr,

.apr[data-dayofweek='4']:before {

background-color: #cfc;

}

.may,

.may[data-dayofweek='4']:before {

background-color: #9c0;

}

.jun,

.jun[data-dayofweek='4']:before {

background-color: #ff9;

}

.jul,

.jul[data-dayofweek='4']:before {

background-color: #fc0;

}

.aug,

.aug[data-dayofweek='4']:before {

background-color: #f90;

}

.sep,

.sep[data-dayofweek='4']:before {

background-color: #f60;

}

.oct,

.oct[data-dayofweek='4']:before {

background-color: #ff8080;

}

.nov,

.nov[data-dayofweek='4']:before {

background-color: #c9f;

}

.dec,

.dec[data-dayofweek='4']:before {

background-color: #ccf;

/* header */

}

.header {

text-transform: uppercase;

font-size: 0.7em;

font-weight: bold;

top: 60px;

background: black;

color: white;

padding: 6px 0 0;

height: 26.25px;

position: absolute;

left: 0;

z-index: 10;

}

.header:nth-child(n+6) {

background-color: #188950;

color: white;

}

.day[data-dayofweek='4']:before {

content: attr(data-month);

position: absolute;

left: -141px;

top: 0;

width: 35px;

color: black;

font-weight: normal;

text-transform: capitalize;

font-size: smaller;

padding: 8.75px 0;

height: 35px;

}

.year {

position: absolute;

top: -30px;

color: yellow;

right: 10px;

z-index: 20;

font-size: 48px;

opacity: 0.8;

}