<div class="pricing_table">
<ul>
<li>Cơ bản</li>
<li>20 000 VND/Tháng</li>
<li>Dung lượng 200MB</li>
<li>Băng thông 20GB</li>
<li>Sub domain 20</li>
<li>MySQL5 2</li>
<li>Park Domain 2</li>
<li>Addon Domain 2</li>
<li></li>
<li><a href="http://free.bendoi.vn/" class="buy_now">Mua ngay</a></li>
</ul>
<ul>
<li>Doanh nghiệp</li>
<li>50 000 VND/Tháng</li>
<li>Dung lượng 500MB</li>
<li>Băng thông 50GB</li>
<li>Sub domain 50</li>
<li>MySQL5 5</li>
<li>Park Domain 5</li>
<li>Addon Domain 5</li>
<li></li>
<li><a href="http://free.bendoi.vn/" class="buy_now">Mua ngay</a></li>
</ul>
<ul>
<li>Nâng cao</li>
<li>100 000 VND/Tháng</li>
<li>Dung lượng 1000MB</li>
<li>Băng thông 100GB</li>
<li>Sub domain 100</li>
<li>MySQL5 10</li>
<li>Park Domain 10</li>
<li>Addon Domain 10</li>
<li></li>
<li><a href="http://free.bendoi.vn/" class="buy_now">Mua ngay</a></li>
</ul>
</div>
.pricing_table {
border:1px solid #c4cbcc;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
outline:7px solid #f2f3f3;
float:left;
}
/*Tạo dáng cho các cột*/
.pricing_table ul {
list-style:none; /* Loại bỏ các bullet */
float:left; /* Float lists sang trái */
width:147px; /* Chiều rộng của mỗi cột */
margin:0;
border:1px solid #f2f3f3; /*Thêm một chút viền cho đẹp mắt^^ */
padding:5px;
text-align:center; /* Canh giữa cho văn bản */
background-color:#FFF; /* Màu nên trắng */
}
/*Hiệu ứng hover khi rê chuột vào bảng*/
.pricing_table ul:hover {
-webkit-transform: scale(1.1); /* Chuyển đổi cột với một quy mô là 1,1 -> làm tăng 10% kích thước ban đầu. */
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-moz-box-shadow:3px 5px 7px rgba(0,0,0,.7); /* Tạo bóng cho hộp */
-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.7);
box-shadow:3px 5px 7px rgba(0,0,0,.7);
cursor:pointer; /* Thay đổi hiệu ứng trỏ chuột */
}
/*Tạo dáng cho mỗi list (danh sách)*/
.pricing_table ul li {
border-bottom:1px dashed #cfd2d2;
padding:10px 0;
}
/*Tạo dáng cho các dòng*/
.pricing_table ul li:first-child { /* Hàng đầu tiên cần phải có phông chữ lớn hơn và được nhấn mạnh. */
font-size:18px;
font-weight:bold;
}
.pricing_table ul li:nth-child(2) { /* Trên hàng thứ hai, chúng ta cần một nền màu tối hơn. */
background:#fbfbfb;
}
.pricing_table ul li:nth-child(3) { /* Với hàng thứ 3, chúng ta cần một phông chữ nhỏ hơn nhưng được nhấn mạnh. */
font-size:12px;
font-weight:bold;
}
.pricing_table ul li:nth-child(n+4) { /* Với các hàng còn lại chúng ta cần phải thiết lập kích thước phông chữ là 14pixels. */
font-size:14px;
}
.pricing_table ul li:last-child a { /* Trên dòng cuối cùng, chúng ta sẽ để thêm một liên kết (ví dụ như nút submit chẳng hạn). */
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:1px solid #c4cbcc;
padding:10px;
margin:5px 0;
background: #B2D6AA; /* Old browsers */
background: -moz-linear-gradient(top, #B2D6AA 0%, #498742 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#B2D6AA), color-stop(100%,#498742)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #B2D6AA 0%,#498742 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #B2D6AA 0%,#498742 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #B2D6AA 0%,#498742 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B2D6AA', endColorstr='#498742',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #B2D6AA 0%,#498742 100%); /* W3C */
color:#000;
font-style:italic;
display:block;
}