List nhiều cấp và border radius

List với sub list dùng border radius, dạng này không khác nhiều hơn được đề cập ở phần trước, nhưng sẽ hướng dẫn xử lý với border raidus.

Trình duyệt – hệ điều hành hỗ trợ

Yêu cầu phiên bản với mức tối thiểu được hỗ trợ:

Trình duyệt

  • Internet Explorer9
  • Firefox4
  • Opera10.5
  • Google Chrome5
  • Safari5.1

Hệ điều hành Smartphone – Tablets

  • IOS3.2
  • Android2.1
  • Window phone7.5

border-radius cho danh sách con

Sử dụng border-radius cho từng mục trong danh sách có danh sách con.

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 {
    padding-top: 5px;
}
ul.itemList > li {
    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;
    margin-bottom: 5px;
}
ul.itemList li a {
    color: blue;
    text-decoration: underline;
}
ul.itemList li a:hover {
    text-decoration: none;
}
ul.itemList li p {
    background: url(http://hocwebchuan.com/images/chuyende/ico_square.gif) no-repeat left center;
    padding-left: 10px;
}
ul.itemList li ul li {
    background: url(http://hocwebchuan.com/images/chuyende/ico_sublist.gif) no-repeat left center;
    border-bottom: none;
    margin-left: 10px;
    padding: 0 0 0 10px;
}
</style>
</head>
<body>
<ul class="itemList">
<li>
    <p><a href="http://hocwebchuan.com">Item list 01</a></p>
    <ul>
        <li><a href="http://hocwebchuan.com">Item list sub 0101</a></li>
        <li><a href="http://hocwebchuan.com">Item list sub 0102</a></li>
        <li><a href="http://hocwebchuan.com">Item list sub 0103</a></li>
        <li><a href="http://hocwebchuan.com">Item list sub 0104</a></li>
    </ul>
</li>

<li>
    <p><a href="http://hocwebchuan.com">Item list 02</a></p>
</li>

<li>
    <p><a href="http://hocwebchuan.com">Item list 03</a></p>
</li>

<li>
    <p><a href="http://hocwebchuan.com">Item list 04</a></p>
    <ul>
        <li><a href="http://hocwebchuan.com">Item list sub 0401</a></li>
        <li><a href="http://hocwebchuan.com">Item list sub 0402</a></li>
        <li><a href="http://hocwebchuan.com">Item list sub 0403</a></li>
    </ul>
</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

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 *