Mục lục:
Video: Học HTML cơ bản bài 21: Web Form: Radio box, Checkbox & Textarea 2025
Sử dụng CSS3 để tạo ra một phác thảo tài liệu rất hữu ích khi một trang chứa rất nhiều tài liệu và bạn muốn người dùng điều hướng nó một cách dễ dàng. Đề cương dựa vào các thẻ khác nhau mà bạn cung cấp. Phương pháp hiện tại để tạo một phác thảo tài liệu là sử dụng thẻ
thông qua.
Cách tiếp cận này hoạt động tuyệt vời khi tài liệu xuất phát từ cùng một trang hoặc bạn có quyền kiểm soát việc định dạng nội dung. Nó không hoạt động khá tốt khi nội dung đến từ vị trí khác, đó là lý do tại sao các nhóm tiêu chuẩn phải đưa ra một cách hoàn toàn mới để làm việc.
Thủ tục sau minh họa một kỹ thuật để thêm phác thảo một trang đã có một menu. Bạn sử dụng Danh mục chính làm điểm khởi đầu.
-
Mở Điều hướng. HTML và thêm mã sau vào cuối phần (sau trình đơn hiện tại).
- Tiêu đề chính 1
- Tiêu đề phụ 1
- Tiêu đề phụ 2
- Tiêu đề chính 2
- Tiêu đề phụ 3
- Phân nhóm 4
Nhóm chính 1
Tài liệu giới thiệu
Phân nhóm 1
Điều
Tiểu mục 2
Điều
Tiêu đề chính 2
Tài liệu giới thiệu > Tiểu đề 3
Điều
Tiểu mục 4
Điều
Các mục này bao gồm một phác thảo tài liệu và nội dung liên quan. Phác thảo cụ thể sau các đối tượng
và
trong ví dụ này. Có các phương pháp tạo ra loại nội dung này tự động, nhưng tất cả đều yêu cầu mã hóa.
Lưu tệp HTML.
- Tiêu đề chính 1
-
Mở Điều hướng. CSS và nhập các kiểu sau vào cuối tệp.
-
#DocOutline {font-family: Arial, Helvetica, sans-serif; kích thước phông chữ: 14px; chiều rộng: 145px; chiều cao: 800px;} #DocOutline ul {margin-bottom: 20px; danh sách-phong cách: không có; margin-left: -40px;} #DocOutline ul ul {margin-left: -20px;} #DocContent {margin-top: -800px; margin-left: 150px;}
Trọng tâm chính là trên phác thảo tài liệu, nơi bạn cần cung cấp liên kết định dạng cho nội dung tìm thấy ở phần còn lại của trang. Lưu ý rằng phác thảo được đặt ở một độ cao cụ thể. Lý do của thiết lập này là làm cho vị trí nội dung của tài liệu trở nên dễ dàng hơn khi các liên kết được hiển thị.
Ví dụ đặt thuộc tính #DocOutline ul style-style vào none. Bạn chỉ có thể dễ dàng sử dụng số, chữ cái, hoặc bất kỳ chỉ mục phác thảo khác mà bạn thích.
Danh sách này sẽ tự động thụt lề một nửa khoảng cách của các phần tử menu mà bạn đã tạo ra trước đó. Để đặt liên kết ở phía bên trái của trang, bạn phải đảo ngược danh sách của indentation bằng cách thiết lập margin-left là -40px, chiều rộng này là một nửa chiều rộng 80px của các phần tử menu riêng lẻ.
Mỗi cấp sẽ yêu cầu thêm một số lượng thụt lề để người dùng có thể thấy được mức độ tương đối của mỗi mục nhập. #DocOutline ul ul thay đổi phần thụt đầu dòng cho tiêu đề cấp hai. Nếu bạn có tiêu đề thứ ba, bạn sẽ tạo một kiểu #DocOutline ul ul ul để định dạng nó.
Nội dung tài liệu sẽ bắt đầu sau khi phác thảo tài liệu trừ khi một trong hai điều xảy ra. Trước tiên, bạn có thể sử dụng các cột thực tế. Tuy nhiên, chức năng này yêu cầu CSS3. Thứ hai, bạn có thể sử dụng các cột giả. Bạn đặt giá trị thuộc tính margin-top bằng chiều cao của phác thảo tài liệu.
Kỹ thuật được trình bày trong ví dụ này sẽ làm việc với bất kỳ trình duyệt nào hỗ trợ CSS. Lưu ý rằng bạn cũng phải đặt lề trái sang một giá trị bằng chiều rộng của phác thảo tài liệu (cộng với một vài điểm ảnh cho khoảng trắng).
Lưu tệp CSS.
-
Tải lại ví dụ Điều hướng.
-
Bạn thấy phác thảo tài liệu và nội dung liên quan Phác thảo này thực sự hoạt động - bạn có thể nhấp vào liên kết để đi đến các tiêu đề khác nhau được trình bày trong phác thảo
