Files
ClassContent/历届学生/front-end-team/项目练习/学生项目/陆旗/橱窗/index.css
2024-09-27 02:06:13 +08:00

98 lines
1.3 KiB
CSS

body{
display: flex;
flex-direction: column;
height: 100vh;
}
.header{
position: fixed;
display: flex;
width: 100%;
justify-content: space-between;
padding: 0 0.37rem;
box-sizing: border-box;
align-items: center;
top: 0.29rem;
z-index: 999;
}
.header img {
width: 0.42rem;
height: 0.42rem;
}
.header ul{
display: flex;
}
.header ul .active::after{
content: "";
width: 0.35rem;
height: 0.02rem;
background-color: #ffffff;
border-radius: 0.01rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -0.1rem;
}
.header ul li{
font-size: 0.3rem;
color: #fefefe;
position: relative;
}
.header ul li:nth-last-child(2){
margin: 0 0.24rem;
}
.content{
height: 100%;
flex: 1;
background-color: #000000;
}
.footer{
height: 1rem;
background-color: #000000;
display: flex;
align-items: center;
justify-content:space-around ;
}
.footer li{
font-size: 0.24rem;
color: #ffffff;
position: relative;
}
.footer .active{
font-size: 0.3rem;
}
.footer .active::after{
content: "";
width: 0.51rem;
height: 0.03rem;
background-color: #ffffff;
border-radius: 0.015rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -0.24rem;
}