بعد از چندین سال بالاخره ماژول‌های صفحه آرایی به مرور وارد دنیای وب و سی‌اس‌اس شدند و رویای طراحان وب به حقیقت پیوست. در این فصل با این ماژول‌ها بطور کامل آشنا می‌شویم.
آموزش صفحه آرایی با گرید (Grid)
گرید یک سیستم صفحه آرایی دو بعدی است که برای رفع مشکلات صفحه آرایی در طراحی واسط کاربری ساخته شده است.
آموزش صفحه آرایی (واکنشگرا)
هر وقت از من سوال می شد چطور و از کجا سی اس اس یاد بگیرم جوابم این بود که “اگر می گفتی فلان زبان رو می خوام یاد بگیرم جوابش راحت تر بود”. برای حل کردن موضوع این مشکل کارگاهی غیر حضوری را در نظر گرفتیم تا در آن کارآموز بتواند در یک دوره کوتاه بصورت تصویری موضوع صفحه آرایی را قدم به قدم فرا گرفته و تمرین های مشخص شده را حل کرده و بصورت مستقیم با مربی در تماس باشد.
clear
ویژگی clear بطور مستقیم با ویژگی float در ارتباط است. کار این ویژگی این است که اطراف عنصر شناور را پاکسازی کند تا عناصر دیگر به پایین عنصر شناور سقوط کنند. ویژگی float به دنیای وب معرفی شد تا بتوانیم طرحی شبیه به مجلات و روزنامه ها داشته باشیم. جایی که تصویری را به نمایش […]
float
ویژگی float از آن دسته از ویژگی هایی است که مکان عنصر را مشخص می کند. این ویژگی باعث می شود تا عنصر به سمت چپ یا راست عنصر نگهدارنده اش هول داده شده یا شناور شود. این ویژگی می تواند مقادیر زیر را داشته باشد: float: right; float: left; float: none; /* مقدار […]
box-sizing
از ویژگی box-sizing برای تغییر روش اندازه دهی به یک عنصر بر اساس مدل قسمت بندی آن استفاده می شود. هر عنصر از لحاظ مدل قسمت بندی دارای چهار ناحیه است که این نواحی شامل ناحیه محتوا (content-box), ناحیه فاصله داخلی (padding-box) و ناحیه حاشیه (border-box) و در نهایت ناحیه فاصله خارجی یا (margin-box) هستند. […]
صفحه آرایی با فلکس باکس ( Flexbox )
مقدمه در دنیای HTML و CSS که نمایش محتوی را به عهده دارند همیشه یک موضوع, سختی و پیچیدگی خاص خود را داشته و آن هم صفحه آرایی است. به عنوان مثال اگر شما بخواهید یک صفحه برای نمایش یک ستونی یا دو ستونی از عکس ها را داشته باشید با مشکل چندانی رو به رو […]