اول از همه این تصویر رو می ذارم که تفاوت margin , padding , content , border رو درک کنین.
چند تا نکته مهم
در تمرین ها سعی کنین با استفاده از اسم تگ یا یک کلاس از استایل های مشترک فاکتور بگیرید.
هر رنگی یک کلاس داشته باشد مثل color1 یا color-red ، نام گذاری را هرجور که دوست دارید انجام بدهید.
در یک کلاس طول و عرض رو همزمان با رنگ استایل دهی نکنید، اندازه و شکل از رنگ بایستی جدا باشد.
حتما برای مقدار دهی به طول و عرض از VW و VH استفاده کنید.
به فرمول زیر هم توجه کنید وقتی که صفحه اسکرول داره ، من در تمرین به شما میگم این صفحه بایستی اسکرول داشته باشد یا خیر.
VW = 100% + (scroll-width) ;
اگر جایی دیدین یه باکسی ۲ برابر باکس دیگر عرض دارد بهتره کلاس ها رو اینجوری تعریف کنید. width1x width2x
یا اگر جایی دیدین یه باکسی ۳ برابر باکس دیگر عرض دارد بهتر است کلاس ها را اینجوری تعریف کنید. width1x width3x
این برای ارتفاع هم صادق هست، اینجوری خوانایی پروژه بیشتر هم بیشتر می شود.
تمرین اول
این مثال را با ۴ تا div درست کنین، به هر div یه کلاس بدین
فقط ۴ تا کلاس header , content , sidebar , footer بدین
استایل های مشترک رو فاکتور بگیرید
ارتفاع هدر و فوتر ۱۵ درصد ارتفاع صفحه باشه
ارتفاع باکس های زرد و سبز وسط ۷۰ درصد ارتفاع صفحه باشه
عرض باکس هدر و فوتر کامل مرورگر رو پر کنه
عرض قسمت زرد ۸۰ درصد و عرض قسمت سبز ۲۰ درصد باشه
طرح بایستی ریسپانسیو باشه
تمرین دوم
این مثال رو شبیه مثال قبل حل کنید.
با این تفاوت که دو باکس وسطی استایل های مشترک دارند دقت کنید.
سه باکس پائینی هم استایل مشترک دارند دقت کنید.
این پروژه رو بایستی با ۶ تا div حل کنید
تمرین سوم
در این تصویر دقت کنین همه عرض ها یکسان هستند
ولی دو نوع ارتفاع داریم
دو نوع رنگ داریم
این پروژه رو بایستی با ۹ تا div حل کنید.
تمرین چهارم
این تمرین خیلی تمرین جالبی ه
چند تا چیز در بین تمام باکس ها مشترک هست از این ها فاکتور بگیرید
اندازه مارجین بالا و پائین هر باکس باید یک اندازه باشد. (راهنمایی مارجین ها را با VW مقدار دهید کنید)
باکس بنفش بالا ۲۰ درصد ارتفاع صفحه را اشغال کند
باکس های پائین که استایل مشترک دارند هم ۸۰ درصد ارتفاع صفحه را شامل بشوند.
فقط موقع استفاده از CALC به چند تا نکته دقت کنید.
تمرین پنجم
دقیقا مشابه مثال بالا
اون چیزهایی که در استایل ها مشترک هست رو فاکتور بگیرید
تمام مارجین ها یه اندازه باشند
به اندازه و رنگ متن ها وقت کنید
تمرین ششم
باکس ۱ - ۳ - ۴ - ۶ اندازه ها ۲۵ درصد بشه
باکس ۲ - ۵ هم اندازه ۵۰ درصد صفحه باشد
ارتفاع های همه باکس ها هم مثل هم باشند.
تمرین هفتم
این هم مثل تمرین بالاست فقط یه باکس هایی مارجین ندارند و بایستی بچسبند به کنار مرورگر
مثلا باکس های بالایی مارجین top ندارند
باکس های سمت راست مارجین right ندارند
باکس های سمت چپی مارجین left ندارند
باکس های پائینی مارجین bottom ندارند
ولی فاصله بین باکس ها باید هم اندازه باشند
تمرین هشتم
سه تا ستون سمت راست هر کدام ۱۵ درصد و ستون سمت چپ ۵۵ درصد باشد.
فاصله باکس ها و مارجین ها یکسان باشند
تمام باکس های کناری به صفحه مرورگر چسبیده اند و مارجین ندارند
در این مثال ما دو نوع عرض و دو نوع طول داریم.
تمرین هشتم
این مثال رو عرضی حل نکنین
ستونی حل کنین
۶ تا div بذارید که هم عرض هم باشند و نماینده هر ستون
هر باکس رنگی هم یک div هست
این پروژه خوراک فاکتور گرفتن از اشتراک هاست
در این مثال از روش نام گذاری height1x -- height2x و ... حتما استفاده کنید
باکس های رنگی رو میتونین در سه ارتفاع تعریف کنین ارتفاع به اندازه ۱ به اندازه ۲ و به اندازه ۳ اینجوری پروژه راحت تر میشه
اندازه ۱ یعنی ۱۰ درصد، اندازه ۲ یعنی ۲۰ درصد، اندازه ۳ یعنی ۳۰ درصد
تمرین نهم
این مثال پیچیده تری ه
بایستی از باکس های متعدد استفاده کنید و داخل این باکس ها باکس های دیگه تعریف کنید
تمرین دهم
اینم تمرین زیبایی ه
هرکدام از باکس ها خودش یه تمرین هست
اینجوری شما ۹ تا تمرین دارید.
تمرین یازدهم
هیچ کدام از تمرین های بالا اسکرول قرار نیست بخورند
ولی این تمرین اسکرول دارد پس حواستون باشه VW با ۱۰۰% برابر نیست و مقدار اسکرول که تقریبا ۲۰ پیکسل هست رو بایستی از vw حذف کنین
افزودن دیدگاه جدید