List đơn giản

Trở về

  • 4,110

Thể hiện danh sách đơn giản theo các tag

  • ,

Danh sách (list) đơn giản

Danh sách (list) đơn giản, những danh sách thường dùng cơ bản nhất.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<ul>
<li>Item list 01</li>
<li>Item list 02</li>
<li>Item list 03</li>
<li>Item list 04</li>
<li>Item list 05</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

 

Download file để thực hành

Danh sách (list) đơn giản với border-bottom.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
ul.itemList li {
    border-bottom: 1px dotted #333;
    margin-bottom: 5px;
    padding-bottom: 5px;
}
</style>
</head>
<body>
<ul class="itemList">
<li>Item list 01</li>
<li>Item list 02</li>
<li>Item list 03</li>
<li>Item list 04</li>
<li>Item list 05</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

 

Danh sách (list) đơn giản với border-bottomborder-top.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
ul.itemList {
    border-top: 1px dotted #333;
    padding-top: 5px;
}
ul.itemList li {
    border-bottom: 1px dotted #333;
    margin-bottom: 5px;
    padding-bottom: 5px;
}
</style>
</head>
<body>
<ul class="itemList">
<li>Item list 01</li>
<li>Item list 02</li>
<li>Item list 03</li>
<li>Item list 04</li>
<li>Item list 05</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

 

Danh sách (list) đơn giản – loại bỏ border-top bằng margin giá trị âm.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
ul.itemList {
    margin-top: -1px;
}
ul.itemList li {
    border-top: 1px dotted #333;
    padding: 5px 0;
}
</style>
</head>
<body>
<ul class="itemList">
<li>Item list 01</li>
<li>Item list 02</li>
<li>Item list 03</li>
<li>Item list 04</li>
<li>Item list 05</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

 

Sử dụng margin giá trị âm ít khi có tác dụng khi dùng kèm với các thuộc tính tạo khoảng cách, do đó hạn chế sử dụng, thông thường chúng ta sẽ sử dụng class cho <li> để phục hồi.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
ul.itemList li {
    border-bottom: 1px dotted #333;
    margin-bottom: 5px;
    padding-bottom: 5px;
}
ul.itemList li.lastList {
    border: none;
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<ul class="itemList">
<li>Item list 01</li>
<li>Item list 02</li>
<li>Item list 03</li>
<li>Item list 04</li>
<li class="lastList">Item list 05</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.