css的页面设计模板 |css 名片效果

/* 模板1：大背景色、中间内容区，展示单个大图 */
.container {
max-width: 1200px;
margin: 0 auto;
}
.background {
background-color: #f2f2f2;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.image {
background-image: url("example.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 800px;
width: 800px;
}
/* 模板2：卡片式布局，展示多个小图及描述 */
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.card {
width: 300px;
height: 400px;
margin-bottom: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.card-img {
height: 200px;
background-image: url("example.jpg");
background-repeat: no-repeat;
background-size: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.card-body {
padding: 10px;
}
/* 模板3：滑动轮播图 */
.carousel-container {
width: 800px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
border-radius: 10px;
}
.carousel-slide {
display: flex;
height: 100%;
transform: translateX(0%);
transition: transform 0.5s ease-in-out;
}
.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-navigation {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
width: 100%;
z-index: 99999;
}
.carousel-arrow {
height: 40px;
padding: 10px;
background-color: #555;
color: #fff;
font-size: 20px;
cursor: pointer;
border-radius: 50%;
margin: 0 10px;
}

以上是三种常见的CSS页面设计模板。当然，还有许多其他模板可以在网页设计过程中使用。无论您使用哪种模板，都要确保它符合您网站的主题和目标受众的需求。