نمادها

شما اینجا هستید

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

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

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

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

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

ما در ساخت این جدول فقط از 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%;
    }
}

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

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

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

اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

اولین کسی باشید که رای میدهید


این مجموعه فایل rar است که برای باز کردن آن نیاز به نرم افزار Winrar می باشد

دانلود آموزش ساخت جدول قیمت گذاری و سورس کد ها : نوع فایل:rar/video/code حجم فایل:24.41 مگابایت

بعد از اکسترکت (extract) کردن فایل ها آن را با یک پلیر تصویری ببینید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.