FAQ là gì ? Mục đích của FAQ ? Cách thức xây dựng nội dung câu hỏi thường gặp trên hệ thống web? What is FAQ?

FAQ hay FAQs viết đầy đủ là Frequently Asked Questions, tạm dịch ra tiếng Việt hiểu là: Các câu hỏi thường gặp ? 

hoặc Questions and Answers (Q&A) là các câu hỏi và trả lời thường theo cùng một chủ đề nhất định. 

FAQ tập hợp những câu hỏi phổ biến thường có xu hướng được hỏi đi hỏi lại.

FAQ (Câu hỏi thường gặp) có thể nằm bất kỳ vị trí nào trên trang, song thông thường nhất là đầu trang hoặc cuối trang. Tùy thuộc vào cách sử dụng, thuật ngữ này có thể đề cập cụ thể đến một câu hỏi thường gặp hoặc một danh sách nhiều câu hỏi và câu trả lời của họ.

ĐỆ QUY DANH MỤC

Trong lập trình, chúng ta hay gặp đi gặp lại 01 vài bài toán kinh điển.

01 trong những bài toán thường gặp trong lập trình web là tạo danh mục nhiều cấp bằng đệ quy.

Ví dụ:

trang web bán hàng thời trang online có 01 menu đa cấp.

Hoặc trang bán hàng có danh mục đa cấp chứa thông tin hàng hóa như sau:

thoitrang

-quan

--jeans

--legging

--congso

-ao

-vay

baiviet

giải thích: trang shop bán hàng có danh mục thời trang và bài viết.

trong danh mục thời trang -> chứa 03 danh mục: quần, áo, váy.

Trong danh mục quần -> chứa 03 danh mục: quần jeans, quần legging, quần công sở...

Ở đây mình tạo sẵn 01 cơ sở dữ liệu: shopping

Và tạo bảng categories có nội dung như sau:

Tự học CSS - Bài 34 - Website layout

Website Layout

01 trang web thường được chia thành các phần như: header, menus, phần chứa nội dung và footer.

Có rất nhiều kiểu thiết kế layout khác nhau. Nhưng nhìn chung, cấu trúc trang web như trên rất dễ gặp. Chúng ta hãy cùng xem xét kỹ cấu trúc này.

Header

01 header thường nằm ở đỉnh trang web (hoặc bên phải ngay dưới menu điều hướng top). Nó thường chứa 01 logo hoặc tên trang web.

Ví dụ:

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Navigation Bar

01 thanh điều hướng chứa danh sách các liên kết để giúp người dùng di chuyển xuyên suốt trang web.

Ví dụ:

/* The navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Links - change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Tự học CSS - Bài 33 - Định dạng số đếm thẻ TIÊU ĐỀ

 CSS counters là “các biến” được lưu giữ bởi CSS, trong đó các giá trị này có thể tăng lên bởi các qui tắc thiết lập của CSS (để lưu lại số lần chúng được dùng). Counters cho phép bạn tùy biến giao diện nội dung dựa vào những thay thế của nó trên văn bản.

Số tự động với counters

CSS counters giống như “các biến” vậy.

Giá trị biến có thể tăng bởi các qui tắc thiết lập trong CSS (chúng sẽ ghi lại bao nhiêu lần đã được dùng).

Để làm việc với CSS counters, chúng ta sẽ dùng các thuộc tính sau:

·         counter-reset – tạo hoặc resets lại 01 counter

·         counter-increment – tăng 01 giá trị counter

·         content – chèn nội dung phát sinh

Hàm counter() hoặc counters() – thêm giá trị của 01 counter vào 01 phần tử.

Để dùng 01 CSS counter, ban đầu ta phải tạo ra bằng counter-reset

Ví dụ sau tạo ra 01 counter cho trang (trong phần chọn qua body), sau đó tăng giá trị counter sau mỗi thẻ <h2> và thêm “Section <giá trị của counter>:” vào đầu mỗi thẻ <h2>

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Tự học CSS - Bài 32 - Định dạng biểu mẫu

Định dạng INPUT

Sử dụng thuộc tính width để khai báo bề ngang của input.

input {
  width: 100%;
}

Ví dụ trên áp dụng cho tất cả phần tử <input>. Nếu bạn chỉ muốn định dạng 01 input nhất định, bạn có thể dùng cách chọn qua thuộc tính.

input[type=text] – chỉ chọn text fields

input[type=password] – chỉ chọn các password fields

input[type=number] – chỉ chọn các number fields

và còn nhiều trường khác nữa.

Padded Inputs

Dùng thuộc tính padding để thêm khoảng trắng bên trong text field.

Mẹo: khi bạn có nhiều inputs xen kẽ nhau, bạn cũng sẽ muốn thêm vào margin để thêm khoảng cách giữa chúng.

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Chú ý rằng chúng ta thiết lập thuộc tính box-sizing cho border-box. Điều này đảm bảo rằng padding và ngay cả các đường viền được bao gồm trong kích thước tổng chiều cao và bề rộng của các phần tử.