Một nhóm list
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:
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>