Block list dọc với border

Trở về

  • 4,479

Không có gì khác biệt sơ với block list dọc, chỉ đơn giản là thêm cách xử lý border.

Danh sách khối (block list) với image có border

Danh sách khối với float, có sử dụng border cho 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ể */
div.wrapper { width: 620px; border: 1px dashed red; }
.blockList {
    list-style: none; /* bỏ style cho danh sách */
    zoom: 1; /* clearfix sử dụng cho <ul> */
    margin: 0 -10px -10px 0;
}
.blockList li {
    border: 1px solid #ccc;
    float: left;
    margin: 0 10px 10px 0;
    padding: 1px;
    width: 196px;
    zoom: 1; /* clearfix sử dụng cho <li> */
}
.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(https://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="https://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="https://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="https://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

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.