.jpg)
.jpg)
17:42
Annhientutai
Khung quảng cáo chiều dọc mã HTML
Hướng dẫn sử dụng:
Hình ảnh sản phẩm:
Thay đổi thuộc tính src trong thẻ <img> để sử dụng đường dẫn đến hình ảnh sản phẩm của bạn.
Tên sản phẩm:
Sửa nội dung trong thẻ <div class="ad-title"> thành tên sản phẩm cụ thể.
Mô tả sản phẩm:
Chỉnh sửa nội dung trong thẻ <div class="ad-description"> thành phần mô tả ngắn gọn của sản phẩm.
Liên kết sản phẩm:
Thay đổi thuộc tính href trong thẻ <a> thành đường dẫn đến trang bán hàng của sản phẩm.
Đặc điểm:
· Thiết kế nhỏ gọn, phù hợp đặt ở sidebar của trang web.
· Giao diện thân thiện, dễ thu hút khách hàng.
· Màu sắc và kích thước có thể tùy chỉnh trong phần CSS.
Dưới đây là mã HTML kết hợp với CSS tạo một khung quảng cáo sản phẩm theo chiều dọc, dễ sử dụng và có thể đặt ở sidebar trang web:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Product Ad Banner</title>
<style>
.vertical-ad-banner {
width: 250px;
border: 2px solid #ddd;
border-radius: 8px;
padding: 16px;
background-color: #f9f9f9;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 20px auto;
text-align: center;
font-family: Arial, sans-serif;
}
.vertical-ad-banner img {
max-width: 100%;
border-radius: 8px;
margin-bottom: 12px;
}
.ad-title {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 8px;
}
.ad-description {
font-size: 14px;
color: #555;
margin-bottom: 12px;
}
.ad-link {
display: inline-block;
padding: 10px 16px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
}
.ad-link:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="vertical-ad-banner">
<!-- Product Image -->
<img src="https://via.placeholder.com/250" alt="Product Image">
<!-- Product Details -->
<div class="ad-title">Tên sản phẩm</div>
<div class="ad-description">
Đây là lời giới thiệu ngắn gọn, thu hút khách hàng quan tâm đến sản phẩm.
</div>
<a href="#" class="ad-link">Xem chi tiết</a>
</div>
</body>
</html>
Posted in: THIẾT KẾ WEBSITE
0 nhận xét:
Đăng nhận xét