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 . Với bất kì Admin hay lập trình website nào thì việc tạo giao diện web đơn thuần bằng HTML và CSS được coi là kỹ năng và kiến thức tối quan trọng không thể thiếu. Việc tạo giao diện web đơn giản bằng HTML và CSS ngày càng dễ dàng và thuận tiện hơn với nhiều công cụ thiết kế web hiệu quả ra đời như Adobe Dreamweaver, Visual Editor hay WordPress… thì HTML và CSS vẫn được xem là khởi đầu nguyên bản của mọi trang web. Tạo giao diện web đơn giản bằng HTML và CSSNgày nay việc thiết kế web ngày càng trở lên thuộc tiện và nhanh chóng hơn với các công cụ bổ trợ cho việc thiết kế web hiệu quả xong tạo giao diện web đơn giản bằng HTML và CSS vẫn sẽ là một lựa chọn thú vị dành cho nhiều người. Tạo giao diện web đơn giản bằng HTML và CSS hiệu quả không chỉ đơn giản là xây dựng mỗi giao diện mà còn có thể học tập được nhiều thứ về code, công cụ, các lỗi… việc làm này đã giúp cho nhiều người có được một công việc thông qua tạo giao diện web đơn giản bằng HTML và CSS. Xem thêm: CÓ NÊN THIẾT KẾ WEB BẰNG WORDPRESS HAY KHÔNG? Thẻ HTML và CSSHTML hay có cách gọi khác là Hyper Text Markup Language dịch nghĩa tiếng Việt gọi bằng ngôn ngữ khắc ghi siêu văn bản. Đây được hiểu là ngôn ngữ vốn để thiết kế web hiệu quả. HTML bao gồm nhiều đoạn mã ngắn kết nối với nhau vào một tệp văn bản đơn cử ngoài ra nó còn được biết với tên gọi là những mã thẻ ngữ điệu. CSS – Cascade Style Sheet là ngữ điệu lập trình giúp trình duyệt biết được những tùy chỉnh cấu hình định dạng và bố cục tổng quan mạch lạc cho trang web CSS được ví như phần kết tiếp của HTML, thiết kế web hiệu quả được hoàn chỉnh và chuyên nghiệp và bài bản nhất. Nếu bạn có thể hiểu và nắm được những định nghĩa trên thì bạn có thể tạo giao diện web đơn giản bằng HTML và CSS với những bước cơ bản đầu tiên. Để tạo giao diện web đơn giản bằng HTML và CSS hiệu quả bạn cần phải làm theo các bước sau: Bố cục trang web bằng css gồm 3 phần: - Header
- Main gồm có Content và Sidebar
- Footer
Khi mới bắt đầu tạo bạn nên dựng phác thảo sơ đồ web trước để có thể tạo giao diện web đơn giản bằng HTML và CSS hiệu quả bạn cần làm những bước tiếp theo và khi dựng Layout bạn sẽ dựa theo các phần đó để dựng HTML. Tham khảo khóa học Code: <div class=”header”> Đây là phần đầu trang web </div> Phần ContentĐây là phần bạn sẽ hiển thị nội dung, hình ảnh và video Code: <div class=”content”> Phần nội dung trang web </div> Hầu hết các trang web đều có cột bên, phần này sẽ hiển thị các bài viết mới post lên Code:<div class=”sidebar”> Đây là cột bên trang web </div> Đây là phần chân trang web Code: <div class=”footer”> Đây là Footer </div> Đoạn code tạo giao diện web đơn giản bằng HTML và CSS<html> <meta charset=”utf-8″> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″/> <style> * { margin: 0; padding: 0; } .wrapper { width: 900px; margin: 0 auto; } .head { height: 100px; background: e7e7e7;border: 1px solid 000;margin-bottom: 10px; } main { width: 900px; height: 300px; clear: both; } .content { width: 580px; height: 300px; background: e7e7e7;border: 1px solid 000;float: left; margin-bottom: 10px; } .sidebar { width: 300px; height: 300px; background: e7e7e7;border: 1px solid 000;float: right; } .footer { height: 100px; background: e7e7e7;border: 1px solid 000;clear: both; } </style> <div class=”wrapper”> <div class=”head”> Đây là phần đầu trang web </div> <div class=”main”> <div class=”content”> Đây là nội dung trang web </div> <div class=”sidebar”> Đây là sidebar trang web </div> </div> <div class=”footer”> Đây là chân trang web </div> </div> </html> Phần HTML: .main sẽ bao gồm 2 class là .content và sidebar. Class main cũng đã được hiểu là cha của 2 thành phần con là content và sidebar. .wrapper là thành phần cha bao gồm các phần tử con header, content, sidebar và footer. Phần CSS: Reset HTML dùng đoạn CSS: * { margin: 0; padding: 0; } margin: thuộc tính canh lề hay nói một cách khác là khoảng cách giữa những phần tử padding: thêm không gian gian phía bên trong clear: both; ngăn chặn thành phần A chiếm vùng không gian của thành phần B, bạn có thể xoá clear:both trong CSS để nhìn có gì xảy ra | 
