如何 - 推荐
学习如何使用 CSS 创建响应式推荐内容。
推荐内容通常用于让人们了解其他人对您或您的产品有什么看法。
Chris Fox. Mighty Schools 的 CEO。
John Doe 救了我们，避免了网站灾难。
Rebecca Flex. 公司 CEO。
没有人比 John Doe 更出色。
Julia Roberts. 演员。
非常喜欢 Johnny Boy。
如何设置推荐内容的样式
步骤 1) 添加 HTML
示例
<div class="container">
<img src="bandmember.jpg" alt="头像" style="width:90px">
<p><span>Chris Fox.</span> Mighty Schools 的 CEO.</p>
<p>John Doe 救了我们，避免了网站灾难.</p>
</div>
<div class="container">
<img src="avatar_g2.jpg" alt="头像" style="width:90px">
<p><span >Rebecca Flex.</span> 公司 CEO.</p>
<p>没有人比 John Doe 更出色.</p>
</div>
步骤 2) 添加 CSS
示例
/* 使用圆角边框、灰色背景和一些填充和边距设置容器样式 */
.container {
border: 2px solid #ccc;
background-color: #eee;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
}
/* 在容器后清除浮动 */
.container::after {
content: "";
clear: both;
display: table;
}
/* 将容器内的图像浮动到左侧。添加一个右边距，并将图像设置为圆形 */
.container img {
float: left;
margin-right: 20px;
border-radius: 50%;
}
/* 增加 span 元素的字号 */
.container span {
font-size: 20px;
margin-right: 15px;
}
/* 添加媒体查询以实现响应式。这将使容器内的文本和图像居中 */
@media (max-width: 500px) {
.container {
text-align: center;
}
.container img {
margin: auto;
float: none;
display: block;
}
}
尝试一下 »
