Làm thế nào để hiển thị danh sách sản phẩm trong website bán hàng với html và css? Nếu như bạn đang học lập trình web và đang có câu hỏi như trên thì đây là video dành cho bạn.
Trong video này tôi chia sẻ đến bạn tư duy để có thể tạo ra danh sách sản phẩm vừa đẹp, mềm mại, bắt mắt.
Nếu như bạn chưa có nền tảng về html, css thì đừng lo, trong video này tôi chia sẻ chi tiết để bạn có thể nắm bắt ý tưởng.
Nếu bạn muốn học bài bản đi làm thì bạn có thể xem thêm link bên dưới:
——
» » Bấm đăng ký kênh để tránh bỏ sót video mới://bit.ly/2RMvXez
» » Nhận tài liệu học web miễn phí qua mail:
————
Liên Kết Quan Trọng
» Nhận tài liệu miễn phí:
» Blog lập trình:
» Đăng ký khoá học web đi làm:
» Fanpage:
» Fb:
————————–
Xem Lộ Trình Học Lập Trình Web Đi Làm
»
#unitop #hocwebdilam
——
» » Bấm đăng ký kênh để tránh bỏ sót video mới://bit.ly/2RMvXez
» » Nhận tài liệu học web miễn phí qua mail:
————
Liên Kết Quan Trọng
» Nhận tài liệu miễn phí:
» Blog lập trình:
» Đăng ký khoá học web đi làm:
» Fanpage:
» Fb:
————————–
Xem Lộ Trình Học Lập Trình Web Đi Làm
»
#unitop #hocwebdilam
Phần mềm code: Visual Studio Code(Live server)
Bạn bấm đăng ký kênh để cập nhật những video mới trong những ngày tới!
» Nhận tài liệu miễn phí: https://hocwebdilam.com?utm_source=youtube
» Blog lập trình: http://unitop.com.vn
» Đăng ký khoá học web đi làm: https://unitop.vn
Chúc bạn học tốt!
Thầy ơi em làm thử cái tiêu đề sản phẩm, ghi giống ik chang mà nó không có khung vs chạy ra chính giữa ạ
không biết css grid có làm được như vầy k thầy, em tìm video của thầy mà hình như k có vid nào hướng dẫn làm bằng grid
thầy ơi tại sao lúc đặt giá sp lại dùng thẻ div mà không dùng thẻ p vậy ạ
em tem đã code đoạn overflow: hidden nhma nó không có tác động á thầy, thầy chỉ con đoạn này với ạ
CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>wed2</title>
</head>
<body>
<style>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wapper{
max-width: 1170px;
margin: 0 auto;
}
.headline{
text-align: center;
margin: 40px 0px;
}
h3
{
color: grey;
font-size: 18px;
border: 1px solid #bebebe;
display: inline-block;
font-weight: 600;
text-transform: uppercase;
padding: 10px 20px;
}
.products
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li{
flex-basis: 25%;
list-style: none;
padding-left:15px ;
padding-right: 15px;
margin-bottom: 30px;
}
img{
width: 100%;
height: auto;
display: block;
}
.product-info a{
display: block;
font-size: 11px;
text-transform: uppercase;
color: #bebebe;
padding: 3px 0px;
}
a.product-name {
color: #334862;
padding: 3px 0px;
}
a.buy-now{
text-transform: uppercase;
text-align: center;
display: block;
background-color: #446084;
color: #fff;
padding: 10px 0px;
position: absolute;
width: 100%;
bottom: -38px;
transition: 0.25s ease-in-out;
}
.product-thumb{
display: block;
}
.produc-top{
position: relative;
overflow: hidden;
}
li:hover a.buy-now{
bottom: 0px;
opacity: 0.85;
}
li:hover img{
filter: opacity(80%);
}
</style>
<div id="wapper">
<div class="headline">
<h3>sản phẩm bán chạy</h3>
</div>
<ul class="products">
<li>
<div class="product-item">
<div class="produc-top">
<a class="product-thumb">
<img src="p1.jpeg">
</a>
<a class="buy-now">mua ngay</a>
</div>
</div>
<div class="product-info">
<a class="product-cat">bags</a>
<a class="product-name">1 đổi 1</a>
<div class="product-price">10.000</div>
</div>
</li>
<li>
<div class="product-item">
<div class="produc-top">
<a class="product-thumb">
<img src="p2.jpeg">
</a>
<a class="buy-now">mua ngay</a>
</div>
</div>
<div class="product-info">
<a class="product-cat">bags</a>
<a class="product-name">1 đổi 1</a>
<div class="product-price">10.000</div>
</div>
</li>
<li>
<div class="product-item">
<div class="produc-top">
<a class="product-thumb">
<img src="p3.jpeg">
</a>
<a class="buy-now">mua ngay</a>
</div>
</div>
<div class="product-info">
<a class="product-cat">bags</a>
<a class="product-name">1 đổi 1</a>
<div class="product-price">10.000</div>
</div>
</li>
<li>
<div class="product-item">
<div class="produc-top">
<a class="product-thumb">
<img src="p4.jpeg">
</a>
<a class="buy-now">mua ngay</a>
</div>
</div>
<div class="product-info">
<a class="product-cat">bags</a>
<a class="product-name">1 đổi 1</a>
<div class="product-price">10.000</div>
</div>
</li>
<li>
<div class="product-item">
<div class="produc-top">
<a class="product-thumb">
<img src="p5.jpeg">
</a>
<a class="buy-now">mua ngay</a>
</div>
</div>
<div class="product-info">
<a class="product-cat">bags</a>
<a class="product-name">1 đổi 1</a>
<div class="product-price">10.000</div>
</div>
</li>
<li>
<div class="product-item">
<div class="produc-top">
<a class="product-thumb">
<img src="p6.jpeg">
</a>
<a class="buy-now">mua ngay</a>
</div>
</div>
<div class="product-info">
<a class="product-cat">bags</a>
<a class="product-name">1 đổi 1</a>
<div class="product-price">10.000</div>
</div>
</li>
<li>
<div class="product-item">
<div class="produc-top">
<a class="product-thumb">
<img src="p7.jpeg">
</a>
<a class="buy-now">mua ngay</a>
</div>
</div>
<div class="product-info">
<a class="product-cat">bags</a>
<a class="product-name">1 đổi 1</a>
<div class="product-price">10.000</div>
</div>
</li>
<li>
<div class="product-item">
<div class="produc-top">
<a class="product-thumb">
<img src="p8.jpeg">
</a>
<a class="buy-now">mua ngay</a>
</div>
</div>
<div class="product-info">
<a class="product-cat">bags</a>
<a class="product-name">1 đổi 1</a>
<div class="product-price">10.000</div>
</div>
</li>
</ul>
</div>
</body>
</html>
dễ hiểu
Thầy ơi em muốn hơ chuột vào nó đổi ảnh khác thì làm sao ạ
thầy ơi cho em hỏi là khúc ul.products ấy ạ em chạy thì bài chỉ ra hàng dọc thồi, còn không thì chỉ ra hàng ngang, nó không cách dòng ra được ấy ạ.
Để tạo được web như này mình cần học gì ạ
If you kept it going till now you have all the respect that I can give
<3
thầy ơi code này lấy ở đâu ạ
thầy hay ai code bài này xong rồi cho em chạy thử được không ạ
thầy cho e xin code để e hc được ko ạ
chỉ em tạo giỏ hàng với ạ em cảm ơn thầy <3
Thanks a.
Cho em hỏi sao toàn bộ phần product-info của em nó còn không thèm đổi màu cat,name,price mà giữ nguyên như cũ
phần line-height:1.15; ko có tác dụng a ạ. có nên bỏ đi ko ạ
Em cảm ơn thầy rất nhiều ạ <3