Tự Code Bảng Giá Hositng với HTML và CSS

0

Thông thường chúng ta có rất nhiều phương pháp khác nhau để thực hiện một Pricing Table. Nếu website của bạn sử dụng nền tảng WordPress hay Joomla thì đã có những Plugin khá hay để thực hiện điều này. Nhưng nếu bạn muốn tự Code cho riêng mình một bảng giá thì vấn đề này thực sự không khó.

Tự Code Bảng Giá Hositng với HTML và CSS Bảng Giá Hositng - Tự Code Bảng Giá Hositng với HTML và CSS
Tự Code Bảng Giá Hositng với HTML và CSS

Trong bài viết này tôi sẽ Demo một bảng giá dành cho các dịch vụ Hosting với 4 cột dành cho 4 gói khác nhau để khách hàng dễ dàng lựa chọn. Trong đó, chúng ta sẽ làm nổi bật một gói lên để gây sự chú ý.

Chúng ta sẽ bắt đầu bằng công việc tạo ra một bảng giá Hositng với đoạn Code HTML như sau:

<div id="pricing-table" class="clear">
    <div class="plan">
        <h3>Doanh Nghiệp<span>$59</span></h3>
        <a class="signup" href="#">Đăng Ký</a>         
        <ul>
            <li><b>10GB</b> Dung Lượng</li>
            <li><b>100GB</b> Băng Thông</li>
            <li><b>20</b> Tài Khoản Email</li>
			<li><b>Không giới hạn</b> subdomains</li>			
        </ul> 
    </div >
    <div class="plan" id="most-popular">
        <h3>Chuyên Nghiệp<span>$29</span></h3>
        <a class="signup" href="#">Đăng Ký</a>        
        <ul>
            <li><b>5GB</b> Dung Lượng</li>
            <li><b>50GB</b> Băng Thông</li>
            <li><b>10</b> Tài Khoản Email</li>
			<li><b>Không giới hạn</b> subdomains</li>			
        </ul>    
    </div>
    <div class="plan">
        <h3>Tiêu Chuẩn<span>$17</span></h3>
		<a class="signup" href="#">Đăng Ký</a>
        <ul>
            <li><b>3GB</b> Dung Lượng</li>
            <li><b>25GB</b> Băng Thông</li>
            <li><b>5</b> Tài Khoản Email</li>
			<li><b>Không giới hạn</b> subdomains</li>			
        </ul>
    </div>
    <div class="plan">
        <h3>Cơ Bản<span>$9</span></h3>
        <a class="signup" href="#">Đăng Ký</a>		
        <ul>
            <li><b>1GB</b> Dung Lượng</li>
            <li><b>10GB</b> Băng Thông</li>
            <li><b>2</b> Tài Khoản Email</li>
			<li><b>Không giới hạn</b> subdomains</li>			
        </ul>
    </div> 	
</div>

Ở bên trên tôi chỉ định cho các bảng này chỉ có một số thông tin như : Dung lượng, băng thông, email, supdomai. Nếu bạn muốn thêm vào các chức năng khác của gói Hosting thì có thể sử dụng tiếp trong thẻ <ul>.

Tiếp theo chúng ta sẽ sử dụng CSS để định dạng cho nó ra hồn:

body {
		background: #ffffff
	}
	
	#about {
		text-align: center;
		color: #fafafa;
		font: tahoma;
	}
	
	#about a {
		color: #777;
	}
	
	/* --------------- */
		
	#pricing-table {
		margin: 100px auto 50px auto;
		text-align: center;
		width: 892px; /* total computed width = 222 x 3 + 226 */
	}

	#pricing-table .plan {
		font: 12px 'tahoma', Arial;
		text-shadow: 0 1px rgba(255,255,255,.8);        
		background: #fff;      
		border: 1px solid #ddd;
		color: #333;
		padding: 20px;
		width: 180px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */      
		float: left;
		position: relative;
	}
	
	#pricing-table #most-popular {
		z-index: 2;
		top: -13px;
		border-width: 3px;
		padding: 30px 20px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
		-webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
		box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);    
	}

	#pricing-table .plan:nth-child(1) {
		-moz-border-radius: 5px 0 0 5px;
		-webkit-border-radius: 5px 0 0 5px;
		border-radius: 5px 0 0 5px;        
	}

	#pricing-table .plan:nth-child(4) {
		-moz-border-radius: 0 5px 5px 0;
		-webkit-border-radius: 0 5px 5px 0;
		border-radius: 0 5px 5px 0;        
	}
	
	/* --------------- */	

	#pricing-table h3 {
		font-size: 20px;
		font-weight: normal;
		padding: 20px;
		margin: -20px -20px 50px -20px;
		background-color: #eee;
		background-image: -moz-linear-gradient(#fff,#eee);
		background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));    
		background-image: -webkit-linear-gradient(#fff, #eee);
		background-image: -o-linear-gradient(#fff, #eee);
		background-image: -ms-linear-gradient(#fff, #eee);
		background-image: linear-gradient(#fff, #eee);
	}
	
	#pricing-table #most-popular h3 {
		background-color: #ddd;
		background-image: -moz-linear-gradient(#eee,#ddd);
		background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));    
		background-image: -webkit-linear-gradient(#eee, #ddd);
		background-image: -o-linear-gradient(#eee, #ddd);
		background-image: -ms-linear-gradient(#eee, #ddd);
		background-image: linear-gradient(#eee, #ddd);
		margin-top: -30px;
		padding-top: 30px;
		-moz-border-radius: 5px 5px 0 0;
		-webkit-border-radius: 5px 5px 0 0;
		border-radius: 5px 5px 0 0; 		
	}
	
	#pricing-table .plan:nth-child(1) h3 {
		-moz-border-radius: 5px 0 0 0;
		-webkit-border-radius: 5px 0 0 0;
		border-radius: 5px 0 0 0;       
	}

	#pricing-table .plan:nth-child(4) h3 {
		-moz-border-radius: 0 5px 0 0;
		-webkit-border-radius: 0 5px 0 0;
		border-radius: 0 5px 0 0;       
	}	

	#pricing-table h3 span {
		display: block;
		font: bold 25px/100px Georgia, Serif;
		color: #777;
		background: #fff;
		border: 5px solid #fff;
		height: 100px;
		width: 100px;
		margin: 10px auto -65px;
		-moz-border-radius: 100px;
		-webkit-border-radius: 100px;
		border-radius: 100px;
		-moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
		-webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
		box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
	}
	
	/* --------------- */

	#pricing-table ul {
		margin: 20px 0 0 0;
		padding: 0;
		list-style: none;
	}

	#pricing-table li {
		border-top: 1px solid #ddd;
		padding: 10px 0;
	}
	
	/* --------------- */
		
	#pricing-table .signup {
		position: relative;
		padding: 8px 20px;
		margin: 20px 0 0 0;  
		color: #fff;
		font: bold 14px Arial, Helvetica;
		text-transform: uppercase;
		text-decoration: none;
		display: inline-block;       
		background-color: #72ce3f;
		background-image: -moz-linear-gradient(#72ce3f, #62bc30);
		background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce3f), to(#62bc30));    
		background-image: -webkit-linear-gradient(#72ce3f, #62bc30);
		background-image: -o-linear-gradient(#72ce3f, #62bc30);
		background-image: -ms-linear-gradient(#72ce3f, #62bc30);
		background-image: linear-gradient(#72ce3f, #62bc30);
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;     
		text-shadow: 0 1px 0 rgba(0,0,0,.3);        
		-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
		-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
		box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
	}

	#pricing-table .signup:hover {
		background-color: #62bc30;
		background-image: -moz-linear-gradient(#62bc30, #72ce3f);
		background-image: -webkit-gradient(linear, left top, left bottom, from(#62bc30), to(#72ce3f));      
		background-image: -webkit-linear-gradient(#62bc30, #72ce3f);
		background-image: -o-linear-gradient(#62bc30, #72ce3f);
		background-image: -ms-linear-gradient(#62bc30, #72ce3f);
		background-image: linear-gradient(#62bc30, #72ce3f); 
	}

	#pricing-table .signup:active, #pricing-table .signup:focus {
		background: #62bc30;       
		top: 2px;
		-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
		-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
		box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset; 
	}
	
	/* --------------- */

	.clear:before, .clear:after {
	  content:"";
	  display:table
	}

	.clear:after {
	  clear:both
	}

	.clear	{
	  zoom:1
	}

Chỉ có nhiêu đó thôi. Ở đoạn CSS bên trên các bạn chỉ cần lưu ý đến thuộc tính background. Ở đây tôi sử dụng mã màu #ffffff để làm sáng nền cho phù hợp với nền mà site đang dùng. Nếu website của bạn sử dụng màu khác, hãy thay đổi cho phù hợp. Bên cạnh đó bạn cũng có thể sử dụng và thay đổi Font chữ, màu sắc trên table.

Ngay bây giờ chúng ta cùng Demo nào.

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.