List nhiều cấp và border radius

Trở về

  • 1,321

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(https://hocwebchuan.com/images/chuyende/ico_square.gif) no-repeat left center;
    padding-left: 10px;
}
ul.itemList li ul li {
    background: url(https://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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.