html{height:100%;background: #222c3c}
body {margin:0;padding:0;font-size:16px;}
.main{border:10px #979393 solid; width:600px; margin:20px 20px;background:#FF6666  linear-gradient(150deg, #630606, #387988);padding:20px;}
header {border-bottom:1px #ffcd3c solid;padding-bottom:20px;}
.title{color:#fff;font-size:280%;margin:0;}
.info{color:#fff;font-size:120%;margin:0;}
section{margin:0 auto;}
label{float:left;width:100px;line-height:50px;color:#fff;font-size:24px;cursor:pointer;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
header input{width:100%;height:40px;margin-top:12px;text-indent:10px;border-radius:5px;border:none}
input:focus{outline-width:0}
h2{position:relative;color:#fff;}
span{position:absolute;top:2px;right:5px;display:inline-block;padding:0 5px;height:20px;border-radius:20px;background:#630606;line-height:20px;text-align:center;color:#fff;font-size:14px;}
ol,ul{padding:0;list-style:none;}
li input{position:absolute;top:5px;left:4px;width:22px;height:28px;cursor:pointer;}
p{padding:10px 0;}
li p input{top:0px;left:40px;width:80%;height:32px;line-height:32px;text-indent:5px;font-size:14px;background:#ce5252;border:none;}
li{background:RGBA(0,150,163,0.1) #ce5252;position:relative;margin-bottom: 10px;
	padding:0 45px;border-radius:3px;box-shadow: 0 1px 2px rgba(0,0,0,0.07);color:#fff;}
ol li{cursor:move;}
li a{position:absolute;top:12px;right:5px;display:inline-block;width:19px;height:18px;border-radius:14px;border:1px #efefef solid;text-decoration:none;line-height:19px;text-align:center;color:#efefef;font-size:14px;cursor:pointer;}
footer{color:#fff;font-size:14px;text-align:center;}
footer a{color:#fff;text-decoration:none;color:#fff;border:1px #fff solid;padding:2px 6px;border-radius:15px;}
footer a:hover{background:yellow;color:#000;}

/**小于用max: 屏幕最大可视区域为600的时候**/
@media screen and (max-width:650px) {
	html{height:100%; background:#FF6666  linear-gradient(90deg, #630606, #387988);}
	.main{margin:0;width:96%;padding:2%; border:0;background:none;}
	li{border-left:none;}
	ul li{border-left:none;}
	.info{display:none;}
}

由于工作需要临时记录一些待办任务，试用过几个todo待办事项的软件，他们都拥有强大的功能，完备的数据存储能力。但我只想要一个开箱即用，只想简单的管理一个待办任务而已，无需过多复杂的功能和登录。

后面在csdn上找到一个html5写的小型待办清单项目，在经过我的一波骚操作后，界面变得风骚了起来，别人都是漂亮得不像实力派。