Tạo giao diện danh sách bài viết website bằng Html Css

Hiển thị danh sách bài viết hàng ngang

Danh sách bài viết, sản phẩm là một phần không thể thiếu trong website. Nhận được khá nhiều lời yêu cầu nhờ làm video hướng dẫn nên tôi dành thời gian ghi hình video hướng dẫn cho bạn chi tiết.

Video này tôi chủ yếu code và show kết quả, để giúp bạn rút ngắn thời gian xem video. Nếu có khó khăn gì cứ comment trong video hoặc dưới phần bình luận của video này nhé.

Cấu trúc file
index.html
style.css
images
|–pic-1.jpg
|–pic-2.jpg

——-

Bước 1: Tạo file index.html và copy nội dung bên dưới

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hiển thị danh sách bài viết bằng html css</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div id="wapper">
        <h1>Tạo danh sách bài viết bằng html css</h1>
        <ul class="list-post">
            <li>
                <a href="" class="post-thumb">
                    <img src="images/pic-1.jpg" alt="">
                </a>
                <div class="more-info">
                    <a href="" class="post-title">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum, in.
                    </a>
                    <p class="post-excerpt">
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque est facilis fuga excepturi aut cupiditate repellendus dolor itaque nihil neque?
                    </p>
                </div>
            </li>
            <li>
                <a href="" class="post-thumb">
                    <img src="images/pic-2.jpg" alt="">
                </a>
                <div class="more-info">
                    <a href="" class="post-title">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum, in.
                    </a>
                    <p class="post-excerpt">
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque est facilis fuga excepturi aut cupiditate repellendus dolor itaque nihil neque?
                    </p>
                </div>
            </li>
        </ul>
    </div>

</body>

</html>

Bước 2: Tạo file style.css và copy code css bên dưới

* {
    margin: 0px;
    padding: 0px;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background: #eb3b5a;
    line-height: 1.2;
}
#wapper {
    max-width: 600px;
    background-color: #fff;
    margin: 30px auto;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
h1 {
    padding: 20px 0px;
    text-align: center;
}
ul.list-post li {
    display: flex
}
ul.ist-post li .post-thumb {
    flex: 0 0 30%;
    padding-right: 15px;
}
ul.list-post li .post-thumb img {
    max-width: 100%;
}
ul.list-post .post-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    display: block;
    padding-bottom: 10px;
    transition: color 0.3s;
}
ul.list-post li {
    margin-bottom: 20px;
}
ul.list-post li:hover .post-title {
    color: #971928;
}
ul.list-post .post-excerpt {
    color: #5b5b5b;
}

Trong quá trình xem hướng dẫn và làm bài này, nếu bạn có bất kỳ khó khăn gì đừng ngần ngại comment bên dưới bài viết này tôi sẽ hỗ trợ. Còn nếu bạn muốn hoàn thiện kỹ năng lập trình Html Css để đi làm kiếm tiền sớm thì hãy có thể tham khảo thêm chương tình Html Css 21 Ngày tại https://unitop.vn .

Làm thế nào để học lập trình web đi làm hiệu quả thu nhập từ 8-30tr/tháng?

Tôi thường xuyên gửi những thông tin như thế này cho bạn qua email. Hơn 5000+ người đang nhận thông tin! (Không SPAM)

Mọi người thường xem

Tạo Link Icon Button với Html Css

Làm thế nào để tạo ra một link hiển thị kiểu button có icon bên cạnh để làm rõ hơn nội dung mà link muốn

Bạn muốn kiếm tiền từ kỹ năng lập trình web?

Lộ trình 10 bước có nhóm kín kèm cặp và trên 2.500 người học và đã đi làm với thu nhập 8-30tr/tháng