Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Thẻ Giới Thiệu Dịch Vụ

Tạo Thẻ Giới Thiệu Dịch Vụ


Ngày 13 Tháng 2 Năm 2020

Tạo Thẻ Giới Thiệu Dịch Vụ

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu cách xây dựng một thẻ giới thiệu dịch vụ giúp các bạn có thể ôn lại và thực hành một số kiến thức HTML, CSS mà mình đã học. Để hiểu rõ hơn các bạn cùng mình tìm hiểu nhé!

Thẻ Dịch Vụ

Đi vào bước thứ nhất các bạn tạo một thư mục có cấu trúc file như sau nhé:

Cấu trúc Thư Mục Thẻ Người Dùng

Sau khi đã tạo xong cấu trúc thư mục thì bước tiếp theo là các bạn tải một tập tin mà mình đã chứa sẵn các file đã được nén để ở đường dẫn bên dưới giúp chúng ta có thể thực hiện thẻ người dùng mà không mất công phải xây dựng lại từ đầu.
Tải File The_nguoi_dung

Bây giờ mình sẽ tạo cấu trúc file HTML, thêm các thẻ HTML cần thiết cho trang_chinh.html sau đó liên kết nó với file style.css, Font Awesome và Google Font. Các bạn lưu ý là đường dẫn style.css lúc nào cũng nằm dưới cùng trong thẻ <head> trong một trang HTML bởi vì khi ta chỉnh sửa CSS thì nó sẽ không bị ảnh hưởng bởi các file CSS khác. Để nắm rõ hơn các bạn theo dõ đoạn code dưới đây nhé:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Dich Vu</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Sau khi thiết lập xong các liên kết thì tiếp theo chúng ta sẽ thêm các thẻ HTML trong phần <body> của trang_chinh.html để giúp các bạn dễ hình dung hơn về cái sườn và cấu trúc của trang. Mình có một lưu ý nhỏ là nếu các bạn không thích đánh văn bản thì tham khảo trang Lipsum để tự động tạo các đoạn văn. Và để hiểu rõ hơn các bạn xem đoạn code dưới đây nhé :

<div class="the_nguoi_dung">
        <div class="dich_vu">
            <div class="so">01</div>
            <div class="noi_dung">
                <h2><i class="fa fa-magic" aria-hidden="true"></i> Thiết kế website chuyên nghiệp</h2>
                <p>Đội ngũ thiết kế giàu kinh nghiệm, mang đến bản thiết kế giao diện web chuyên nghiệp, sáng tạo, với thiết kế phẳng theo phong cách mới. Thiết kế web UI & UX giúp website của bạn tạo ra những trải nghiệm và tương tác tốt với khách hàng.
                </p>
                <a href="#">Tìm Hiểu <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
            </div>
        </div>
        <div class="dich_vu">
            <div class="so">02</div>
            <div class="noi_dung">
                <h2><i class="fa fa-mobile" aria-hidden="true"></i> Tương thích với thiết bị di động</h2>
                <p>Công nghệ thiết kế web responsive sẽ giúp giao diện web chạy trên mọi thiết bị di động. Mobile Friendly website xu hướng phát triển web trên toàn thế giới, đây là tiêu chí đánh giá của Googe giúp website cải thiện tốt hơn trên Google rank.
                </p>
                <a href="#">Tìm Hiểu <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
            </div>
        </div>
        <div class="dich_vu">
            <div class="so">03</div>
            <div class="noi_dung">
                <h2><i class="fa fa-cog" aria-hidden="true"></i> Tiêu chuẩn HTML - CSS - W3C</h2>
                <p>Ứng dụng các tiêu chuẩn W3C đem lại cho website của bạn chạy trơn tru với tất cả trình duyệt trên mọi thiết bị. Đồng thời, website của bạn sẽ thân thiện hơn với các Search Engine đặc biệt là google spider
                </p>
                <a href="#">Tìm Hiểu <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
            </div>
        </div>
    </div>

Chúng ta cùng xem kết quả trang HTMl nhé:

Cấu trúc thẻ cho HTML

Bước tiếp theo là chúng ta cần chỉnh sửa CSS cho từng loại thẻ HTML là body, <div class="the_nguoi_dung">, <div class="dich_vu">. Các bạn xem đoạn code dưới đây có gì mình sẽ giải thích thêm bên dưới nhé:

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Roboto', sans-serif;
    background: #E8CBC0;
    background: -webkit-linear-gradient(to right, #636FA4, #E8CBC0);
    background: linear-gradient(to right, #636FA4, #E8CBC0);
}
.the_nguoi_dung {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.the_nguoi_dung .dich_vu {
    position: relative;
    width: 400px;
    padding: 40px;
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin: 20px;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
}

Ở đây mình có một vài lưu ý ở đoạn code trên và sẽ được giải thích ở bảng dưới đây:

Thuộc TínhÝ Nghĩa
display: flex;
justify-content: center;
align-items: center;
Giúp chúng ta đưa thẻ <div class="the_nguoi_dung"> ra chính giữa trang HTML. Để nắm rõ hơn các bạn tham khảo ở đây Tham Khảo
flex-wrap: wrap;Nếu tổng chiều rộng của các flex item lớn hơn thẻ cha chứa nó thì sẽ tự động tách thành hai dòng. Để nắm rõ hơn các bạn tham khảo ở đây Tham Khảo
justify-content: space-between;Xác định khoảng cách nhau giữa các flex item trong dòng . Để nắm rõ hơn các bạn tham khảo ở đây Tham Khảo

Bây giờ chúng ta hãy cùng nhau xem kết quả của đoạn code trên nhé:

Thẻ Nội Dung Sơ Lược

Bây giờ chúng ta sẽ đi vào chỉnh CSS chi tiết cho từng thẻ con trong <div class="dich_vu">. Mình sẽ thiết lập độ rộng, độ cao, cỡ chữ, màu nền... cho thẻ <div class="so">. Lưu ý nhỏ là theo mình thấy nếu các bạn muốn tạo hình tròn cho một thẻ div nào đó thì ta nên xác định nó là hình vuông như ví dụ là width:80; height:80; và sau đó ta cho thuộc tính border-radius: 50%;. Để nắm rõ hơn các bạn xem đoạn code sau nhé:

.the_nguoi_dung .dich_vu .so {
    position: relative;
    width: 80px;
    height: 80px;
    color: #fff;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    border-radius: 50%;
    font-size: 40px;
    transition: 0.5s;
    text-align: center;
}

Và đây là kết quả của đoạn code trên:

Thẻ Nội Dung Sơ Lược 2

Để thêm sinh động hơn chúng ta sẽ thiết lập các màu cho từng dịch vụ riêng biệt bằng cách thiết lập màu nền cho các thẻ <div class="so"> và tạo một hiệu ứng nho nhỏ là khi người dùng hover chuột vào thẻ <div class="dich_vu"> thì ta sẽ cho màu nền của nó tương ứng với màu của <div class="so"> được chứa trong nó. Một lưu ý nhỏ nữa là mình sẽ gọi các thẻ con trong thẻ <div class="dich_vu"> bằng cách .dich_vu:nth-child(Vị Trí Thẻ Con Tương Ứng Trong Div Cha) Nghe hơi khó hiểu tí, các bạn xem code để rõ hơn nhé:

.the_nguoi_dung .dich_vu:nth-child(1) .so {
    box-shadow: 0 0 0 0 #e91e63;
    background: #e91e63
}
.the_nguoi_dung .dich_vu:nth-child(1):hover .so {
    box-shadow: 0 0 0 400px #e91e63;
}
.the_nguoi_dung .dich_vu:nth-child(2) .so {
    box-shadow: 0 0 0 0 #23e629;
    background: #23e629;
}
.the_nguoi_dung .dich_vu:nth-child(2):hover .so {
    box-shadow: 0 0 0 400px #23e629;
}
.the_nguoi_dung .dich_vu:nth-child(3) .so {
    box-shadow: 0 0 0 0 #2196f3;
    background: #2196f3;
}
.the_nguoi_dung .dich_vu:nth-child(3):hover .so {
    box-shadow: 0 0 0 400px #2196f3;
}

Và đây là kết quả của đoạn code trên:

Các bạn sẽ thấy nội dung đã bị ẩn đi khi hover vào thẻ dịch vụ nên chúng ta sẽ tiếp tục chỉnh CSS cho thẻ <div class="noi_dung"> bằng cách thiết lập thuộc tính z-index. Sau đó sẽ chỉnh một số thuộc tính CSS cơ bản cho các thẻ con của nó giúp nội dung được đẹp và sinh động hơn. Nào các bạn cùng mình xem đoạn code sau đây nhé:

.the_nguoi_dung .dich_vu .noi_dung {
    position: relative;
    z-index: 1;
    transition: 0.5s;
}
.the_nguoi_dung .dich_vu:hover .noi_dung {
    color: #fff;
}
.the_nguoi_dung .dich_vu .noi_dung h2 {
    margin: 10px 0;
    padding: 0;
}
.the_nguoi_dung .dich_vu p {
    margin: 0;
    padding: 0;
    line-height:24px;
}
a {
    display: inline-block;
    width:80%;
    padding: 10px 20px;
    background: #fff;
    border-radius: 20px;
    text-decoration: none;
    margin-top: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
}

Và đây là kết quả của đoạn code trên nhé:

Phần cuối cùng là mình sẽ thêm một màu nền làm cho thẻ chúng ta nhìn đẹp hơn. Cùng mình xem đoạn code để nắm rõ hơn nhé:

.the_nguoi_dung .dich_vu::before {
    content: '';
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.2);
    z-index: 2;
    pointer-events: none;
}

Và kết quả cuối cùng của thành qua hôm nay các bạn xem ở video dưới nhé:

Mình gửi các bạn đường dẫn để tải về những file trong thư mục The_dich_vu để bạn đễ hình dung và có thể xem lại!
Đường dẫn tải File Source Code

Các bạn có thể tìm hiểu thêm thông qua đường dẫn dưới đây nhé!
Đường dẫn để bạn tìm hiểu thêm

Tổng kết:

Qua đây mình giúp các bạn có thể làm sinh động cũng như sáng tạo hơn với trang web của mình và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!