IMG-LOGO
×

Tài Liệu Môn Học

Khoá học lập trình HTML/CSS

Nhập Môn HTML

[Video] Giới thiệu về lập trình web - HTML/CSS [Video] Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS [Video] Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS

Tìm Hiểu Thẻ HTML5

[Video] Formatting Text using Tags - html tags [Video] Creating Hyperlinks and Anchors (phần 1) - html tags [Video] Creating Hyperlinks and Anchors (phần 2) - html tags [Video] Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS [Video] Tìm hiểu về đường dẫn file (path file) trong HTML/CSS

CSS

[Video] Tìm hiểu thuộc tính trong thẻ html [Video] Giới thiệu CSS & Sử dụng các thuộc tính cơ bản [Video] Hướng dẫn tách biệt CSS và HTML [Video] Xử lý Event trong CSS (:hover, :active, :link, ...) - Lập trinh HTML/CSS

Table & CSS

[Video] Tìm hiểu table trong HTML/CSS - HTML/CSS

Form & CSS

[Video] Thiết kế form trong HTML/CSS/JS [Video] Tìm hiểu tag videos, audio trong HTML/CSS/JS [Video] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

Thiết Kế Layout

[Video] Tìm hiểu Frame qua ví dụ quản lý khách sạn HTML/CSS [Video] Hướng dẫn tạo layout bằng thẻ Div căn bản [Video] Hướng dẫn thiết kế layout bằng thẻ div nâng cao (Thiết kế giao diện web gokisoft)




Trang Chủ Học HTML5 - CSS3 HTML Unordered Lists - Danh sách không theo thứ tự trong HTML

HTML Unordered Lists - Danh sách không theo thứ tự trong HTML

by GokiSoft.Com - 18:07 24/05/2020 2,074 Lượt Xem



Thẻ <ul> trong HTML định nghĩa một danh sách không theo thứ tự(danh sách chấm).


Danh sách không theo thứ tự trong HTML


Một danh sách không theo thứ tự sẽ bắt đầu bằng thẻ  <ul> . Mỗi danh mục sẽ bắt đầu với thẻ  <li> .

Các danh mục sẽ được đánh dấu với các chấm đen nhỏ theo mặc định:

ví dụ

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>




Danh sách không theo thứ tự trong HTML - Chọn dấu danh mục


Thuộc tính CSS list-style-type được dùng để định nghĩa phong cách của dấu danh mục:

Giá trịMô tả
discĐặt các dấu danh mục thành một chấm đen (mặc định)
circleĐặt các dấu danh mục thành một hình tròn
squareĐặt các dấu danh mục thành một hình vuông
noneCác danh mục sẽ không được dánh dấu

ví dụ - disc

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Disc Bullets</h2>

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>


ví dụ - circle

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Circle Bullets</h2>

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>


ví dụ - square

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Square Bullets</h2>

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>


ví dụ - none

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List without Bullets</h2>

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>




Các danh sách HTML lồng nhau


Các danh sách có thể được lồng nhau (danh sách bên trong danh sách):

ví dụ

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>
<p>List can be nested (lists inside lists):</p>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>
<p>List can be nested (lists inside lists):</p>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

Ghi chú: Các danh mục có thể chứa các danh sách mới, và các thành phần HTML khác, như hình ảnh và đường dẫn, etc.





Danh sách nằm ngang với CSS


Các danh sách HTML có thể được tạo kiểu với rất nhiều cách khác nhau với CSS.

Một cách thông dụng là tạo kiểu một cho một danh sách theo chiều ngang, để tạo một menu định hướng:

ví dụ

<!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">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
<!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>

<h2>Navigation Menu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Ghi chú: Bạn có thể học thêm nhiều hơn về CSS trong hướng dẫn về CSS.





Tóm tắt chương


  • Sử dụng thành phần HTML <ul> để định nghĩa một danh sách không có thứ tự
  • Sử dụng thuộc tính CSS list-style-type để định nghĩa dấu của danh mục
  • Sử dụng thành phần HTML <li> định nghĩa một danh mục
  • Cách danh sách có thể lồng bên trong các danh sách
  • Các danh mục có thể chứa các thành phần HTML khác
  • Sử dụng thuộc tính CSS float:left hay display:inline để hiển thị một danh sách theo chiều ngang



Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!