Hướng dẫn pricing template html css - mẫu định giá html css

Question

Pricing Table là bảng báo giá, trong thực tế, ứng dụng mà chúng ta thường ngay gặp nhất về Pricing Table chính là mỗi khi cài đặt một phần mềm có nhiều gói khác nhau, mỗi bảng báo giá sẽ đại diện cho một gói với các chức năng khác nhau, các bạn xem ví dụ dưới đây:

Nội dung chính Show

1. Xây dựng giao diện
2. Thêm CSS cho giao diện
3. Lời kết
Mục lục:
Bảng định giá và tầm quan trọng của nó
Một số thiết kế cảm hứng của bảng giá
Bộ sưu tập bảng giá (hơn 30 bảng giá)
Làm thế nào để bạn hiển thị giá trong HTML?
Làm thế nào để bạn làm một bảng giá?
Bảng giá là gì?
Giá của HTML là bao nhiêu?

Như hình ảnh ở trên, mỗi bảng Pricing Table sẽ thể hiện một số đặc điểm của gói cài đặt đó.

Ok vậy là chúng ta đã biết Pricing Table là gì, trong bài viết này chúng ta sẽ cùng nhau xây dựng Responsive Pricing Table có thể hiện thị tốt trên nhiều loại thiết bị.Pricing Table là gì, trong bài viết này chúng ta sẽ cùng nhau xây dựng Responsive Pricing Table có thể hiện thị tốt trên nhiều loại thiết bị.

1. Xây dựng giao diện

Đầu tiên chúng ta sẽ xây dựng các thành phần, các bạn tạo file index.html và dán đoạn mã sau vào trong thẻ body:

Code


    Freetuts.net hướng dẫn tạo Responsive Pricing Table
    
	  	
		    Basic
		    $ 9.99 / year
		    10GB Storage
		    10 Emails
		    10 Domains
		    1GB Bandwidth
		    Sign Up
	  	
	

	
	  	
		    Pro
		    $ 24.99 / year
		    25GB Storage
		    25 Emails
		    25 Domains
		    2GB Bandwidth
		    Sign Up
	  	
	

	
	  	
		    Premium
		    $ 49.99 / year
		    50GB Storage
		    50 Emails
		    50 Domains
		    5GB Bandwidth
		    Sign Up

Trong ứng dụng này chúng ta sẽ tạo ra 3 bảng, mỗi bảng sẽ đại diện cho một gói VPS khác nhau.

OK giờ chuyển qua bước tiếp theo.

2. Thêm CSS cho giao diện

Chúng ta đã có thành phần hiển thị rồi giờ sử dụng CSS để định dạng cho chúng, các bạn đặt đoạn CSS dưới đây vào bên trong thẻ style:

.container {
	width: 50%;
    margin: auto;
}
	* {
    box-sizing: border-box;
}

.columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

.price .grey {
    background-color: #eee;
    font-size: 20px;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}

Các đoạn mã trên đều rất cơ bản, các bạn chỉ cần lưu ý đoạn mã:

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}

Đây là đoạn mã cốt lõi sẽ quyết định việc hiển thị tốt trên nhiều kích thước màn hính khác nhau, nó có nghĩa là nếu trình duyệt có chiều dài nhỏ hơn 600px, thì độ dài mỗi bảng sẽ là 100% thay vì 33,3% như ở trên đã thiết lập. Các bạn nên lưu ý thuộc tính @media vì sau này khi viết cái website responsive các bạn sẽ còn gặp lại nó rất nhiều.

Giờ các bạn chạy file index.html để xem thành quả mình vừa tạo ra nhé!

3. Lời kết

Như vậy, qua bài viết này mình đã cùng các bạn tạo Responsive Pricing Table với CSS. Hi vọng nó sẽ giúp các có thêm sự lựa chọn trong quá trình xây dựng website, nếu có bất cứ thắc mắc nào các bạn có thể để lại trong phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net.

Tham khảo: w3schools.com

$ 49,99 / năm

25 miền

Băng thông 2GB box-sizing: border-box;}
box-sizing: border-box;
}

$ 49,99 / năm.columns { float: left;  width: 33.3%;  padding: 8px;}
.columns {
float: left;
  width: 33.3%;
  padding: 8px;
}

Kho lưu trữ 50 GB.price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s;}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}

50 email.price:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

50 miền.price .header { background-color: #111; color: white; font-size: 25px;}
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}

Băng thông 5GB.price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center;}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}

Hãy tự mình thử ».price .grey {  background-color: #eee;  font-size: 20px;}
.price .grey {
  background-color: #eee;
  font-size: 20px;
}

Cách tạo bảng định giá đáp ứng.button { background-color: #04AA6D; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px;}
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}

Bước 1) Thêm HTML:(to stack horizontally on small screens) */ @media only screen and (max-width: 600px) {  .columns {    width: 100%;   }}
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
  .columns {
    width: 100%;
  }
}

$ 24,99 / năm

Một bảng giá là khá cần thiết vì nó thể hiện giá trị của một sản phẩm của công ty và đại diện cho giá trị tiền tệ của các tính năng của nó. Đối với các dịch vụ kinh doanh trực tuyến, một bảng giá đóng vai trò quan trọng trong việc tăng doanh số bán sản phẩm. Chúng cung cấp một cách độc đáo để giữ cho một so sánh về giá dịch vụ và giá cả của bạn gọn gàng, cụ thể và dễ hiểu. Bảng định giá nhằm giúp khách hàng xác định nhanh chóng và hiệu quả kế hoạch thanh toán nào hoặc dịch vụ nào sẽ mua. Khách truy cập có thể dễ dàng được chuyển đổi thành khách hàng với sự trợ giúp của một bảng định giá sạch sẽ và hấp dẫn về mặt thị giác. Do đó, mọi công ty dịch vụ dựa trên web phải xác định bảng giá của mình và trình bày chuyên nghiệp trên trang web kinh doanh của mình.pricing table plays an important role in increasing the sales of a product. These offer a unique way to keep a comparison of your service and package prices neat, concrete, and easily understandable. Pricing tables are intended to help customers quickly and efficiently determine which payment plan to choose or what service to purchase. Visitors can easily be converted into customers with the help of a visually attractive and clean pricing table. As a result, every web-based service company must define its pricing table and present it professionally on its business website.pricing table plays an important role in increasing the sales of a product. These offer a unique way to keep a comparison of your service and package prices neat, concrete, and easily understandable. Pricing tables are intended to help customers quickly and efficiently determine which payment plan to choose or what service to purchase. Visitors can easily be converted into customers with the help of a visually attractive and clean pricing table. As a result, every web-based service company must define its pricing table and present it professionally on its business website.

Trong bài viết này, bạn có thể dễ dàng nhận thấy một ý tưởng thiết kế cho một bảng giá, cũng như một bộ sưu tập tuyệt vời các bảng giá được sử dụng miễn phí. & NBSP;

Mục lục:

Bảng định giá và tầm quan trọng của nó

Bảng giá là một cách tuyệt vời để giới thiệu giá cho sản phẩm, dịch vụ hoặc gói hấp dẫn. Để minh họa các phạm vi giá khác nhau, đó là một sự sắp xếp đơn giản các số hoặc từ với thiết kế tối thiểu để giúp các nhà bán lẻ hoặc các doanh nghiệp khác. Đó là một tính năng mà chủ doanh nghiệp có thể sử dụng để tăng doanh số trong khi cũng hiểu những dịch vụ hoặc hàng hóa mà một công ty cung cấp. Bảng giá đáp ứng được thiết kế tốt mang lại lợi ích cho người dùng Triển vọng trong việc hiểu những gì bạn cung cấp, cách bạn cung cấp và chi phí bao nhiêu để mua sản phẩm hoặc dịch vụ của bạn. Có thể nhanh chóng tăng tỷ lệ chuyển đổi bằng cách tạo ra một bảng giá hấp dẫn. Điều này có nghĩa là bảng giá có hiệu lực cho mọi tổ chức bán sản phẩm và dịch vụ. Nếu mọi người có thể thấy giá trị của ưu đãi của bạn thông qua thiết kế bảng giá rõ ràng, họ có nhiều khả năng trở thành khách hàng trả tiền. Vì vậy, nếu bạn quyết tâm tăng doanh số và lợi nhuận của mình, bạn phải hiểu tầm quan trọng của bảng giá rõ ràng.pricing table is effective for every organization that sells products and services. If people can see the value of your offer through a clear pricing table design, they are much more likely to become paying customers. So, if you are determined to increase your sales and profits, you must understand the importance of a clear pricing table.pricing table is effective for every organization that sells products and services. If people can see the value of your offer through a clear pricing table design, they are much more likely to become paying customers. So, if you are determined to increase your sales and profits, you must understand the importance of a clear pricing table.

Thật dễ dàng để cung cấp bảng giá một cách rõ ràng và đơn giản. Đó là tốt hơn, để bắt đầu, các tùy chọn cơ bản nhất. Sau đó, sử dụng các ưu đãi mở rộng thể hiện rõ ràng sự khác biệt, mở rộng chúng. Các từ như người bán hàng phổ biến nhất hay nhất có thể được sử dụng để làm nổi bật các tùy chọn được đề xuất. Tùy chọn giá trung bình thường là phổ biến nhất trên bảng giá. Hiển thị người mua những gì mỗi kế hoạch cung cấp cụ thể là một ý tưởng tuyệt vời. Họ sẽ có một nhận thức rõ ràng về những gì họ đang có được theo cách này. Tuy nhiên, họ quan tâm đến những điều mà aren đề cập. Điều này là quan trọng hơn nhiều về mặt bán hàng ngày càng tăng. Hình ảnh và các yếu tố đồ họa khác có thể cải thiện đáng kể sự hấp dẫn của bảng định giá đáp ứng. Tuy nhiên, xin vui lòng don quá lạm dụng nó với họ.

Một số thiết kế cảm hứng của bảng giá

MailBluster: Gửi các email và bản tin tiếp thị chất lượng cao với chi phí khả thi thấp nhất và không ảnh hưởng đến khả năng giao hàng là có thể đạt được với MailBluster, một nền tảng tiếp thị qua email do TechNext Limited phát triển. MailBluster cung cấp hai gói thanh toán thiết kế rất rõ ràng giúp người dùng dễ dàng chọn tùy chọn tốt nhất của họ. Một là gửi không giới hạn cho phép bạn gửi cho mỗi email 1K với giá 0,10 đô la. Và theo kế hoạch miễn phí mãi mãi, bạn sẽ nhận được 62k email miễn phí mỗi tháng. Bảng giá này có thể chia sẻ thông tin với khách hàng tiềm năng và chuyển đổi những người đó thành khách hàng trả tiền. Sending high-quality marketing emails and newsletters at the lowest feasible cost and without compromising deliverability is achievable with MailBluster, an email marketing platform developed by Technext Limited. Mailbluster offers two very clear design payment plans that help users easily choose their best option. One is Unlimited Sending Which allows you to send per 1K email for $0.10. And under the Free Forever plan, you will get 62K emails free per month. This pricing table can share information with potential customers and convert those people into paying customers. Sending high-quality marketing emails and newsletters at the lowest feasible cost and without compromising deliverability is achievable with MailBluster, an email marketing platform developed by Technext Limited. Mailbluster offers two very clear design payment plans that help users easily choose their best option. One is Unlimited Sending Which allows you to send per 1K email for $0.10. And under the Free Forever plan, you will get 62K emails free per month. This pricing table can share information with potential customers and convert those people into paying customers.

Gitlab: Trang giá Gitlab rất đơn giản và cố gắng mang lại sự chú ý của bạn đến giá cả. Có ba tùy chọn giá khác nhau: miễn phí, cao cấp và cuối cùng. Mỗi kế hoạch giá được phân biệt bởi màu sắc và độ tương phản của nó, làm cho nó đơn giản để tiêu thụ trong một cái nhìn thoáng qua. Tính năng hấp dẫn nhất của bảng là hiệu ứng di chuột đã được thêm vào mỗi hàng. Việc di chuột của bạn trên mỗi phần sẽ tiết lộ thêm chi tiết, cho phép bạn chọn kế hoạch phù hợp nhất với nhu cầu của bạn. Bảng giá của họ chứa biểu đồ so sánh giá ngoài phạm vi chi phí hàng tháng và hàng năm. The Gitlab pricing page is straightforward and strives to bring your attention to the prices right away. There are three different pricing options: free, premium, and ultimate. Each price plan is distinguished by its color and contrast, making it simple to consume at a glance. The table’s most enticing feature is the hover effect that has been added to each row. Hovering your mouse over each part will reveal more details, allowing you to choose the plan that best matches your needs. Their pricing table contains a price comparison chart in addition to monthly and yearly cost ranges. The Gitlab pricing page is straightforward and strives to bring your attention to the prices right away. There are three different pricing options: free, premium, and ultimate. Each price plan is distinguished by its color and contrast, making it simple to consume at a glance. The table’s most enticing feature is the hover effect that has been added to each row. Hovering your mouse over each part will reveal more details, allowing you to choose the plan that best matches your needs. Their pricing table contains a price comparison chart in addition to monthly and yearly cost ranges.

MailChimp: MailChimp là một dịch vụ tiếp thị email nổi tiếng. Mục đích chính của nó là gửi các bản tin và email tự động để giúp doanh nghiệp của bạn phát triển. Miễn phí, nhu yếu phẩm, tiêu chuẩn và phí bảo hiểm là bốn kế hoạch tiếp thị được cung cấp bởi MailChimp. Những người mới bắt đầu muốn phát triển khán giả của họ và chạy các chiến dịch trong khi thử một số công cụ và khả năng của MailChimp, sẽ được hưởng lợi từ kế hoạch tiếp thị miễn phí. Nó chứa tất cả các nguyên tắc cơ bản mà bạn sẽ cần để bắt đầu tiếp thị. Đối với hầu hết người dùng MailChimp muốn mở rộng kinh doanh của họ, kế hoạch tiêu chuẩn là lựa chọn lý tưởng. Nó có các công cụ và khả năng cung cấp cho bạn sự hiểu biết tốt hơn về khán giả của bạn và MailChimp rất khuyến khích nó. Mailchimp is a well-known email marketing service. Its main purpose is to send out newsletters and automated emails in order to help your business develop. Free, Essentials, Standard, and Premium are the four marketing plans offered by Mailchimp. Beginners who wish to develop their audience and run campaigns while trying out some of Mailchimp’s tools and capabilities will benefit from the Free Marketing plan. It contains all of the fundamentals you’ll need to get started marketing. For most Mailchimp users who wish to expand their business, the Standard plan is the ideal option. It has tools and capabilities that provide you with a better understanding of your audience, and Mailchimp highly recommends it. Mailchimp is a well-known email marketing service. Its main purpose is to send out newsletters and automated emails in order to help your business develop. Free, Essentials, Standard, and Premium are the four marketing plans offered by Mailchimp. Beginners who wish to develop their audience and run campaigns while trying out some of Mailchimp’s tools and capabilities will benefit from the Free Marketing plan. It contains all of the fundamentals you’ll need to get started marketing. For most Mailchimp users who wish to expand their business, the Standard plan is the ideal option. It has tools and capabilities that provide you with a better understanding of your audience, and Mailchimp highly recommends it.

GitHub: GitHub là một nền tảng kiểm soát phiên bản phân tán nơi người dùng có thể hợp tác hoặc áp dụng các dự án mã nguồn mở, mã ngã ba, chia sẻ ý tưởng và hơn thế nữa. Trang giá của họ được thiết kế khá tốt và thông tin, đó là một điều tốt. Cấu trúc giá của họ thực sự hợp lý cho tất cả khách hàng. Nếu bạn nhìn trên bảng giá, bạn sẽ thấy kế hoạch định giá hàng tháng/hàng năm. Họ sử dụng xu hướng ghi nhãn của phổ biến nhất của người Viking bằng cách làm nổi bật một kế hoạch cụ thể để nổi bật so với phần còn lại. Nó là một lựa chọn thiết kế hoạt động tốt và khuyến khích nhiều đăng ký hơn cho các kế hoạch trung cấp so với các kế hoạch rẻ hơn. Với văn bản sạch sẽ, đường viền rắn và nhiều không gian trắng, bảng giá này là một trong những thiết kế thực dụng nhất trong danh sách của tôi. & NBSP; GitHub is a distributed version-control platform where users can collaborate on or adopt open source code projects, fork code, share ideas, and more. Their pricing page is quite well-designed and informative, which is a good thing. Their pricing structure is really reasonable for all customers. If you look above the pricing table, you’ll see the monthly/yearly pricing plans switch. They use the labeling trend of “most popular” by highlighting one specific plan to stand out from the rest. It’s a design choice that works well and encourages more signups for mid-tier plans over cheaper ones. With clean text, solid borders, and plenty of whitespaces, this pricing table is one of the most pragmatic designs on my list. GitHub is a distributed version-control platform where users can collaborate on or adopt open source code projects, fork code, share ideas, and more. Their pricing page is quite well-designed and informative, which is a good thing. Their pricing structure is really reasonable for all customers. If you look above the pricing table, you’ll see the monthly/yearly pricing plans switch. They use the labeling trend of “most popular” by highlighting one specific plan to stand out from the rest. It’s a design choice that works well and encourages more signups for mid-tier plans over cheaper ones. With clean text, solid borders, and plenty of whitespaces, this pricing table is one of the most pragmatic designs on my list.

Bộ sưu tập bảng giá (hơn 30 bảng giá)

1. Bảng định giá HTML CSS đơn giản:

Xem thiết kế thẻ định giá bút của Aniruddha Banerjee (@imanirudh2) trên Codepen.

Aniruddha Banerjee là nhà thiết kế của bảng giá này, được tạo ra bằng cách sử dụng HTML, CSS và JavaScript. Nó được cung cấp trong hai cấu hình khác nhau: hàng tháng và hàng năm. Có một sự phụ thuộc vào thư viện JS.

Xem mã

2. Bảng định giá bằng FlexBox:

Xem bảng giá bút của TechNext (@TechNext) trên CodePen.

Nó có một bảng định giá đáp ứng được tạo bằng HTML và CSS. Nó có sẵn trong ba kế hoạch giá khác nhau: cơ bản, cao cấp và cuối cùng. Cơ bản là giá cả phải chăng nhất. Tất cả các phạm vi giá được xác nhận hàng tháng. Nó có thể được tùy chỉnh để đáp ứng các yêu cầu cụ thể của bạn.HTML and CSS. It is available in three different pricing plans: Basic, Premium, and Ultimate. Basic is the most affordable. All of the price ranges are validated on a monthly basis. It can be customized to meet your specific requirements.HTML and CSS. It is available in three different pricing plans: Basic, Premium, and Ultimate. Basic is the most affordable. All of the price ranges are validated on a monthly basis. It can be customized to meet your specific requirements.

Xem mã

2. Bảng định giá bằng FlexBox:

Xem bảng giá bút của TechNext (@TechNext) trên CodePen.

Nó có một bảng định giá đáp ứng được tạo bằng HTML và CSS. Nó có sẵn trong ba kế hoạch giá khác nhau: cơ bản, cao cấp và cuối cùng. Cơ bản là giá cả phải chăng nhất. Tất cả các phạm vi giá được xác nhận hàng tháng. Nó có thể được tùy chỉnh để đáp ứng các yêu cầu cụ thể của bạn.HTML and CSS. It is available in three different pricing plans: Basic, Premium, and Ultimate. Basic is the most affordable. All of the price ranges are validated on a monthly basis. It can be customized to meet your specific requirements.stunning hover effect as well as a variety of pricing options to choose from. HTML Codex has created this beautiful pricing table for you.

Xem mã

2. Bảng định giá bằng FlexBox:

Xem thiết kế bảng giá bút - Ngày 21 của #30Day30Projects của Ishaan Sheikh (@Sheikh_ishaan) trên Codepen.

Có ba loại kế hoạch giá có sẵn trong thiết kế bảng giá này. Đầu tiên là miễn phí; Tất cả những gì bạn phải làm là đăng ký tài khoản mới. Thứ hai là Pro, có giá 10 đô la một tháng và thứ ba là kế hoạch doanh nghiệp. Bạn cũng có thể sửa đổi thông tin dựa trên yêu cầu của bạn. Nó được xây dựng với HTML và CSS. Ishaan Sheikh đã phát triển bảng giá này.

Xem mã