Cách tạo: Trang "Giới thiệu đội ngũ"

Học cách sử dụng CSS để tạo trang "Giới thiệu đội ngũ" tương ứng.

Trang hoặc phần "Giới thiệu đội ngũ" thường được sử dụng để liệt kê các nhà tuyển dụng trong công ty và cung cấp thông tin liên hệ cụ thể:

Bill
Bill Gates

CEO & Founder

Một đoạn văn miêu tả tôi lorem ipsum ipsum lorem.

example@example.com

Mike
Elon Musk

Trưởng phòng nghệ thuật

Một đoạn văn miêu tả tôi lorem ipsum ipsum lorem.

example@example.com

John
Steve Jobs

Thiết kế

Một đoạn văn miêu tả tôi lorem ipsum ipsum lorem.

example@example.com

Thử ngay

Cách tạo trang "Giới thiệu đội ngũ"

Bước 1 - Thêm HTML:

<div class="row">
  <div class="column">
    <div class="card">
      <img src="img1.jpg" alt="Jane" style="width:100%">
      <div class="container">
        <h2>Bill Gates</h2>
        <p class="title">CEO & Founder</p>
        <p>Một đoạn văn miêu tả tôi lorem ipsum ipsum lorem.</p>
        <p>example@example.com</p>
        <p><button class="button">Liên hệ</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="img2.jpg" alt="Mike" style="width:100%">
      <div class="container">
        <h2>Elon Musk</h2>
        <p class="title">Chỉ đạo nghệ thuật</p>
        <p>Một đoạn văn miêu tả tôi lorem ipsum ipsum lorem.</p>
        <p>example@example.com</p>
        <p><button class="button">Liên hệ</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="img3.jpg" alt="John" style="width:100%">
      <div class="container">
        <h2>Steve Jobs</h2>
        <p class="title">Thiết kế</p>
        <p>Một đoạn văn miêu tả tôi lorem ipsum ipsum lorem.</p>
        <p>example@example.com</p>
        <p><button class="button">Liên hệ</button></p>
      </div>
    </div>
  </div>
</div>

Bước 2 - Thêm CSS:

/* 并排的三列 */
.column {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
{}
/* 在小屏幕上，将列上下显示而不是并排显示 */
@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  {}
{}
/* 添加一些阴影以创建卡片效果 */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
{}
/* 容器内的一些左右内边距 */
.container {
  padding: 0 16px;
{}
/* 清除浮动 */
.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
{}
.title {
  color: grey;
{}
.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
{}
.button:hover {
  background-color: #555;
{}

Thử ngay