html5待办事项模板,使用HTML5本地存储实现的待办事项列表

CSS

语言：

CSSSCSS

确定

/* base, reset, and utility */

html {

box-sizing: border-box;

}

*,

*:before,

*:after {

box-sizing: inherit;

}

* {

margin: 0;

padding: 0;

}

html,

body {

width: 100%;

height: 100%;

}

.clearfix:after,

.row:after {

content: "";

display: table;

clear: both;

}

/* typography */

body {

color: #2B3437;

font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Sans-serif;

font-size: 16px;

text-align: center;

-webkit-font-smoothing: antialiased;

text-rendering: optimizeLegibility;

}

h1 {

color: #444;

font-size: 24px;

font-weight: normal;

margin: 0 0 .7em;

padding: 12px 0;

text-align: center;

}

/* structure */

.container {

margin: 0 auto;

max-width: 34em;

padding: 2.5em;

text-align: left;

}

.row {

clear: both;

margin-bottom: 1em;

width: 100%;

}

/* list */

ul {

display: block;

list-style: none;

width: 100%;

}

ul li {

border-bottom: solid 1px #ccc;

color: #444;

cursor: pointer;

display: block;

padding: 13px 16px 12px;

text-transform: capitalize;

}

ul li:last-child {

border-bottom-color: transparent;

}

ul li:hover {

color: tomato;

text-decoration: line-through;

}

/* inputs */

input[type=text] {

-webkit-transition: border-color .2s ease, background-color .2s ease;

transition: border-color .2s ease, background-color .2s ease;

background: #fff;

border: none;

border-bottom: solid 2px #bbb;

border-radius: 0px;

line-height: normal;

padding: 12px 16px 12px;

width: 100%;

}

input[type=text]:hover {

border-color: #777;

}

input[type=text]:focus {

border-color: #5CACCA;

outline: none;

}

.group {

-webkit-align-content: stretch;

-ms-flex-line-pack: stretch;

align-content: stretch;

-webkit-box-align: end;

-webkit-align-items: flex-end;

-ms-flex-align: end;

align-items: flex-end;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-flow: row nowrap;

-ms-flex-flow: row nowrap;

flex-flow: row nowrap;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

}

.group-fill {

display: inline-block;

margin: 0 auto;

-webkit-box-ordinal-group: 2;

-webkit-order: 1;

-ms-flex-order: 1;

order: 1;

-webkit-box-flex: 1;

-webkit-flex-grow: 1;

-ms-flex-positive: 1;

flex-grow: 1;

}

.group-side {

display: inline-block;

margin: 0 auto;

-webkit-box-ordinal-group: 3;

-webkit-order: 2;

-ms-flex-order: 2;

order: 2;

}

/* input placeholder text */

::-webkit-input-placeholder {

color: #AAA;

}

::-moz-placeholder {

color: #AAA;

}

:-ms-input-placeholder {

color: #AAA;

}

/* button */

.button {

background: #fff;

border: none;

border-bottom: solid 2px #5CACCA;

border-top: solid 1px transparent;

border-radius: 0px;

color: #5CACCA;

padding: 12px 16px;

margin-left: 2px;

}

.button:hover {

color: #79C8E5;

border-bottom-color: #79C5E1;

}

.button:focus {

outline: none;

border-bottom-color: #79C5E1;

}

#clear {

cursor: pointer;

text-decoration: none;

position: fixed;

right: 5px;

bottom: 5px;

background: white;

padding: 1em;

color: #888;

font-size: 12px;

}

#clear:hover {

color: tomato;

}

#clear strong {

font-size: 14px;

margin-left: 3px;

}