Block list với image
Cũng là block list, nhưng lần này sẽ trang trí cho block list đẹp hơn chút kèm với image.
Danh sách khối (block list) với image
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;
zoom: 1; /* clearfix sử dụng cho <li> */
}
.blockList li:after { /* clearfix sử dụng cho <li> */
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
.blockList li p.image {
float: left;
width: 80px;
}
.blockList li div.block {
margin-left: 90px; /* đoạn margin này sẽ bằng chiều rộng image + 10px */
}
.blockList li a {
color: blue;
text-decoration: none;
}
.blockList li a:hover {
text-decoration: underline;
}
.blockList li div.block p {
text-align: justify;
}
</style>
</head>
<body>
<ul class="blockList">
<li>
<p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard_s.gif" alt="Học Web Chuẩn" /></p>
<div class="block">
<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.</p>
</div>
</li>
<li>
<p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard_s.gif" alt="Học Web Chuẩn" /></p>
<div class="block">
<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.</p>
</div>
</li>
<li>
<p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard_s.gif" alt="Học Web Chuẩn" /></p>
<div class="block">
<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.</p>
</div>
</li>
<li>
<p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard_s.gif" alt="Học Web Chuẩn" /></p>
<div class="block">
<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.</p>
</div>
</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Danh sách dạng khối với image nằm bên phả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; }
.blockList {
border-top: 1px dotted #ccc;
padding-top: 10px;
}
.blockList li {
border-bottom: 1px dotted #ccc;
margin-bottom: 10px;
padding-bottom: 10px;
zoom: 1; /* clearfix sử dụng cho <li> */
}
.blockList li:after { /* clearfix sử dụng cho <li> */
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
.blockList li p.image {
float: right;
width: 80px;
}
.blockList li div.block {
margin-right: 90px; /* đoạn margin này sẽ bằng chiều rộng image + 10px */
}
.blockList li a {
color: blue;
text-decoration: none;
}
.blockList li a:hover {
text-decoration: underline;
}
.blockList li div.block p {
text-align: justify;
}
</style>
</head>
<body>
<ul class="blockList">
<li>
<p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard_s.gif" alt="Học Web Chuẩn" /></p>
<div class="block">
<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.</p>
</div>
</li>
<li>
<p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard_s.gif" alt="Học Web Chuẩn" /></p>
<div class="block">
<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.</p>
</div>
</li>
<li>
<p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard_s.gif" alt="Học Web Chuẩn" /></p>
<div class="block">
<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.</p>
</div>
</li>
<li>
<p class="image"><img src="https://hocwebchuan.com/images/chuyende/img_webstandard_s.gif" alt="Học Web Chuẩn" /></p>
<div class="block">
<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.</p>
</div>
</li>
</ul>
</body>
</html>