* {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
}
#top, #main, #bottom {
width: 100%;
}
#top {
position: fixed; /* 固定位置 */
top: 0;
left: 0;
right: 0;
height: 2rem;
z-index: 1000;
background-color: #f5f5f5;
}
#logo {
width: 4rem;
height: 1rem;
vertical-align: -webkit-baseline-middle; /* 垂直居中 */
}
#main {
height: auto; /* 高度设置为自动 */
position: absolute;
top: 2rem;
border: 2rem;
background-color: #f5f5f5;
}
#main ul {
display: flex;
/* 主轴方向为纵轴 */
flex-direction: column;
/* 两端对齐 */
justify-content: space-between;
font-size: 0.5rem;
}
.shopCar {
width: 1rem;
height: 1rem;
vertical-align: -webkit-baseline-middle;
}
.logo {
width: 3.6rem;
height: 2rem;
vertical-align: -webkit-baseline-middle;
}
#main ul li {
flex: 1 1 3rem;
display: flex;
border-bottom: 1px solid black;
align-items: center;
}
#main ul li div {
margin-left: 0.2rem;
margin-right: 0.5rem;
}
#bottom {
position: fixed; /* 固定位置 */
bottom: 0;
left: 0;
right: 0;
height: 2rem;
z-index: 1000;
background-color: #f5f5f5;
display: flex;
}
#bottom div {
flex: 1 1 auto;
text-align: center;
}
#bottom div img {
width: 1.5rem;
width: 1.5rem;
vertical-align: -webkit-baseline-middle;
}