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 .