* {
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本地存储