html5待办事项模板,待办事项列表模板

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,500);

h1 {

background: #2980b9;

color: white;

margin: 0;

padding: 10px 20px;

text-transform: uppercase;

font-size: 24px;

font-weight: normal;

}

ul {

list-style: none;

margin: 0;

padding: 0;

}

body {

font-family: 'Roboto';

background: #2BC0E4;

/* fallback for old browsers */

background: -webkit-linear-gradient(to left, #2BC0E4, #EAECC6);

/* Chrome 10-25, Safari 5.1-6 */

background: linear-gradient(to left, #2BC0E4, #EAECC6);

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

li {

background: white;

height: 40px;

line-height: 40px;

color: #666;

}

li:nth-child(2n) {

background-color: #f7f7f7;

}

input {

font-size: 18px;

background-color: #f7f7f7;

box-sizing: border-box;

height: 40px;

border-style: none;

padding: 13px 13px 13px 20px;

color: #2980b9;

width: 100%;

}

input:focus {

background: #f7f7f7;

border: 3px solid #2980b9;

outline: none;

}

#container {

background: #f7f7f7;

width: 360px;

margin: 100px auto;

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

}

.completed {

color: lightslategray;

text-decoration: line-through;

}

.blue {

color: blue;

}

span {

background-color: #e74c3c;

margin-right: 20px;

height: 40px;

text-align: center;

color: white;

width: 0;

display: inline-block;

transition: 0.2s linear;

opacity: 0;

}

li:hover span {

width: 40px;

opacity: 1;

}

.fa-plus {

float: right;

}

footer {

text-align: center

}