css3 日程表,CSS3 简单的日程表移动应用

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700);

* {

box-sizing: border-box;

}

body {

background: #333;

color: #333;

font-size: 18px;

font-family: 'Open Sans', Helvetica, Arial, sans-serif;

}

.container {

color: #f37021;

margin: 0 auto;

width: 100%;

max-width: 600px;

padding: 1em;

}

h2 {

font-size: 1.5em;

font-weight: bold;

text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.75);

}

span {

display: inline-block;

vertical-align: top;

}

em {

font-weight: normal;

font-style: italic;

font-size: 0.875em;

}

.name {

width: 75%;

padding-right: 1em;

font-weight: bold;

}

.event-agenda {

width: 100%;

max-width: 600px;

margin: 0 auto;

background: #fff;

box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.65);

}

dl {

padding: 1em;

position: relative;

}

dl:nth-child(2n) {

background: #e2e2e2;

}

.time {

width: 25%;

display: inline-block;

}

.toggle {

position: absolute;

top: 0.5em;

right: 1em;

font-size: 1.5em;

font-weight: bold;

-webkit-transition: -webkit-transform 400ms ease-in-out;

transition: transform 400ms ease-in-out;

color: #f37021;

}

.toggle-rotate {

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

}

dd {

margin-left: 25%;

padding-right: 1em;

}