آخرین نمونه کارها

نمایش همه
تبلیغات تبلیغات

عضویت در خبرنامه

تبلیغات

تبلیغات تبلیغات تبلیغات تبلیغات

آرشیو سایت

آموزش ایجاد جداول واکنشگرا

1 Star2 Stars3 Stars4 Stars5 Stars
Loading...

لیست های قیمت را امروزه در هر وب سایت تجاری مشاهده می کنیم ، اما در برخی دیگر از وب سایت ها شاهد جداول قیمت زیبایی هستیم که در یک نگاه اطلاعات بیشتری را منتق می کنند و شاید مشتری ها را به خرید کردن وسوسه کنند کاری که ممکن است با یک لیست قیمت کمتر ممکن باشد و تاثیر گذاری کمتری داشته باشد  نکته مهم دیگر نشان دادن این جداول به همه بازدید به طور یکسان و زیباست و بازدید کنندگانی که با موبایل یا گجت های دیگر هم از سایت شما دیدن می کنند از این قاعده مستثنی نیستند و قطعا باید برای آن ها هم برنامه ای داشته باشید ، امروز می خواهیم یک آموزش جامع و کاربردی در زمینه ایجاد جداول قیمت ریسپانیسو داشته باشیم ، آمزوش به اندازه کافی طولانی هست به این علت هم دیگه مقدمه رو طول نمی دم .

ایجاد طرح و ایده کلی :

برای شروع کار ما نیاز به یک طرح اولیه داریم تا بقیه قدم ها رو با توجه به اون پیش ببریم ، نیاز نیست خیلی طرح دقیقی داشته باشیم و همینکه محل المنت های صفحه رو برای ما مشخص کنه کافیه ، با این اوصاف من یک طرح اولیه آماده کردم که تصویرش رو می تونید در پایین ببینید .

css3-pricing-table-markup

همون طور که می بینید محل قرار گیری اجزای جدول رو کاملا مشخص کردم و به سادگی می تونیم از اون استفاده کنیم و بقیه مراحل رو جلو ببریم ، طراح شما هم می تونه همین باشه یا اینکه یه طرح دیگه برای خودتون ایجاد کنید .

کدهای پایه :

بعد از مشخص شدن طرح اولیه باید اون چیزی که در ذهن دارید رو کد کنید تا بعد از اون با استایل مورد نظرتون بهش رنگ و لعاب بدید ، اینجا ما از لیست های نامرتب استفاده می کنیم چون انعطاف پذیری و توانایی شخصی سازی بیشتری دارن و البته ریسپانسیو کردنشون راحت تر هست .

البته به خاطر اینکه می خوایم یک جدول ریسپانسیو ایجاد کنیم باید از یک متاتگ viewport هم در head قالبمون استفاده کنیم ، با این توضیحاتی که دادم کد رو به شکل زیر ایجاد می کنیم تا اسکلت بندی و بنای طرح ما ایجاد بشه .

کد بالا برای قسمت هد قالبتون هست و چون می خوایم ریسپانسیو باشه باید اون متاتگ رو اضافه کردم .

حالا نوبت به استایل دادن به بلوک های جدولمون هست که ایجاد کردیم . با توجه به کلاس هایی که در بالا به اچ تی ام ال مون دادیم این جا هم فراخوانی می کنیم و استایل می دیم ، یه استایل معمولی در نظر گرفتم که کدش هم پایین هست .

توی کد بالا ۷۵ درصد از عرض عنصر مادر رو به جدولمون اختصاص دادیم اما یه محدودیت ۸۰۰ پیکسلی هم برای نهایتش در نظر گرفتیم که توی عرض های بالا مشکل ایجاد نکنه .

حالا اگه با موبایل این فایل رو باز کنیم تصویری مشابه عکس زیر مشاهده می کنید .

css3-pricing-table-1x4

همون طور که می بینید اون استایل ۷۵ درصدی که دادیم به جدولمون مانع از چسبیدن عناصر به کنارهای صفحه نمایش شده و رنگ هایی هم که در استایل وارد کردیم کاملا اعمال شدن ، ۱۰ پیکسل هم فاصله بین جدول ها قرار دادیم که برخورد نکنن بهم ، نیازی هم نیست که بگم جدول رو اینجا دوباره تکرار کردیم تا شکل واضح تری داشته باشیم . تایتل و بقیه موارد هم که وسط چین شدن ، طبق چیزی که خواسته بودیم .

 

همون طور که می بینید اون استایل ۷۵ درصدی که دادیم به جدولمون مانع از چسبیدن عناصر به کنارهای صفحه نمایش شده و رنگ هایی هم که در استایل وارد کردیم کاملا اعمال شدن ، ۱۰ پیکسل هم فاصله بین جدول ها قرار دادیم که برخورد نکنن بهم ، نیازی هم نیست که بگم جدول رو اینجا دوباره تکرار کردیم تا شکل واضح تری داشته باشیم . تایتل و بقیه موارد هم که وسط چین شدن ، طبق چیزی که خواسته بودیم .

 

توی مرحله بعدی می خوایم استایل قسمت بالایی جدول ها یا هد رو وارد کنیم ، کدش ساده است و توضیح خاصی نداره و فقط از چند تا رنگ و اندازه تشکیل شده که به شکل زیر هست .

مرحله بعدی هم باید اون قسمت حدود یا برچسب ها رو وارد کنیم توی استایلمون وارد می کنیم .

توی کد بالا یه قسمت با کلاس price رو استایل دادیم و برای اون خصیصه display: table; هم قرار دادیم و برای فرزندش یعنی .price_figure استایل display: table-cell;  رو تعریف کردیم و رابطه عناصر مشخص شد ، عنصر با کلاس .price_figure به صورت یک نگه دارنده برای .price_number  عمل می کنه و محتوای .price_tenure هم در خط عمودی وسط چین میشن .

 

مرحله بعدی استایل دادن قسمت هایی مثل قیمت و یا به عبارت دیگه ویژگی هاست که استایل فوق العاده ساده اون نیازی به توضیح فکر نمی کنم داشته باشه .

 

مرحله بعد هم می تونیم استایل اون قسمت فوتری رو که ایجاد کردیم رو وارد کنیم و این هم خیلی سادس مثل بالایی .

اگر شما هم می خواهید وارد عرصه اینترنت شوید و یا می خواهید فعالیت خود را پر رنگ تر کنید پس با ما تماس بگیرید ، نگران نباشید ! فقط می خواهیم آشنا شویم :)