Một nhóm list

Trở về

  • 2,557

Một nhóm list được dùng trong footer, được dùng để liên kêt nhanh đến nội dung liên quan.

Danh sách (list) với background icon

Danh sách với background icon, danh sách này thường được sử dụng cho menu link list, dùng trên header hoặc footer.

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 {
    display: inline;
    margin-right: 10px;
}
ul.itemList li a {
    background: url(https://hocwebchuan.com/images/chuyende/ico_arrow09.gif) no-repeat left center;
    color: #333;
    text-decoration: underline;
    padding-left: 10px;
}
ul.itemList li a:hover {
    text-decoration: none;
}
</style>
</head>
<body>
<ul class="itemList">
<li><a href="http://hocwebchuan.com">PC</a></li>
<li><a href="http://hocwebchuan.com">Laptop</a></li>
<li><a href="http://hocwebchuan.com">Điện thoại di động</a></li>
<li><a href="http://hocwebchuan.com">Máy tính bảng</a></li>
<li><a href="http://hocwebchuan.com">Phụ kiện</a></li>
<li><a href="http://hocwebchuan.com">Máy đã dùng</a></li>
</ul>
</body>
</html>

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

 

Download file để thực hành

Tạo thêm nhiều danh sách với dạng này, ta có thể điều chỉnh lại như sau:

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 {
    display: inline;
    margin-right: 10px;
}
ul.itemList li a {
    background: url(https://hocwebchuan.com/images/chuyende/ico_arrow09.gif) no-repeat left center;
    color: #333;
    text-decoration: underline;
    padding-left: 10px;
}
ul.itemList li a:hover {
    text-decoration: none;
}
</style>
</head>
<body>
<ul class="itemList">
<li><a href="http://hocwebchuan.com">PC</a></li>
<li><a href="http://hocwebchuan.com">Laptop</a></li>
<li><a href="http://hocwebchuan.com">Điện thoại di động</a></li>
<li><a href="http://hocwebchuan.com">Máy tính bảng</a></li>
<li><a href="http://hocwebchuan.com">Phụ kiện</a></li>
<li><a href="http://hocwebchuan.com">Máy đã dùng</a></li>
</ul>

<ul class="itemList">
<li><a href="http://hocwebchuan.com">Sản phẩm mới</a></li>
<li><a href="http://hocwebchuan.com">Tin tức</a></li>
<li><a href="http://hocwebchuan.com">Sự kiện</a></li>
<li><a href="http://hocwebchuan.com">Khuyến mãi</a></li>
<li><a href="http://hocwebchuan.com">Tư vấn</a></li>
<li><a href="http://hocwebchuan.com">Dịch vụ</a></li>
</ul>

<ul class="itemList">
<li><a href="http://hocwebchuan.com">Giới thiệu</a></li>
<li><a href="http://hocwebchuan.com">Liên hệ</a></li>
<li><a href="http://hocwebchuan.com">Sitemap</a></li>
<li><a href="http://hocwebchuan.com">Điều khoảng sử dụng</a></li>
<li><a href="http://hocwebchuan.com">Bản quyền</a></li>
</ul>
</body>
</html>

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

 

Sử dụng text-align: right để tạo thêm dạng danh sách nằm bên phả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 {
    text-align: right;
}
ul.itemList li {
    display: inline;
    margin-right: 10px;
}
ul.itemList li a {
    background: url(https://hocwebchuan.com/images/chuyende/ico_arrow09.gif) no-repeat left center;
    color: #333;
    text-decoration: underline;
    padding-left: 10px;
}
ul.itemList li a:hover {
    text-decoration: none;
}
</style>
</head>
<body>
<ul class="itemList">
<li><a href="http://hocwebchuan.com">PC</a></li>
<li><a href="http://hocwebchuan.com">Laptop</a></li>
<li><a href="http://hocwebchuan.com">Điện thoại di động</a></li>
<li><a href="http://hocwebchuan.com">Máy tính bảng</a></li>
<li><a href="http://hocwebchuan.com">Phụ kiện</a></li>
<li><a href="http://hocwebchuan.com">Máy đã dùng</a></li>
</ul>

<ul class="itemList">
<li><a href="http://hocwebchuan.com">Sản phẩm mới</a></li>
<li><a href="http://hocwebchuan.com">Tin tức</a></li>
<li><a href="http://hocwebchuan.com">Sự kiện</a></li>
<li><a href="http://hocwebchuan.com">Khuyến mãi</a></li>
<li><a href="http://hocwebchuan.com">Tư vấn</a></li>
<li><a href="http://hocwebchuan.com">Dịch vụ</a></li>
</ul>

<ul class="itemList">
<li><a href="http://hocwebchuan.com">Giới thiệu</a></li>
<li><a href="http://hocwebchuan.com">Liên hệ</a></li>
<li><a href="http://hocwebchuan.com">Sitemap</a></li>
<li><a href="http://hocwebchuan.com">Điều khoảng sử dụng</a></li>
<li><a href="http://hocwebchuan.com">Bản quyền</a></li>
</ul>
</body>
</html>

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

 

text-align: center

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 {
    text-align: center;
}
ul.itemList li {
    display: inline;
    margin-right: 10px;
}
ul.itemList li a {
    background: url(https://hocwebchuan.com/images/chuyende/ico_arrow09.gif) no-repeat left center;
    color: #333;
    text-decoration: underline;
    padding-left: 10px;
}
ul.itemList li a:hover {
    text-decoration: none;
}
</style>
</head>
<body>
<ul class="itemList">
<li><a href="http://hocwebchuan.com">PC</a></li>
<li><a href="http://hocwebchuan.com">Laptop</a></li>
<li><a href="http://hocwebchuan.com">Điện thoại di động</a></li>
<li><a href="http://hocwebchuan.com">Máy tính bảng</a></li>
<li><a href="http://hocwebchuan.com">Phụ kiện</a></li>
<li><a href="http://hocwebchuan.com">Máy đã dùng</a></li>
</ul>

<ul class="itemList">
<li><a href="http://hocwebchuan.com">Sản phẩm mới</a></li>
<li><a href="http://hocwebchuan.com">Tin tức</a></li>
<li><a href="http://hocwebchuan.com">Sự kiện</a></li>
<li><a href="http://hocwebchuan.com">Khuyến mãi</a></li>
<li><a href="http://hocwebchuan.com">Tư vấn</a></li>
<li><a href="http://hocwebchuan.com">Dịch vụ</a></li>
</ul>

<ul class="itemList">
<li><a href="http://hocwebchuan.com">Giới thiệu</a></li>
<li><a href="http://hocwebchuan.com">Liên hệ</a></li>
<li><a href="http://hocwebchuan.com">Sitemap</a></li>
<li><a href="http://hocwebchuan.com">Điều khoảng sử dụng</a></li>
<li><a href="http://hocwebchuan.com">Bản quyền</a></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.