.jpg)
.jpg)
17:12
Annhientutai
Khung quảng cáo viết Ngôn ngữ HTML
Dưới đây là một khung quảng cáo sản phẩm được viết bằng ngôn ngữ HTML kết hợp với CSS, dễ sử dụng và có thể chèn vào bất kỳ trang web nào. Khung quảng cáo này gồm hình ảnh sản phẩm, mô tả, và liên kết đến trang bán hàng.
Product Ad Banner
Hướng dẫn sử dụng
1. Chèn mã vào trang web: Sao chép và dán đoạn mã này vào tệp HTML của bạn.
2. Thay thế nội dung:
1. Thay hình ảnh mặc định https://via.placeholder.com/150 bằng liên kết hình ảnh sản phẩm của bạn.
2. Thay đổi tiêu đề sản phẩm (product-title) và mô tả (product-description) trong đoạn JavaScript hoặc trực tiếp trong HTML.
3. Cập nhật liên kết sản phẩm (product-link) bằng URL trang bán hàng của bạn.
3. Tùy chỉnh:
1. Sửa đổi CSS để phù hợp với giao diện trang web của bạn.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Advertisement Banner</title>
<style>
.ad-banner {
display: flex;
align-items: center;
justify-content: space-between;
border: 2px solid #ddd;
border-radius: 8px;
padding: 16px;
max-width: 600px;
margin: 20px auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #f9f9f9;
}
.ad-banner img {
max-width: 150px;
border-radius: 8px;
}
.ad-content {
flex: 1;
margin-left: 16px;
}
.ad-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 8px;
}
.ad-description {
font-size: 14px;
color: #555;
margin-bottom: 12px;
}
.ad-link {
display: inline-block;
padding: 8px 12px;
color: #fff;
background-color: #007bff;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
}
.ad-link:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="ad-banner">
<!-- Product Image -->
<img src="https://via.placeholder.com/150" alt="Product Image" id="product-image">
<!-- Product Details -->
<div class="ad-content">
<div class="ad-title" id="product-title">Tên sản phẩm</div>
<div class="ad-description" id="product-description">
Đây là nơi bạn viết lời giới thiệu sản phẩm ngắn gọn và thu hút khách hàng.
</div>
<a href="#" class="ad-link" id="product-link">Xem chi tiết</a>
</div>
</div>
<!-- JavaScript to dynamically update the ad banner -->
<script>
// Example: Dynamically set product details
document.getElementById('product-title').textContent = "Máy Massage Đa Năng";
document.getElementById('product-description').textContent = "Máy massage cầm tay với 6 chế độ thư giãn, giảm đau hiệu quả.";
document.getElementById('product-image').src = "https://via.placeholder.com/150"; // Replace with your product image link
document.getElementById('product-link').href = "https://shopee.vn/your-product-link"; // Replace with your product page link
</script>
</body>
</html>
Posted in: THIẾT KẾ WEBSITE
0 nhận xét:
Đăng nhận xét