Block list với image

Trở về

  • 1,596

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:

 

Download file để thực hành

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>

Hiển thị trình duyệt:

 

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.