Block list dọc với border
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>