آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

استفاده از clear در after

 clear

سلام خدمت همراهان همیشگی مدرسه مجازی ایرانیان

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

اگر خاطرتون باشه برای استفاده از clear یه المنت html میذاشتیم و به اون کلاس clear میدادیم که اون کلاس شامل خصوصیات زیر میشد :

این کار رو انجام میدادیم که float هایی که به عناصر قبل دادیم خنثی بشه و تاثیری روی عناصر بعدی نداشته باشه. حالا ما میخوایم این کار رو حذف کنیم، به عبارتی html های اضافی رو حذف می کنیم و بهینه تر کار می کنیم.

برای این کار از شبه کلاس after استفاده می کنیم ، اولین نکته ای که باید خدمتتون عرض کنم اینه که clear روی عناصر block تاثیر گذار هست پس این خاصیت رو فراموش نکنید.

تصویر می کنیم html ما بصورت زیر هست :

با استایل :

ما به li ها float دادیم تا کنار هم قرار بگیرند حالا باید بعد از ul از clear استفاده کنیم تا paragraph  به مشکل برنخوره . خوب باید بگم که ما از  clear استفاده میکنیم اما نه بصورت  html ، اینکار رو از طریق css انجام میدیم:

همونطور که میدونید زمانی که از  after استفاده می کنید ، یک کلاس اضافه به عنصر میدید و به عنوان یه لایه مجزا محاسبه میشه. ما با after گفتیم بعد از ul یه کلاس تعریف کن که پارامترهای بالا رو داشته باشه، اول از همه  display:block تعریف می کنیم که اگر نباشه clear کار نمیکنه.

با اینکار شما بهینه کار میکنید و کد اضافه در html بکار نمیبرید ، بیشترین کاربردی هم که داره در li ها هست که نمیتونید بعد از هر li از عنصر دیگه ای برای clear استفاده کنید، به راحتی به li ها after با clear میدید و مشکل رو حل می کنید.

 

امیدوارم که این مقاله براتون مفید بوده باشه.

موفق و پاینده باشید

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

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

دیدگاه های مخاطبین

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

  • امیررضا

    با سلام و خسته نباشید
    بسیار مفید بود

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟