最近我在学习Web开发，决定尝试以仿制小米官网的形式来熟悉CSS的使用方法。在这个过程中，我掌握了不少关于页面布局和样式设计的技巧。

.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
padding: 0 25px;
}
.nav {
display: flex;
align-items: center;
}
.nav-list {
display: flex;
}
.nav-item {
margin-left: 20px;
font-size: 16px;
}
.carousel {
width: 100%;
height: 460px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.carousel-item {
width: 100%;
height: 100%;
position: absolute;
display: none;
}
.item-active {
display: block;
}
.carousel-indicators {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.indicator {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #eee;
margin-right: 10px;
cursor: pointer;
}
.indicator-active {
background-color: #FF6700;
border-color: #FF6700;
}
.main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px 40px;
}
.card {
width: calc(33.3% - 20px);
margin-bottom: 30px;
}
.card-img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-title {
margin-top: 10px;
font-size: 16px;
}
.card-desc {
margin-top: 5px;
font-size: 14px;
color: #999;
}
.cta-btn {
display: inline-block;
margin-top: 15px;
padding: 8px 30px;
background-color: #FF6700;
border-radius: 20px;
color: #fff;
text-decoration: none;
font-size: 14px;
}

总体而言，通过仿制小米官网，我掌握了一些常用的CSS布局和样式设计方法，这对于我今后的Web开发之路将有不小的帮助。