Block list cơ bản
Danh sách được thể hiện dưới dạng block các thành phần có nhiều nội dung.
Danh sách dạng khối (block list)
Danh sách dạng khối được sử dụng nội dung từng khối (block) đặt bên trong từng mục <li> của danh sách.
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 {
border-top: 1px dotted #ccc;
padding-top: 10px;
}
.blockList li {
border-bottom: 1px dotted #ccc;
margin-bottom: 10px;
padding-bottom: 10px;
}
.blockList li p {
text-align: justify;
}
</style>
</head>
<body>
<ul class="blockList">
<li>
<h3>Tiêu đề 01</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, có thể sử dụng nhiều tag p để tạo nhiều đoạn nội dung khác nhau.</p>
</li>
<li>
<h3>Tiêu đề 02</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, có thể sử dụng nhiều tag p để tạo nhiều đoạn nội dung khác nhau.</p>
</li>
<li>
<h3>Tiêu đề 03</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, có thể sử dụng nhiều tag p để tạo nhiều đoạn nội dung khác nhau.</p>
</li>
<li>
<h3>Tiêu đề 04</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, có thể sử dụng nhiều tag p để tạo nhiều đoạn nội dung khác nhau.</p>
</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Sử dụng tag <a> để tạo liên kết cho tiêu đề.
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 {
border-top: 1px dotted #ccc;
padding-top: 10px;
}
.blockList li {
border-bottom: 1px dotted #ccc;
margin-bottom: 10px;
padding-bottom: 10px;
}
.blockList li a {
color: blue;
text-decoration: none;
}
.blockList li a:hover {
text-decoration: underline;
}
.blockList li p {
text-align: justify;
}
</style>
</head>
<body>
<ul class="blockList">
<li>
<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, có thể sử dụng nhiều tag p để tạo nhiều đoạn nội dung khác nhau.</p>
</li>
<li>
<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, có thể sử dụng nhiều tag p để tạo nhiều đoạn nội dung khác nhau.</p>
</li>
<li>
<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, có thể sử dụng nhiều tag p để tạo nhiều đoạn nội dung khác nhau.</p>
</li>
<li>
<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, có thể sử dụng nhiều tag p để tạo nhiều đoạn nội dung khác nhau.</p>
</li>
</ul>
</body>
</html>