三农网站口碑墙,需要用到section标签 div标签 css背景渐变 圆角边框 盒子模型完整代码
时间: 2024-09-25 21:06:46 浏览: 104
在创建一个三农网站的口碑墙,我们通常会利用HTML、CSS和可能的JavaScript来构建这个功能。下面是一个简单的示例,展示了如何使用<section>标签、<div>标签以及CSS来创建一个带圆角边框、背景渐变的效果,并利用盒子模型布局:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.section {
background: linear-gradient(to right, #f5f5f5, #e0e0e0);
padding: 20px;
border-radius: 10px;
box-sizing: border-box; /* 使用border-box确保边框包括内边距和外边距 */
}
.wall-items {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.item {
width: calc(33.33% - 20px); /* 假设一栏有三个项目,每个宽度相等 */
margin-right: 20px;
padding: 15px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* 可选样式,用于显示评论者头像和文字 */
.avatar {
float: left;
width: 50px;
height: 50px;
border-radius: 50%;
}
.comment-text {
margin-left: 60px;
}
</style>
</head>
<body>
<section class="section" id="reputation-wall">
<h2>口碑墙</h2>
<div class="wall-items">
<div class="item">
<img class="avatar" src="avatar1.jpg" alt="用户1头像">
<p class="comment-text">用户1评价:...</p>
</div>
<!-- 添加更多项目 -->
<div class="item">
<img class="avatar" src="avatar2.jpg" alt="用户2头像">
<p class="comment-text">用户2评价:...</p>
</div>
</div>
</section>
</body>
</html>
```
阅读全文