دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۱۹
  • خرداد

جلسه ۰۸ : آموزش کار با تصاویر در Pure CSS

  • دسته‌بندی‌ها :
جلسه ۰۸ : آموزش کار با تصاویر در Pure CSS
    • جزئیات
    • نوع محتواآموزشی

      مقدمه

      با سلام خدمت کاربران گرامی سایت پی وی لرن و آن دسته از کاربرانی که علاقمند به دوره آموزش Pure CSS هستند. در جلسه گذشته به آموزش طراحی جدول در Pure CSS پرداختیم و آموختیم که پنج کلاس در Pure CSS وجود دارد که به کمک آن ها می توان به طراحی جدول های مختلف در Pure CSS پرداخت. این کلاس ها عبارت بودند از : pure-table : این کلاس جدول پایه را نمایش می دهد که در آن padding ها، border  ها و header ها به صورت پیش فرض مشخص اند. pure-table-bordered : این کلاس مرز border  جدول ها و سطرهای آن را مشخص می نماید. pure-table-horizontal : این کلاس به تعیین خط های افقی می پردازد. pure-table-striped : این کلاس خطوط جدول را مشخص می نماید. و در نهایت کلاس pure-table-odd : که اگر این کلاس بر روی هر tr دیگر اعمال شود، پس زمینه سطر را تغییر می دهد و اثر zebra-styled را ایجاد می کند. در ادامه این دوره آموزش کار با تصاویر در Pure CSS را ارائه می نماییم.

      آموزش کار با تصاویر در Pure CSS

      در Pure CSS از pure-image به عنوان یک کلاس اصلی برای ایجاد گزینه های ویژه جهت نمایش تصاویر به صورت ریسپانسیو استفاده می شود.

      به جدول زیر توجه نمایید:

      شماره کلاستوضیحات
      ۱pure-img
      این کلاس یک استایل پایه و اصلی را به عنوان نمایش تصاویر بدون border به کار می برد.
      با استفاده از این این قابلیت تصاویر می توانند بدون تغییر کیفیت تغییر اندازه یابند.

      مثال

      purecss_images.htm

      مثال : 

      نتیجه

      نتیجه را تأیید کنید.
      نتیجه به صورت تصویر زیر آشکار خواهد شد.

       آموزش کار با تصاویر در Pure CSS

      آموزش کار با تصاویر در Pure CSS

      کلام آخر

      در این جلسه با  آموزش کار با تصاویر در Pure CSS همراهتان بودیم.
      در جلسه بعدی که آخرین جلسه از این دوره است به آموزش کار با آیکون ها در Pure CSS می پردازیم.
      با پی وی لرن همراه باشید.

      QR:  جلسه ۰۸ : آموزش کار با تصاویر در Pure CSS
      به اشتراک بگذارید