Border radius với block list cơ bản

Trở về

  • 2,802

Dạng cơ bản khi sử dụng border-radius, việc bao ngoài thành phần block một border radius sẽ dễ hơn nếu xử lý bằng CSS3.

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 với danh sách khối

Sử dụng border-radius cho các mục của danh sách khối.

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;
}
img { vertical-align: bottom; }
.blockList li {
    border: 1px solid #ccc;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 5px;
    zoom: 1; /* clearfix sử dụng cho <li> */
}
.blockList li:after { /* clearfix sử dụng cho <li> */
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
.blockList li p.image {
    float: left;
    width: 80px;
}
.blockList li div.block {
    margin-left: 90px; /* đoạn margin này sẽ bằng chiều rộng image + 10px */
}
.blockList li a {
    color: blue;
    text-decoration: none;
}
.blockList li a:hover {
    text-decoration: underline;
}
.blockList li div.block p {
    text-align: justify;
}
</style>
</head>
<body>
<ul class="blockList">
<li>
    <p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard_s.gif" alt="Học Web Chuẩn" /></p>
    <div class="block">
        <h3><a href="http://hocwebchuan.com">Tiêu đề 01</a></h3>
        <p>Nội dung của block list, nội dung này sẽ xuống hàng khi gặp giới hạn chiều rộng của thẻ bao ngoài.</p>
    </div>
</li>

<li>
    <p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard_s.gif" alt="Học Web Chuẩn" /></p>
    <div class="block">
        <h3><a href="http://hocwebchuan.com">Tiêu đề 02</a></h3>
        <p>Nội dung của block list, nội dung này sẽ xuống hàng khi gặp giới hạn chiều rộng của thẻ bao ngoài.</p>
    </div>
</li>

<li>
    <p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard_s.gif" alt="Học Web Chuẩn" /></p>
    <div class="block">
        <h3><a href="http://hocwebchuan.com">Tiêu đề 03</a></h3>
        <p>Nội dung của block list, nội dung này sẽ xuống hàng khi gặp giới hạn chiều rộng của thẻ bao ngoài.</p>
    </div>
</li>

<li>
    <p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard_s.gif" alt="Học Web Chuẩn" /></p>
    <div class="block">
        <h3><a href="http://hocwebchuan.com">Tiêu đề 04</a></h3>
        <p>Nội dung của block list, nội dung này sẽ xuống hàng khi gặp giới hạn chiều rộng của thẻ bao ngoài.</p>
    </div>
</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

 

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.