List đơn giản
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:
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-bottom và border-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>