List với border radius
Với mỗi thành phần list, chúng ta sử dụng border radius, đây là một trong những dạng cơ bản.
border-radius cho từng mục trong danh sách
Sử dụng border-radius cho từng mục 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 { list-style: none; /* loại bỏ list syle cho danh sách */}
ul.itemList li {
margin: 3px 0;
border: 2px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
padding: 5px 10px;
}
ul.itemList li a {
background: url(https://hocwebchuan.com/images/chuyende/ico_arrow12.gif) no-repeat 0 7px;
color: blue;
padding-left: 10px;
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:
Nếu bỏ qua các trình duyệt cũ (IE6,7,8), chúng ta sử dụng css3 sẽ hiệu quả hơn rất nhiều.
border-radius cho từng mục link full
Sử dụng border-radius và display: block dành cho tag a ta sẽ có được full link.
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 li {
margin: 3px 0;
}
ul.itemList li a {
background: url(https://hocwebchuan.com/images/chuyende/ico_arrow12.gif) no-repeat 10px center;
color: blue;
display: block;
border: 2px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
padding: 3px 10px 5px 20px;
text-decoration: none;
}
ul.itemList li a:hover {
border: 2px solid #f00;
}
</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:
Di chuyển chuột vào danh sách để thấy kết quả.