با سلام خدمت کاربران گرامی سایت پی وی لرن و آن دسته از کاربرانی که علاقمند به دوره آموزش 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-image به عنوان یک کلاس اصلی برای ایجاد گزینه های ویژه جهت نمایش تصاویر به صورت ریسپانسیو استفاده می شود.
به جدول زیر توجه نمایید:
شماره کلاس | توضیحات |
۱ | pure-img این کلاس یک استایل پایه و اصلی را به عنوان نمایش تصاویر بدون border به کار می برد. با استفاده از این این قابلیت تصاویر می توانند بدون تغییر کیفیت تغییر اندازه یابند. |
purecss_images.htm
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <html> <head> <title>The W3.CSS Images</title> <meta name = "viewport" content = "width=device-width, initial-scale=1"> <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css"> </head> <body> <h2>Images Demo</h2> <hr/> <div class = "pure-g"> <div class = "pure-u-1-4 pure-u-lg-1-8"> <img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5"> </div> <div class = "pure-u-1-4 pure-u-lg-1-8"> <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5"> </div> <div class = "pure-u-1-4 pure-u-lg-1-8"> <img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5"> </div> <div class = "pure-u-1-4 pure-u-lg-1-8"> <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5"> </div> <div class = "pure-u-1-4 pure-u-lg-1-8"> <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5"> </div> <div class = "pure-u-1-4 pure-u-lg-1-8"> <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5"> </div> <div class = "pure-u-1-4 pure-u-lg-1-8"> <img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5"> </div> <div class = "pure-u-1-4 pure-u-lg-1-8"> <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5"> </div> </div> </body> </html> |
نتیجه را تأیید کنید.
نتیجه به صورت تصویر زیر آشکار خواهد شد.
در این جلسه با آموزش کار با تصاویر در Pure CSS همراهتان بودیم.
در جلسه بعدی که آخرین جلسه از این دوره است به آموزش کار با آیکون ها در Pure CSS می پردازیم.
با پی وی لرن همراه باشید.