• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

ترفندهای حرفه ای CSS ProTips (جلسه 3) : Vertically Center و جدا کردن لیست با کاما

0 182 ۲ آذر ۹۵

در این مطلب با ادامه ترفندهای حرفه ای CSS ProTips در خدمتتون هستیم.css protips

وسط چین کردن المنتها از نظر عمودی

این کار شاید بنظر سخت برسه ولی در عمل خیلی سخت هم نیس و این کار رو میتونین به آسونی انجام بدین و هر المنتی رو بصورت وسط چین در بیارید. کد زیر رو در نظر بگیرید:

همونطور که دیدید با استفاده از ویژگی ها و خصوصیات Flexbox کاری کردیم که محتویات درون body بصورت وسط چین قرار داده بشن. همونطور که دیدید برای اینکار در ابتدا display رو برابر با flex قرار میدیم. Vendor Prefix ها رو برای پشتیبانی بیشتر قرار میدیم. ترازبندی ها رو هم center یا مرکز قرار دادیم. برای نمونه میتونین این مثال رو ببینید تا بیشتر با اون آشنا بشید. اگر دلتون میخاد که یه جایی باشه که بتونین با استفاده از اون هر المنتی رو در هر جایی و هر شرایطی، چه افقی و چه عمودی، وسط چین کنید به این آدرس برید و متناسب با نیازتون، کدهای مورد نظر رو کپی کرده و استفاده کنید. وقتی وارد این آدرس میشید چنتا گزینه بصورت Breadcrumb در اختیارتون قرار میگیره که با کلیک بر روی هر کدام، زیرگزینه های اون نمایش داده میشه. میتونین مشخص کنید که میخاید عمودی، افقی یا هر دوی اونا رو وسط بزارید. بعد از انتخاب این موارد، سوالهای دیگه ای هم پرسیده میشه و در نهایت با توجه به شرایط شما، یک کد در اختیارتون قرار داده میشه که میتونین از اونا در سایت خودتون استفاده کنید. با استفاده از این آموزش میتونین هر چیزی رو در مرکز قرار بدین. مثلا فرض کنید میخایم یک المنت Block-level رو بصورت عمودی و با استفاده از Flexbox در مرکز قرار بدیم. برای اینکار بصورت زیر عمل میکنیم:center every thing

Flexbox مشکلاتی هم در مرورگر IE11 داره که میتونین در اینجا بیشتر در مورد اون مطالعه کنید.

جدا کردن لیست با کاما با استفاده از CSS

شما میتونین با استفاده از این روش لیستهاتون رو با استفاده از کاما یا , یا هر چیز دیگه ای از هم جدا کنید و دیگه نیاز نیس که درون HTML اینکارو انجام بدین. همه این کارها با CSS خالی انجام خواهد شد. کدهای زیر رو در نظر بگیرید:

همونطور که دیدید با استفاده از کد بالا گفتیم که همه li هایی که درون ul وجود داره بجز li آخر، یک کلاس کاذب After براشون در نظر گرفته بشه و درون ویژگی content اونا , یا کاما قرار بگیره. با اینکار بعد از هر li یک کاما قرار میگیره و لیستتون به زیبایی با اون جدا جدا میشه. این روش علاوه بر مزایا و راحتی که داره، مشکلاتی رو هم داره. یکی از مشکلاتی که این روش داره اینه که برای موضوع Accessibility و Screen Reader ها مناسب و بهینه نیست. مشکل بعدی این که محتوایی که با استفاده از CSS قرار داده می شود، قابلیت Copy و Paste شدن را ندارد.

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

امیدوارم از این جلسه خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram