上次把布局做好了,不过呢,页面就好像一夜回到解放前呢~
常规化CSS
npm isntall normalize.css --save
css
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
}
html{
font-size: 62.5%;
}
body{
background-color:#f2f2f2;
color: #A9A9A9;
}
.container{
max-width:75rem;
margin: 0 auto;
position: relative;
}
h1{
text-align: center;
}
.task-list{
margin: 10px 0;
}
input,
.task-item,
.task-detail-mask,
textarea,
button{
padding:1rem;
border-radius:3px;
}
textarea,
input[type=text],
input[type=date],
button
{border: 0;}
textarea,
input[type=text],
input[type=date]{
width: 100%;
display: block;
background: #F2F2F2;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.3);
box-shadow: inset 0 1px 1px rgba(0,0,0,.3);
}
textarea{
min-height: 100px;
}
input[type=text]:hover,
input[type=text]:focus,
input[type=date]:hover,
input[type=date]:focus{
background: #fff;
}
button{
display: inline-block;
cursor: pointer;
color: #333;
}
.add-task input[type=text]{
float: left;
width: 84%;
margin-right: 1%;
}
.add-task [type=submit]{
width: 15%;
background:#64BEE9;
}
.add-task [type=submit],.task-item{
-webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,.4);
-moz-box-shadow: inset 0 2px 3px rgba(0,0,0,.4);
box-shadow: inset 0 2px 3px rgba(0,0,0,.4);
-webkit-transition: background .2s;
-o-transition: background .2s;
transition: background .2s;
}
.add-task [type=submit]:hover{
background: #80C3E2;
}
.task-item{
background: #fff;
color: #333;
margin-bottom:2px;
cursor:pointer;
}
.task-item:hover{
background: #ddd;
}
.task-detail-mask,.task-detail{
position: absolute;
}
.task-detail{
background: #fff;
color: #333;
width: 50%;
height: 100%;
padding:10px;
bottom: 0;
right: 0;
}
.task-detail .content{
padding: 10px;
font-weight:900;
cursor: pointer;
}
.task-detail > *{
margin-bottom: 10px;
}
.task-detail-mask{
top:0;
bottom: 0;
left: 0;
right: 0;
background: rgba(30,30,30,.3);
}