List với icon

Trở về

  • 3,243

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:

 

Download file để thực hành

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-colorborder-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-colorborder-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>

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.