DEMO:
Thiết kế Website Cơ bản
5,000,000đ
- Thiết kế website chuẩn SEO
- Giao diện responsive
- Tích hợp cơ bản (Form liên hệ, Bản đồ)
- Tư vấn lựa chọn giao diện
- Bảo hành 6 tháng
Phổ biến nhất
Thiết kế Website Nâng cao
10,000,000đ
- Thiết kế website bán hàng
- Tích hợp cổng thanh toán
- Tối ưu tốc độ tải trang
- Đào tạo quản trị website
- Bảo hành 12 tháng
Thiết kế Website Cao cấp
15,000,000đ+
- Thiết kế website theo yêu cầu
- Tính năng độc quyền
- Tích hợp API và hệ thống phức tạp
- Quản lý dự án riêng biệt
- Hỗ trợ và bảo trì liên tục
Hướng dẫn và giải thích chi tiết code thiết kế bảng giá dịch vụ website
Giới Thiệu
Bạn đang tìm sharecode HTML và CSS bảng báo giá chuyên nghiệp, dễ dàng chỉnh sửa cho website của mình? Hôm nay, mình chia sẻ code bảng báo giá HTML đẹp mắt, phù hợp cho nhiều lĩnh vực như dịch vụ, bán hàng, hoặc thiết kế website. Code được tối ưu, dễ dàng tích hợp vào mọi giao diện.
Vì Sao Cần Bảng Báo Giá HTML và CSS?
- Tăng tính chuyên nghiệp: Một bảng báo giá đẹp giúp nâng cao uy tín trong mắt khách hàng.
- Dễ dàng tùy chỉnh: Chỉ cần chỉnh sửa code, bạn có thể cá nhân hóa bảng báo giá theo nhu cầu.
- Thân thiện với SEO: Code nhẹ, tối ưu tốc độ tải trang, giúp website giữ chân khách hàng lâu hơn.
Đặc Điểm Nổi Bật của Bảng Báo Giá HTML và CSS
- Giao diện responsive: Tương thích với mọi thiết bị (máy tính, điện thoại, tablet).
- Màu sắc tùy chỉnh: Dễ dàng thay đổi màu sắc, phông chữ.
- Hiệu ứng hover đẹp mắt: Khi rê chuột vào các ô giá, bảng sẽ đổi màu nhẹ, tạo hiệu ứng sinh động.
- Cấu trúc đơn giản: HTML rõ ràng, CSS tách biệt dễ quản lý và chỉnh sửa.
Sharecode HTML và CSS Bảng Báo Giá Cho
1. Cấu trúc tổng quan
Đoạn code HTML trên tạo giao diện bảng giá dịch vụ thiết kế website với 3 cột đại diện cho 3 gói dịch vụ: Cơ bản, Nâng cao, Cao cấp. Mỗi gói có tiêu đề, giá, danh sách tính năng và nút đăng ký.
Code này các bạn chỉ cần bỏ vào HTML bất kì là được nhé
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow" style="display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px;"> <!-- Column 1 --> <div class="wp-block-column content-card is-style-default" style="flex: 1 1 30%; border: 1px solid #ddd; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);"> <div class="wp-block-group pricing-card"> <div class="wp-block-group__inner-container"> <div class="wp-block-group pricing-card__header"> <h3 class="wp-block-heading" style="font-size: 1.5em; color: #333;">Thiết kế Website Cơ bản</h3> <p class="pricing-card__price" style="font-size: 1.8em; font-weight: bold; color: #00aaff;"><strong>5,000,000đ</strong></p> </div> <ul class="pricing-card__list" style="list-style-type: none; padding-left: 0; color: #555;"> <li><i class="fas fa-check-circle" style="color: #00aaff;"></i> Thiết kế website chuẩn SEO</li> <li><i class="fas fa-check-circle" style="color: #00aaff;"></i> Giao diện responsive</li> <li><i class="fas fa-check-circle" style="color: #00aaff;"></i> Tích hợp cơ bản (Form liên hệ, Bản đồ)</li> <li><i class="fas fa-check-circle" style="color: #00aaff;"></i> Tư vấn lựa chọn giao diện</li> <li><i class="fas fa-check-circle" style="color: #00aaff;"></i> Bảo hành 6 tháng</li> </ul> <div class="wp-block-buttons"> <a class="wp-block-button__link" href="#dang-ky" style="background-color: #00aaff; color: white; padding: 10px 20px; border-radius: 5px;">Đăng ký</a> </div> </div> </div> </div> <!-- Column 2 --> <div class="wp-block-column" style="flex: 1 1 30%; border: 1px solid #ddd; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);"> <div class="wp-block-group pricing-card"> <div class="wp-block-group__inner-container"> <div class="wp-block-group pricing-card__header"> <p class="badge" style="background-color: #ff4b4b; color: white; padding: 5px 10px; display: unset;">Phổ biến nhất</p> <h3 class="wp-block-heading" style="font-size: 1.5em; color: #333;">Thiết kế Website Nâng cao</h3> <p class="pricing-card__price" style="font-size: 1.8em; font-weight: bold; color: #ff4b4b;"><strong>10,000,000đ</strong></p> </div> <ul class="pricing-card__list" style="list-style-type: none; padding-left: 0; color: #555;"> <li><i class="fas fa-check-circle" style="color: #ff4b4b;"></i> Thiết kế website bán hàng</li> <li><i class="fas fa-check-circle" style="color: #ff4b4b;"></i> Tích hợp cổng thanh toán</li> <li><i class="fas fa-check-circle" style="color: #ff4b4b;"></i> Tối ưu tốc độ tải trang</li> <li><i class="fas fa-check-circle" style="color: #ff4b4b;"></i> Đào tạo quản trị website</li> <li><i class="fas fa-check-circle" style="color: #ff4b4b;"></i> Bảo hành 12 tháng</li> </ul> <div class="wp-block-buttons"> <a class="wp-block-button__link" href="#dang-ky" style="background-color: #ff4b4b; color: white; padding: 10px 20px; border-radius: 5px;">Đăng ký</a> </div> </div> </div> </div> <!-- Column 3 --> <div class="wp-block-column" style="flex: 1 1 30%; border: 1px solid #ddd; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);"> <div class="wp-block-group pricing-card"> <div class="wp-block-group__inner-container"> <div class="wp-block-group pricing-card__header"> <h3 class="wp-block-heading" style="font-size: 1.5em; color: #333;">Thiết kế Website Cao cấp</h3> <p class="pricing-card__price" style="font-size: 1.8em; font-weight: bold; color: #00aaff;"><strong>15,000,000đ+</strong></p> </div> <ul class="pricing-card__list" style="list-style-type: none; padding-left: 0; color: #555;"> <li><i class="fas fa-check-circle" style="color: #00aaff;"></i> Thiết kế website theo yêu cầu</li> <li><i class="fas fa-check-circle" style="color: #00aaff;"></i> Tính năng độc quyền</li> <li><i class="fas fa-check-circle" style="color: #00aaff;"></i> Tích hợp API và hệ thống phức tạp</li> <li><i class="fas fa-check-circle" style="color: #00aaff;"></i> Quản lý dự án riêng biệt</li> <li><i class="fas fa-check-circle" style="color: #00aaff;"></i> Hỗ trợ và bảo trì liên tục</li> </ul> <div class="wp-block-buttons"> <a class="wp-block-button__link" href="#dang-ky" style="background-color: #00aaff; color: white; padding: 10px 20px; border-radius: 5px;">Đăng ký</a> </div> </div> </div> </div> </div> |
Giải thích chi tiết code HTML và CSS bảng báo giá
2. Thiết lập CSS ngoại vi
1 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
Dòng này gọi file CSS của Font Awesome để sử dụng các biểu tượng như dấu check-circle trong danh sách tính năng.
3. Container chính và bố cục flexbox
1 | <div class="wp-block-group__inner-container is-layout-flow" style="display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px;"> |
Container cha chứa tất cả các cột. display: flex
giúp các cột nằm ngang, flex-wrap: wrap
đảm bảo responsive (xuống dòng khi không đủ không gian).
4. Thiết lập cột dịch vụ
1 | <div class="wp-block-column" style="flex: 1 1 30%; border: 1px solid #ddd; border-radius: 8px; padding: 20px;"> |
Mỗi cột chiếm 30% chiều rộng (3 cột trên một hàng). border-radius: 8px
bo tròn góc, box-shadow
tạo đổ bóng nhẹ.
5. Tiêu đề gói và giá cả
1 2 | <h3 class="wp-block-heading" style="font-size: 1.5em; color: #333;">Thiết kế Website Cơ bản</h3> <p class="pricing-card__price" style="font-size: 1.8em; font-weight: bold; color: #00aaff;"><strong>5,000,000đ</strong></p> |
H3 là tiêu đề chính của từng gói dịch vụ, kích thước 1.5em. Giá dịch vụ nổi bật bằng màu xanh #00aaff và đậm font-weight: bold
.
6. Danh sách tính năng có icon
1 | <li><i class="fas fa-check-circle" style="color: #00aaff;"></i> Thiết kế website chuẩn SEO</li> |
Mỗi tính năng trong danh sách được thể hiện bằng thẻ <li>
, kèm biểu tượng check xanh fa-check-circle
từ Font Awesome.
7. Nút đăng ký
1 | <a class="wp-block-button__link" href="#dang-ky" style="background-color: #00aaff; color: white; padding: 10px 20px; border-radius: 5px;">Đăng ký</a> |
Nút này dẫn người dùng đến phần đăng ký khi click, với nền xanh dương #00aaff và chữ trắng.
8. Gói phổ biến (Nâng cao)
1 | <p class="badge" style="background-color: #ff4b4b; color: white; padding: 5px 10px;">Phổ biến nhất</p> |
Dán nhãn nổi bật cho gói dịch vụ phổ biến với nền đỏ #ff4b4b.
9. Gói dịch vụ cao cấp
Gói này có các tính năng nâng cao và giá khởi điểm từ 15 triệu đồng.
10. Responsive cho di động
1 2 3 4 5 | @media (max-width: 768px) { .wp-block-column { flex: 1 1 100%; } } |
Trên màn hình nhỏ (dưới 768px), mỗi cột sẽ chiếm 100% chiều rộng, hiển thị theo dạng dọc.
Lưu ý
- Code đơn giản, dễ chỉnh sửa thêm tính năng.
- Tăng hiệu quả SEO bằng cách thêm từ khóa liên quan vào thẻ
h3
vàalt
cho hình ảnh.
Kết Luận
Code tạo giao diện bảng giá dịch vụ thiết kế website với 3 gói khác nhau, sử dụng flexbox để hiển thị linh hoạt và responsive. Mỗi gói có tiêu đề, giá, danh sách tính năng kèm icon và nút đăng ký. Thiết kế gọn gàng, bo góc, đổ bóng nhẹ giúp giao diện hiện đại và chuyên nghiệp. Nút đăng ký nổi bật, dễ tương tác, phù hợp cho trang dịch vụ. Phần responsive đảm bảo hiển thị tốt trên mọi thiết bị, giúp tối ưu trải nghiệm người dùng.
- Nhận Mã Giftcode Giảm Giá 30% Khi Mua Combo Theme WordPress Giá Rẻ
- Giới thiệu tính năng Flash Sale “Đã bán bao nhiêu” giống Shopee
- Cách Tăng Tốc Website Học Online Với Tutor LMS
- Thêm trường số điện thoại, xoá trường email, website và chống spam bình luận bài viết
- Cách Chọn Theme WordPress Phù Hợp Với Ngành Kinh Doanh: Hướng Dẫn Chi Tiết 2024