List với link
Thể hiện một list liên kết, chúng ta có thể tùy biến icon hay khu vực liên kết cho các item trong danh sách.
Danh sách (list) với link
Sử dụng background để tạo icon cho liên kết <a href="#"> trong 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_arrow12.gif) no-repeat left center;
margin-bottom: 5px;
padding-left: 10px;
}
ul.itemList li a {
color: blue;
text-decoration: underline;
}
ul.itemList li a:hover {
text-decoration: none;
}
</style>
</head>
<body>
<ul class="itemList">
<li><a href="http://hocwebchuan.com">Item list 01</a></li>
<li><a href="http://hocwebchuan.com">Item list 02</a></li>
<li><a href="http://hocwebchuan.com">Item list 03</a></li>
<li><a href="http://hocwebchuan.com">Item list 04</a></li>
<li><a href="http://hocwebchuan.com">Item list 05</a></li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Tạo danh sách liên kết <a href="#"> 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 {
border-top: 1px dashed #333;
padding-top: 3px;
}
ul.itemList li {
background: url(https://hocwebchuan.com/images/chuyende/ico_arrow12.gif) no-repeat 0 7px;
border-bottom: 1px dashed #333;
margin-bottom: 3px;
padding: 0 0 5px 10px;
}
ul.itemList li a {
color: blue;
text-decoration: underline;
}
ul.itemList li a:hover {
text-decoration: none;
}
</style>
</head>
<body>
<ul class="itemList">
<li><a href="http://hocwebchuan.com">Item list 01</a></li>
<li><a href="http://hocwebchuan.com">Item list 02</a></li>
<li><a href="http://hocwebchuan.com">Item list 03</a></li>
<li><a href="http://hocwebchuan.com">Item list 04</a></li>
<li><a href="http://hocwebchuan.com">Item list 05</a></li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Danh sách có vùng liên kết <a href="#"> full.
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 a {
background-color: #eee;
border-bottom: 1px dashed #333;
display: block;
padding: 5px 0 5px 10px;
text-decoration: underline;
}
/* Cần cho IE6
Thiết lập chiều rộng cụ thể cho danh sách, vd 660px, khi này chiều rộng sẽ được trừ đi tổng padding-left và padding-right 30px*/
* html ul.itemList li a {
width: 630px;
}
ul.itemList li a:hover {
background-color: #ff6;
text-decoration: none;
}
</style>
</head>
<body>
<ul class="itemList">
<li><a href="http://hocwebchuan.com">Item list 01</a></li>
<li><a href="http://hocwebchuan.com">Item list 02</a></li>
<li><a href="http://hocwebchuan.com">Item list 03</a></li>
<li><a href="http://hocwebchuan.com">Item list 04</a></li>
<li><a href="http://hocwebchuan.com">Item list 05</a></li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Danh sách có vùng liên kết <a href="#"> full và icon phía trước.
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 a {
background: #eee url(https://hocwebchuan.com/images/chuyende/ico_arrow12.gif) no-repeat 5px 11px;
border-bottom: 1px dashed #333;
display: block;
padding: 5px 0 5px 15px;
text-decoration: underline;
}
/* Cần cho IE6
Thiết lập chiều rộng cụ thể cho danh sách, vd 660px, khi này chiều rộng sẽ được trừ đi tổng padding-left và padding-right 30px*/
* html ul.itemList li a {
width: 630px;
}
ul.itemList li a:hover {
background-color: #ff6;
text-decoration: none;
}
</style>
</head>
<body>
<ul class="itemList">
<li><a href="http://hocwebchuan.com">Item list 01</a></li>
<li><a href="http://hocwebchuan.com">Item list 02</a></li>
<li><a href="http://hocwebchuan.com">Item list 03</a></li>
<li><a href="http://hocwebchuan.com">Item list 04</a></li>
<li><a href="http://hocwebchuan.com">Item list 05</a></li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Danh sách có vùng liên kết <a href="#"> full và icon phía 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 {
border-top: 1px dashed #333;
}
ul.itemList li a {
background: #eee url(https://hocwebchuan.com/images/chuyende/ico_arrow10.gif) no-repeat 98% center;
border-bottom: 1px dashed #333;
display: block;
padding: 5px 0 5px 15px;
text-decoration: underline;
}
/* Cần cho IE6
Thiết lập chiều rộng cụ thể cho danh sách, vd 660px, khi này chiều rộng sẽ được trừ đi tổng padding-left và padding-right 30px*/
* html ul.itemList li a {
width: 630px;
}
ul.itemList li a:hover {
background-color: #ff6;
text-decoration: none;
}
</style>
</head>
<body>
<ul class="itemList">
<li><a href="http://hocwebchuan.com">Item list 01</a></li>
<li><a href="http://hocwebchuan.com">Item list 02</a></li>
<li><a href="http://hocwebchuan.com">Item list 03</a></li>
<li><a href="http://hocwebchuan.com">Item list 04</a></li>
<li><a href="http://hocwebchuan.com">Item list 05</a></li>
</ul>
</body>
</html>