Thiết kế web căn bản - HTML CSS JS | NenTang.vn |
Chương 2-Bài 13. Các thẻ (tag) tạo Danh sách (list) |
|
Tác giả: Dương Nguyễn Phú Cường | Ngày đăng: 2 năm trước |
Danh sách CÓ THỨ TỰ (Ordered List)Sử dụng thẻ<ol></ol> , mỗi phần tử là một cặp thẻ <li></li>
Ví dụ:<h3>Danh sách có thứ tự - Sắp xếp 1 2 3</h3> <ol type="1"> <li>Phần tử thứ 1</li> <li>Phần tử thứ 2</li> <li>Phần tử thứ 3</li> </ol> <h3>Danh sách có thứ tự - Sắp xếp A B C</h3> <ol type="A"> <li>Phần tử thứ 1</li> <li>Phần tử thứ 2</li> <li>Phần tử thứ 3</li> </ol> <h3>Danh sách có thứ tự - Sắp xếp La mã</h3> <ol type="I"> <li>Phần tử thứ 1</li> <li>Phần tử thứ 2</li> <li>Phần tử thứ 3</li> </ol> Danh sách KHÔNG THỨ TỰ (Unordered List)Sử dụng thẻ<ul></ul> , mỗi phần tử là một cặp thẻ <li></li>
Ví dụ:<h3>Danh sách không thứ tự - Dạng Square</h3> <ul type="square"> <li>Phần tử thứ 1</li> <li>Phần tử thứ 2</li> <li>Phần tử thứ 3</li> </ul> <h3>Danh sách không thứ tự - Dạng Disc</h3> <ul type="disc"> <li>Phần tử thứ 1</li> <li>Phần tử thứ 2</li> <li>Phần tử thứ 3</li> </ul> <h3>Danh sách không thứ tự - Dạng Circle</h3> <ul type="circle"> <li>Phần tử thứ 1</li> <li>Phần tử thứ 2</li> <li>Phần tử thứ 3</li> </ul> Danh sách TỰ ĐỊNH NGHĨA (Defined List)Sử dụng thẻ<dl></dl> , mỗi phần tử là 2 cặp thẻ <dt></dt><dd></dd>
Ví dụ:
<dl> <dt>Hello</dt> <dd>Xin chào ...</dd> <dt>Goodbye</dt> <dd>Tạm biệt...</dd> </dl> Bài tập 1: tạo danh sách lồng vào nhau như sau:<ul> <li>Trang chủ</li> <li>Giới thiệu <ul> <li>Lịch sử phát triển</li> <li>Hệ thống chi nhánh</li> <li>Hình thức thanh toán</li> </ul> </li> <li>Liên hệ</li> <li>Góp ý</li> <li>Danh sách sản phẩm</li> <li>Giỏ hàng</li> <li>Đăng nhập</li> <li>Đăng ký</li> </ul> Bài tập 2:<ol> <li><strong>Quá trình hình thành</strong> <ul type="square"> <li>Từ tháng 01/2012 đến 03/2012: Quá trình hoàn thiện hệ thống cửa hàng</li> <li>Tháng 03/2012: Chính thức khai trương website NenTang.vn</li> </ul> </li> <li><strong>Đội ngũ nhân sự</strong> <ul type="square"> <li>Phòng kiểm soát nội bộ</li> <li>Khối tài chính</li> <li>Khối hành chính nhân sự</li> </ul> </li> </ol> |
Sản phẩm của Nền tảng | NenTang.vn |