List với icon
Thể hiện list với icon, chúng ta có thể dùng định dạng bằng list-style, ở đây sẽ giới thiệu tới chúng ta cách thể hiện icon list với background image.
Danh sách (list) với icon
Sử dụng background để tạo icon cho danh sách.
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 {
background: url(https://hocwebchuan.com/images/chuyende/ico_square.gif) no-repeat left center;
margin-bottom: 5px;
padding-left: 10px;
}
</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 với icon và 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 {
border-top: 1px dashed #333;
padding-top: 5px;
}
ul.itemList li {
background: url(https://hocwebchuan.com/images/chuyende/ico_square.gif) no-repeat 0 7px;
border-bottom: 1px dashed #333;
margin-bottom: 5px;
padding: 0 0 5px 10px;
}
</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 với background-color và 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 {
border-top: 1px dashed #333;
}
ul.itemList li {
background-color: #eee;
border-bottom: 1px dashed #333;
padding: 5px 0 5px 10px;
}
</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 với icon, background-color và 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 {
border-top: 1px dashed #333;
}
ul.itemList li {
background: #eee url(https://hocwebchuan.com/images/chuyende/ico_square.gif) no-repeat 5px 14px;
border-bottom: 1px dashed #333;
padding: 5px 0 5px 15px;
}
</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) 2 cấp
Danh sách 2 cấp với icon và 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 { list-style: none; /* loại bỏ list syle cho danh sách */}
ul.itemList {
border-top: 1px dotted #ccc;
padding-top: 5px;
}
ul.itemList li {
border-bottom: 1px dotted #ccc;
margin-bottom: 5px;
padding-bottom: 5px;
}
ul.itemList li p {
background: url(https://hocwebchuan.com/images/chuyende/ico_square.gif) no-repeat left center;
padding-left: 10px;
}
ul.itemList li ul li {
background: url(https://hocwebchuan.com/images/chuyende/ico_sublist.gif) no-repeat left center;
border-bottom: none;
margin-left: 10px;
padding: 0 0 0 10px;
}
</style>
</head>
<body>
<ul class="itemList">
<li>
<p>Item list 01</p>
<ul>
<li>Item list sub 0101</li>
<li>Item list sub 0102</li>
<li>Item list sub 0103</li>
<li>Item list sub 0104</li>
</ul>
</li>
<li>
<p>Item list 02</p>
</li>
<li>
<p>Item list 03</p>
</li>
<li>
<p>Item list 04</p>
<ul>
<li>Item list sub 0401</li>
<li>Item list sub 0402</li>
<li>Item list sub 0403</li>
</ul>
</li>
</ul>
</body>
</html>