Làm thế nào để - Lời chứng thực
Tìm hiểu cách tạo lời chứng thực đáp ứng bằng CSS.
Lời chứng thực thường được sử dụng để cho mọi người biết người khác nghĩ gì về bạn hoặc sản phẩm của bạn.
Chris Fox. Giám đốc điều hành tại Trường học hùng mạnh.
John Doe đã cứu chúng tôi khỏi thảm họa web.
Rebecca Flex. Giám đốc điều hành tại Công ty.
Không ai tốt hơn John Doe.
Julia Roberts. Diễn viên nam.
Đơn giản là yêu Johnny Boy.
Cách tạo kiểu cho lời chứng thực
Bước 1) Thêm HTML:
Thí dụ
<div class="container">
<img src="bandmember.jpg" alt="Avatar"
style="width:90px">
<p><span>Chris Fox.</span> CEO at Mighty
Schools.</p>
<p>John Doe saved us from a web disaster.</p>
</div>
<div
class="container">
<img src="avatar_g2.jpg" alt="Avatar"
style="width:90px">
<p><span >Rebecca Flex.</span> CEO at
Company.</p>
<p>No one is better than John Doe.</p>
</div>
Bước 2) Thêm CSS:
Thí dụ
/* Style the container with a rounded border, grey background and some padding
and margin */
.container {
border: 2px solid #ccc;
background-color: #eee;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
}
/* Clear
floats after containers */
.container::after {
content: "";
clear: both;
display: table;
}
/* Float images
inside the container to the left. Add a right margin, and style the image as a
circle */
.container img {
float: left;
margin-right: 20px;
border-radius: 50%;
}
/*
Increase the font-size of a span element */
.container span {
font-size: 20px;
margin-right: 15px;
}
/* Add media queries for responsiveness. This
will center both the text and the image inside the container */
@media
(max-width: 500px) {
.container {
text-align: center;
}
.container img {
margin: auto;
float: none;
display: block;
}
}