Block list theo hàng dọc
Block list với thiết kế dọc, thiết kế này dành nhiều cho trưng bày sản phẩm hoặc các banner giới thiệu.
Danh sách khối (block list) với cột dọc
Danh sách khối với float, với cách sử dụng "margin âm" ta không cần sử dụng class để phục hồi khoảng cách cho <li>, tuy nhiên cách sử dụng này không sử dụng được khi chiều cao bên trái nhiều hơn chiều cao nội dung bên phải, cách này tất cả các trình duyệt chạy như nhau, ta hãy xem thử cách này:
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 {
float: left;
margin: 0 10px 10px 0;
width: 200px;
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 p.image {
border: 1px solid #ccc;
padding:1px;
}
.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>
<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>
</li>
<li>
<p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_hwc196x100.gif" alt="Học Web Chuẩn" /></p>
<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>
</li>
<li>
<p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_hwc196x100.gif" alt="Học Web Chuẩn" /></p>
<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>
</li>
</ul>
</div>
</body>
</html>
Hiển thị trình duyệt:
Sử dụng border giữa các block, bằng cách sử dụng thêm class cho block cuối để có thể chạy được các trình duyệt, kể cả IE6, khi này ta không cần margin âm cho <ul> nữa mà chỉ cần phục hồi margin cho <li> cuố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; }
/* cho tag bao ngoài có chiều rộng cụ thể */
div.wrapper {
width: 642px; /* (200width x 3) + (10padding x 2 + (10margin x 2) + 2border */
border: 1px dashed red;
}
.blockList {
list-style: none; /* bỏ style cho danh sách */
zoom: 1; /* clearfix sử dụng cho <ul> */
margin: 0 0 -10px 0;
}
.blockList li {
border-right: 1px solid #ccc;
float: left;
margin: 0 10px 10px 0;
padding-right: 10px;
width: 200px;
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.last {
border: none;
margin-right: 0;
padding-right: 0;
}
.blockList li p.image {
border: 1px solid #ccc;
padding:1px;
}
.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>
<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>
</li>
<li>
<p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_hwc196x100.gif" alt="Học Web Chuẩn" /></p>
<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>
</li>
<li class="last">
<p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_hwc196x100.gif" alt="Học Web Chuẩn" /></p>
<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>
</li>
</ul>
</div>
</body>
</html>