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(http://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.

Download file để thực hành

border-radius cho từng mục link full

Sử dụng border-radiusdisplay: 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(http://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ả.

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *