css样式设置:
<style>
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background-color: #f1f1f1;
}
.container {
width: 400px;
padding: 50px;
/* background-color: pink; */
margin: 0 auto;
}
h1 {
text-align: center;
}
.container>p:nth-of-type(2) {
line-height: 4rem;
font-size: 3.2rem;
}
section {
height: 60px;
padding: 10px;
background-color: white;
margin-top: 2rem;
box-shadow: 1px 1px 3px lightgray;
}
section .item {
width: 50%;
height: 100%;
float: left;
border-right: 1px solid lightgray;
display: flex;
flex-wrap: wrap;
align-content: center;
}
section .zhichu {
border: 0;
}
section .item p {
width: 100%;
text-align: center;
font-size: 1.6rem;
font-weight: 900;
}
h2 {
line-height: 4rem;
font-size: 1.8rem;
border-bottom: 1px solid lightgray;
margin-top: 1.5rem;
}
.show {
line-height: 3.6rem;
font-size: 1.6rem;
}
input {
display: block;
width: 100%;
height: 3rem;
font-size: 1.2rem;
text-indent: 2.4rem;
}
#add {
height: 3rem;
line-height: 3rem;
font-size: 1.4rem;
color: white;
background-color: darkcyan;
text-align: center;
margin-top: 2rem;
}
#add:hover {
cursor: pointer;
}