سلام برنامه | HiProgram

سلام برنامه امروز در خدمت شماست با آموزش ساخت جدول قیمت گذاری

آموزش ساخت جدول قیمت گذاری این امکان را می دهد که برای سایت خود پنل قیمت گذاری بسازید

جدولی که میسازیم کاملا رسپانسیو بوده و در مرورگر ها و دستگاه های مختلف به خوبی کار می کند

سایت هایی که خدماتی دارند که برای ارائه آن نیاز به جدول هست می توانند از این آموزش استفاده کنند

ما در ساخت این جدول فقط از html و  css استفاده کرده ایم

برای ساخت ابتدا کد های زیر را به ابتدای body اضافه کنید

<div class="columns">
  <ul class="price">
    <li class="header">پایه</li>
    <li class="grey">سالانه / ۱۰۰ تومان</li>
    <li>10GB Storage</li>
    <li>10 Emails</li>
    <li>10 Domains</li>
    <li>1GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">خرید / جزئیات</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header" style="background-color:#4CAF50">ویژه</li>
    <li class="grey">سالانه / ۱۰۰ تومان</li>
    <li>25GB Storage</li>
    <li>25 Emails</li>
    <li>25 Domains</li>
    <li>2GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">خرید / جزئیات</a></li>
  </ul>
</div>

<div class="columns">
  <ul class="price">
    <li class="header">پایه</li>
    <li class="grey">سالانه / ۱۰۰ تومان</li>
    <li>50GB Storage</li>
    <li>50 Emails</li>
    <li>50 Domains</li>
    <li>5GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">خرید / جزئیات</a></li>
  </ul>
</div>

سپس برای نمایش جلوه ها و استایل کد های زیر را به css اضافه کنید

* {
    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%;
    }
}

کار ساخت جدول قیمت گذاری تمام است

همچنین می توانید برای مشاهده جزئیات بیشتر ویدیو آموزش را همراه با سورس کد دریافت کنید

ویدیو آموزش در باکس دانلود زیر همین پست موجود است