Thiết Kế Trang FAQ

Linh Nguyễn

Trong bài học này chúng ta sẽ tìm hiểu cách tạo một trang FAQ (Frequent Asked Questions) chứa danh sách các câu hỏi thường được hỏi và kèm theo đó là câu trả lời.

Giống với các bài học trước thì bước đầu tiên chúng ta sẽ làm là tạo một tập tin mới lấy tên là faq.html và có nội dung được sao chép nội dung từ tập tin layout.html.

Tiêu Đề Trang

Thay đổi tiêu đề trang thành như sau:

...
<head>
    <!-- page title -->
    <title>FAQ - Câu Hỏi Thường Gặp</title>
    ...

Đồng thời ở đoạn mã HTML tạo menu chúng ta cũng thêm một thẻ <li> nữa như sau:

...
    <li>
        <a href="./contact.html" title="Liên Hệ">Liên Hệ</a>
    </li>
    <li class="active">
        <a href="./faq.html" title="FAQ">FAQ</a>
    </li>
</ul>
...

Khi thêm thẻ <li> vào menu <ul> như trên thì bạn cũng cần lưu ý rằng chỉ đặt CSS class active cho phần tử li trong tập tin faq.html và xoá đi ở các tập tin HTML khác.

Lưu lại thay đổi và mở tập tin trong trình duyệt để kiểm tra lại:

Hiển thị tiêu đề trang giới thiệu website

Thêm HTML cho Nội Dung Trang

Bạn cập nhật mã HTML bên trong thẻ <div class="container" id="main-content"> với nội dung như sau:

<div class="container" id="main-content">
    <h1>FAQ - Câu Hỏi Thường Gặp</h1>

    <div class="item-wrapper">
        <div class="question">
            Nếu như có câu hỏi hoặc không hài lòng về dịch vụ chúng tôi có thể khiếu nại với bộ phần nào?
        </div>
        <div class="answer">
            Nếu quý khách không hài lòng về dịch vụ cung cấp bởi công ty chúng tôi quý khách có thể liên hệ bộ phần Chăm Sóc Khách Hàng chúng tôi luôn sẵn lòng hỗ trợ mọi thắc mắc hoặc phàn nàn về dịch vụ.
        </div>
    </div>
</div>

Ở trên ngoài thẻ <h1> để tạo đề mục thì bạn cần lưu ý tói cấu trúc HTML của phần tử div.item-wrapper. Phần tử div.item-wrapper đóng vai trò như một phần tử bao bọc cho nội dung bên trong bao gồm một phần tử div.question chứa nội câu câu hỏi và một phần tử div.answer chứa nội dung câu trả lời.

Như vậy mỗi một phần tử div.item-wrapper chúng ta có một câu hỏi kèm với một trả lời. Với mã HTML như trên thì chúng ta mới chỉ có một câu hỏi và một câu trả lời.

Thêm Mã CSS

Bây giờ chúng ta sẽ thêm mã CSS để trang trí phần hiển thị của câu hỏi và câu trả lời mới thêm ở trên. Trong tập tin main.css bạn thêm vào đoạn mã CSS sau ngay phía trước dòng comment dành cho Foooter:

...

/* faq */
.item-wrapper {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.question {
    background-color: #f5f5f5;
    padding: 10px 15px;
}
.answer {
    padding: 15px;
}

/* sticky footer */
...

Ở đoạn mã CSS trên chúng ta thiết lập đường viền cho phần tử div.item-wrapper sử dụng thuộc tính border đòng thời bó góc tròn cho phần tử này sử dụng thuốc tính border-radius. Ngoài ra, thì bạn cũng chú ý ở đoạn code trên chúng ta thiết lập màu nền cho phần tử div.question sử dụng background-color.

Tải lại trang fqa.html bạn sẽ thấy trình duyệt hiển thị kết quả như sau:

Trang FAQ sau khi đã áp dụng CSS

Bổ Sung Câu Hỏi và Trả Lời

Thông thường các trang FAQ sẽ có nhiều hơn một câu hỏi và trả lời. Trước khi kết thúc bài học này thì bạn thêm vào ngay sau thẻ đóng </div> ứng với thẻ <div class="item-wrapper"> đoạn code sau:

...
        <div class="item-wrapper">
            <div class="question">
                Thời gian nhận được trả lời cho thắc mắc hoặc khiếu nại về dịch vụ là bao lâu?
            </div>
            <div class="answer">
                Sau khi tiếp nhận thắc mắc hoặc khiếu nại của quý khách chúng tôi sẽ thực hiện việc xử lý yêu cầu trong vòng tối đa 24h.
            </div>
        </div>
        <div class="item-wrapper">
            <div class="question">
                Khách hàng có nhận được hoá đơn khi mua dịch vụ của chúng tôi?
            </div>
            <div class="answer">
                Có, tất cả các khách hàng đều nhận được hoá đơn giá trị gia tăng cho các dịch vụ cung cấp bới công ty chúng tôi.
            </div>
        </div>
        <div class="item-wrapper">
            <div class="question">
                Sau khi đặt mua dịch vụ thì quy trình thanh toán sẽ như thế nào?
            </div>
            <div class="answer">
                Sau khi quý khách hàng đặt mua dịch vụ qua điện thoại, email hoặc thông qua bất kỳ một hình thức giao dịch hợp lệ nào khác thì quý khách hàng có thể thanh toán qua dịch vụ Internet Banking, thẻ ATM hoặc thanh toán tại văn phòng chúng tôi.
            </div>
        </div>
...

Tải lại trang để kiểm tra lại, bạn sẽ thấy trình duyệt hiển thị kết quả như sau:

Thêm Phản Hồi