* { margin:0; padding:0; list-style:none; } header { width:100%; height:100px; background:black; } header .con { width:1000px; height:100%; display:flex; justify-content:space-around; align-items:center; margin:0 auto; } header .con input { outline:none; border:none; } header .con input[type*='tt'] { width:150px; height:50px; text-align:center; font-size:24px; color:#fff; border-radius:5px; letter-spacing:3px; /*设置字间距*/ } header .con input[type*='tt']:nth-child(2) { background:plum; } header .con input[type*='tt']:nth-child(3) { background:tomato; } header .con input[type='text'] { width:400px; height:50px; font-size:25px; box-sizing:border-box; padding-left:8px; } .message { width:1000px; height:auto; margin:50px auto; } .message h3 { border-bottom:2px solid #eee; font-size:30px; padding-bottom:5px; letter-spacing:5px; } .message li { width:900px; height:50px; border:1px solid #aaa; border-left:5px solid palegreen; line-height:50px; border-radius:5px 0px 0px 5px; margin:20px auto; } .message li input { width:40px; height:40px; margin:5px 30px 0px 20px; float:left; } .message li>p { display:inline-block; float:left; font-size:20px; } .message li>div { float:right; width:40px; height:40px; border-radius:50%; background:palegreen; text-align:center; line-height:40px; color:white; margin:5px 30px 0px 0px; } .message .delSheet p { text-decoration:line-through; }
本示例所展示的是一个离线记事本的功能,使用的是localstorage本地存储