Border radius với block list phần 2

Kỹ thuật cho các dạng này là chúng ta cứ việc layout block list như bình thường, sau đó chỉ cần add thêm thuộc tính border-radius cho thành phần bên ngoài là được.

border-radius cho danh sách khối sử dụng float phần 02

border-radius cho danh sách khối sử dụng float, kết hợp với bộ chọn vị trí :nth-child(3n), với cách sử dụng này chúng ta không cần đặt class để phục hồi margin-right cho thành phần cuối mỗi hàng.

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; }
/* cho tag bao ngoài có chiều rộng cụ thể */
.blockList {
    list-style: none; /* bỏ style cho danh sách */
    zoom: 1; /* clearfix sử dụng cho <ul> */
}
.blockList li {
    border: 1px solid #ccc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    float: left;
    margin: 0 10px 10px 0;
    padding: 4px;
    width: 196px;
    zoom: 1; /* clearfix sử dụng cho <li> */
}
.blockList li:nth-child(3n) {
    margin-right: 0;
}
.blockList:after { /* clearfix sử dụng cho <ul> */
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
.blockList li div {
    padding: 5px;
}
.blockList li a {
    background: url(http://hocwebchuan.com/images/chuyende/ico_arrow12.gif) no-repeat 0 center;
    padding-left: 10px;
    color: #b31c1c;
    text-decoration: none;
}
.blockList li a:hover {
    text-decoration: underline;
}
.blockList li p {
    text-align: justify;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="blockList">
<li>
    <p class="image"><img src="http://hocwebchuan.com/images/chuyende/img_hwc196x100.gif" alt="Học Web Chuẩn" /></p>
    <div>
        <h3><a href="http://hocwebchuan.com">Tiêu đề 01</a></h3>
        <p class="text">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="http://hocwebchuan.com/images/chuyende/img_hwc196x100.gif" alt="Học Web Chuẩn" /></p>
    <div>
        <h3><a href="http://hocwebchuan.com">Tiêu đề 02</a></h3>
        <p class="text">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="http://hocwebchuan.com/images/chuyende/img_hwc196x100.gif" alt="Học Web Chuẩn" /></p>
    <div>
        <h3><a href="http://hocwebchuan.com">Tiêu đề 03</a></h3>
        <p class="text">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>
</div>
</body>
</html>

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

 

Download file để thực hành

Sử dụng phần trăm (%) cho chiều rộng các mục.

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; }
/* cho tag bao ngoài có chiều rộng cụ thể */
.blockList {
    list-style: none; /* bỏ style cho danh sách */
    zoom: 1; /* clearfix sử dụng cho <ul> */
}
.blockList li {
    border: 1px solid #ccc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    float: left;
    margin: 0 10px 10px 0;
    padding: 4px;
    width: 30%;
    zoom: 1; /* clearfix sử dụng cho <li> */
}
.blockList li:nth-child(3n) {
    margin-right: 0;
}
.blockList:after { /* clearfix sử dụng cho <ul> */
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
.blockList li p.image {
    text-align: center;
}
.blockList li div {
    padding: 5px;
}
.blockList li a {
    background: url(http://hocwebchuan.com/images/chuyende/ico_arrow12.gif) no-repeat 0 center;
    padding-left: 10px;
    color: #b31c1c;
    text-decoration: none;
}
.blockList li a:hover {
    text-decoration: underline;
}
.blockList li div p {
    text-align: justify;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="blockList">
<li>
    <p class="image"><img src="http://hocwebchuan.com/images/chuyende/img_hwc196x100.gif" alt="Học Web Chuẩn" /></p>
    <div>
        <h3><a href="http://hocwebchuan.com">Tiêu đề 01</a></h3>
        <p class="text">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="http://hocwebchuan.com/images/chuyende/img_hwc196x100.gif" alt="Học Web Chuẩn" /></p>
    <div>
        <h3><a href="http://hocwebchuan.com">Tiêu đề 02</a></h3>
        <p class="text">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="http://hocwebchuan.com/images/chuyende/img_hwc196x100.gif" alt="Học Web Chuẩn" /></p>
    <div>
        <h3><a href="http://hocwebchuan.com">Tiêu đề 03</a></h3>
        <p class="text">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>
</div>
</body>
</html>

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

 

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 *