Người Viết : ViKiMi Editor
Tạo Navigation Menu or Hiển thị Danh Sách thông tin dùng HTML Danh Sách / HTML Lists
Khi bạn sử dụng một Danh Sách để nhóm tập hợp liên quan, nó cho phép bạn đưa ra các thông tin hữu ích tới người dùng. Việc sử dụng Danh Sách giúp có thể tạo ra các thiết kế thông tin ngắn gọn hiệu quả. Điều này được hầu hết các nhà thiết kế mang lại nhằm hướng người dùng đến một ảnh hưởng mong muốn. Đó là hiệu quả khi sử dụng Danh Sách.
HTML Lists / Danh sách HTML được vận dụng nhiều cách :
+ Đưa ra tập hợp thông tin hướng người dùng
+ Tạo các Menu thông tin ngắn gọn cho Trang nội dung của Website
+ Tạo Menu điều hướng cho các Website , etc.
HTML Lists chia làm 3 loại :
+ Unordered HTML List / Danh sách HTML không có thứ tự
+ Ordered HTML List / Danh sách HTML có thứ tự
+ HTML Description Lists / Danh sách mô tả HTML
Cả 3 loại Danh Sách này có tác dụng khá tương đồng.
1 ] Unordered HTML List / Danh sách HTML không có thứ tự
Unordered HTML List sẽ bắt đầu bằng thẻ <ul>
Mỗi mục của danh sách sẽ bắt đầu bằng thẻ <li>
EXAMPLE 1 ::
<!DOCTYPE html>
<html>
<body>
<h2> DANH SÁCH HTML – Danh sách không có thứ tự </h2>
<ul>
<li>Ô tô mới </li>
<li>Ô tô cũ </li>
<li>Ô tô sử dụng 2 năm </li>
</ul>
</body>
</html>
Hình Ảnh :
Theo Mặc định : Các mục trong danh sách sẽ được đánh dấu bằng dấu đầu dòng (vòng tròn nhỏ màu đen)
Để có thể Chọn đánh dấu mục danh sách chúng ta sử dụng thuộc tính CSS list-style-type . Bảng giá trị có sử dụng như sau :
+ disc Đặt điểm đánh dấu mục danh sách là dấu đầu dòng (mặc định)
+ circle Đặt điểm đánh dấu mục danh sách là vòng tròn
+ square Đặt điểm đánh dấu mục danh sách là hình vuông
+ none Các mục trong danh sách sẽ không được đánh dấu
Hình Ảnh :
EXAMPLE 2 ::
<ul>
<li> Coffee </li>
<li> Tea
<ul>
<li> Black tea </li>
<li> Green tea </li>
</ul>
</li>
<li> Milk </li>
</ul>
TẠO MỘT NAVIGATION MENU SỬ DỤNG HTML LISTS
Chúng ta có thể dễ dàng sử dụng CSS để tạo kiểu cho Danh Sách HTML. Điều này giúp chúng ta có thể tạo ra một Menu Điều Hướng đơn giản nhất và áp dụng nó tại các vị trí cần thiết. Thật hữu ích khi có thể dùng các Menu đơn giản trên Website, đặc biệt khi nó có thể hiển thị trên các thiết bị khác nhau.
+ Chúng ta có thể xem đây là cách tạo một Danh Sách HTML theo chiều ngang cũng được.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Trang Chủ</a></li>
<li><a href="#cars">Ô Tô</a></li>
<li><a href="#motos">Xe Máy</a></li>
<li><a href="#contact">Liên Hệ</a></li>
</ul>
</body>
</html>
Như vậy, Cách sử dụng Danh Sách HTML tương đối đơn giản và dễ nắm bắt. Bạn hoàn toàn có thể làm chủ cách sử dụng nó. Và nếu bạn muốn tạo ra các sản phẩm tốt hơn thì hoàn toàn có thể chọn cách tạo sản phẩm có thể hiển thị trên mọi thiết bị. Những phần còn lại của Danh Sách HTML sẽ được nói rõ ở phần sau. Danh sáCH HTML được áp dụng rất nhiều.
