14. Tạo HTML danh sách bài viết đơn giản


1. Giao diện HTML danh sách bài viết sẽ làm

Đây là cách hiển thị chuẩn mà các bạn sẽ gặp trên hầu hết các trang web hiện nay. 


Chúng ta sẽ cần một thẻ div#list_post để bao quanh toàn bộ bài viết lại. Với mỗi bài viết thì chúng ta cũng cần tạo thêm một thẻ div.post. Mình sử dụng class thì vì chúng ta có nhiều bài viết và chúng có chung một kiểu style CSS. Lúc này cấu trúc cơ bản của phần này sẽ như sau:

1
2
3
4
5
6
7
8
9
10
11
<div id="list_post">
    <div class="post">
        POST 1
    </div>
    <div class="post">
        POST 2
    </div>
    <div class="post">
        POST ..
    </div>
</div>

Mỗi bài viết chúng ta lại chia thành 2 phần. Thứ nhất là hình ảnh đại diện cho bài viết, nó sẽ nằm phía bên trái. Thứ 2 là nội dung sẽ nằm phía bên phải. Mình sẽ tạo 2 thẻ div như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div id="list_post">
    <div class="post">
        <div class="thumb">
            <img src="URL HÌNH 1" alt=""/>
        </div>
        <div class="infor">
            <h3><a href="URL BÀI VIẾT 1">Tiêu đề 1</a></h3>
            <p>
                Nội dung mô tả 1
            </p>
        </div>
    </div>
    <div class="post">
        <div class="thumb">
            <img src="URL HÌNH 2" alt=""/>
        </div>
        <div class="infor">
            <h3><a href="URL BÀI VIẾT 1">Tiêu đề 2</a></h3>
            <p>
                Nội dung mô tả 2
            </p>
        </div>
    </div>
    <div class="post">
        <div class="thumb">
            <img src="URL HÌNH .." alt=""/>
        </div>
        <div class="infor">
            <h3><a href="URL BÀI VIẾT ..">Tiêu đề ..</a></h3>
            <p>
                Nội dung mô tả ..
            </p>
        </div>
    </div>
</div>



Chạy lên chúng ta sẽ có giao diện như sau:

2. Dùng CSS để xây dựng giao diện danh sách bài viết

Bước 1: Mình sẽ giới hạn chiều rộng của thẻ div#list_post khoảng 600px nhé các bạn, đồng thời cho thêm một chút đường viền để dễ dàng nhận biết. Ta cũng nên canh giữa cho nó bằng cách sử dụng CSS margin: 0px auto.

1
2
3
4
5
#list_post{
    border: solid 1px #ddd;
    width: 600px;
    margin: 0px auto;
}


Bước 2: Mình cũng tạo đường viền cho mỗi bài viết bằng cách style cho div.post. Sử dụng thêm thuộc tính margin để tăng khoảng cách giữa bài viết và đường biên bên ngoài.

1
2
3
4
.post{
    border: solid 1px #ddd;
    margin: 10px 20px;
}


Bước 3: Mình sẽ bổ sung link hình ảnh cho 3 bài viết.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div id="list_post">
    <div class="post">
        <div class="thumb">
            <img src="/upload/tut_series/images/2015/12/14/39/html-can-ban.jpg" alt=""/>
        </div>
        <div class="infor">
            <h3><a href="URL BÀI VIẾT 1">Tiêu đề 1</a></h3>
            <p>
                Nội dung mô tả 1
            </p>
        </div>
    </div>
    <div class="post">
        <div class="thumb">
            <img src="/upload/tut_series/images/2015/12/14/39/html-can-ban.jpg" alt=""/>
        </div>
        <div class="infor">
            <h3><a href="URL BÀI VIẾT 1">Tiêu đề 2</a></h3>
            <p>
                Nội dung mô tả 2
            </p>
        </div>
    </div>
    <div class="post">
        <div class="thumb">
            <img src="/upload/tut_series/images/2015/12/14/39/html-can-ban.jpg" alt=""/>
        </div>
        <div class="infor">
            <h3><a href="URL BÀI VIẾT ..">Tiêu đề ..</a></h3>
            <p>
                Nội dung mô tả ..
            </p>
        </div>
    </div>
</div>

Bước 4: Bây giờ ta sẽ style cho phần hình ảnh. Mình sẽ dùng float để treo nó về góc trái, sau đó thiết lập chiều rộng cho nó khoảng 200px. Đối với hình ảnh thì mình sẽ thiết lập max-width là 200px (tức là 100%).

1
2
3
4
5
6
7
8
.post .thumb{
    float:left;
    width: 200px;
}
.post .thumb img{
    max-width: 100%;
    display: inherit;
}



Kết quả giao diện bị vỡ. Lý do là ta sử dụng float:left cho phần hình ảnh (float left treo ở góc trái), nên khoảng không sẽ phụ thuộc vào phần content. Để khắc phục vấn đề này thì bạn chỉ cần thêm thuộc tính overflow:hidden vào .post là được.

1
2
3
4
5
.post{
    border: solid 1px #ddd;
    margin: 10px 20px;<img alt="editor html id 1629" src="https://freetuts.net/editor.html?id=1629" style="display: inherit; margin: 0px auto; border: 1px solid rgb(221, 221, 221);">
    overflow: hidden;
}

 

Bước 5: Thay đổi nội dung cho phần tiêu đề bài viết.

Mình sẽ cho margin bên trái tầm 220px để giữa hình ảnh và tiêu đề có khoảng trống, và thay đổi font chữ, màu chữ cho phần tiêu đề.

1
2
3
4
5
6
7
8
9
10
11
12
.post .infor{
    margin-left: 220px;
}
.post .infor h3{
    margin: 15px 0px 20px 0px;
}
.post .infor h3 a{
    font-size: 18px;
    text-decoration: none;
    color: blue;
    text-transform: uppercase;
}




Nhận xét