روز 12: چیدمان ها و شناورها

Summarize this content to 400 words in Persian Lang

پیشرفت امروز

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

طرح‌بندی‌های مختلفی وجود دارد که توسعه‌دهندگان از آن استفاده می‌کنند، اما موارد رایج عبارتند از:

یک صفحه
دو صفحه
سه صفحه
طرح‌بندی‌های شبکه‌ای (به عنوان نمونه به وب‌سایت گالری عکس یا Pinterest فکر کنید)
چیدمان های بنایی (وب سایت های خبری این طرح ها را دوست دارند.

من دیده ام که برخی از توسعه دهندگان از این طرح برای سایت های نمونه کار خود استفاده می کنند)

برای ایجاد این طرح‌بندی‌ها، Skillcrush 3 تکنیکی را که توسعه‌دهندگان استفاده می‌کنند شناسایی می‌کند. یکی شناور است. شناور نحوه قرار دادن عناصر در یک ردیف است. شناور بودن می تواند مشکل باشد. زمانی که شروع به کار کردم برای من بود اما مکان خوبی برای شروع توسعه دهندگان جدید است.

بعدی Flexbox است. Flexbox به عنوان «سیستمی» تعریف می‌شود که به توسعه‌دهندگان اجازه می‌دهد ردیف‌ها یا ستون‌هایی را در داخل یک کانتینر برای ایجاد طرح‌بندی ایجاد کنند. Flexbox برای کدنویسان متوسط ​​خوب است. من در طول سفر برنامه نویسی خود کمی از Flexbox استفاده کرده ام، اما این چیزی است که باید در مورد آن بیشتر بیاموزم و با آن بازی کنم.

گزینه پیشرفته CSS Grid است. CSS Grid به توسعه دهندگان این امکان را می دهد که هم ردیف و هم ستون در یک ظرف ایجاد کنند. هنگامی که با CSS بسیار مطمئن شدید، این سیستم دیگری است که باید آن را امتحان کنید. من از CSS Grid کمی در پروژه ها استفاده کرده ام، اما نیاز به تمرین در استفاده از این سیستم بدون کمک آموزشی دارم.

این درس بر روی شناور تمرکز دارد، بنابراین زمان ویدیوی دوم فرا رسیده است. Adda برمی گردد تا نحوه استفاده از ویژگی float را در کد نشان دهد. ویژگی float یکی دیگر از ویژگی های CSS است که می توانید از آن برای قرار دادن عناصر در یک کانتینر استفاده کنید.

مقدار پیش‌فرض float هیچ است، اما می‌توانید مقدار را به چپ، راست یا ارث بری تنظیم کنید. مقدار ارثی به این معنی است که از مقدار شناور عنصر والد برای هر عنصر فرزند استفاده می کند. برای مثال به این کد نگاه کنید:

div {
  text-align: center;
  width: 400px;  
  height: 500px;  
  float: left;
}
main {
  background: #6cd092;
  height: 200px;
  width: 200px;
  float: inherit;
}
aside {
  background: #80b4d1;
  height: 200px;
  width: 200px;
  float: inherit;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما فقط می‌توانیم سلکتورهای اصلی و کناری را جداگانه شناور کنیم. با این حال، Skillcrush از مقدار ارثی استفاده می کند. اینها فرزندان تگ div هستند.

بنابراین آنها مقدار سمت چپ را از تگ div برای استفاده به ارث بردند. اگر Skillcrush می خواست آن مقدار شناور را برای تگ div تغییر دهد، مقادیر هر یک از فرزندان خود را نیز تغییر می داد. هنگام ایجاد طرح‌بندی، مدل جعبه را در نظر داشته باشید زیرا به شما کمک می‌کند موقعیت مناسب را پیدا کنید.

این ممکن است کاهش عرض عناصر فرزند تا 20 پیکسل یا تنظیم فضای بین عناصر با ویژگی margin-right به یکی از عناصر قبل از تنظیم عرض یکی از عناصر باشد. بستگی به این دارد که از چه طرحی استفاده می کنید. در هر صورت، شما می خواهید برای انجام برخی از ماشین حساب ها زمان بگذارید تا فاصله را درست به دست آورید.

Skillcrush یک نکته عالی برای توسعه دهندگان جدید در مورد نحوه اشکال زدایی شناورهای خود به اشتراک می گذارد. راز این است که از ویژگی outline برای عناصر جداگانه استفاده کنید یا انتخابگر جهانی را تنظیم کنید

. به این ترتیب می توانید محتوای جعبه را بدون نگرانی در مورد تغییر اندازه ظرف مشاهده کنید.

آزمون و فعالیت های کدنویسی

فقط دو سوال در مسابقه امروز را از دست دادید. من برای یکی از سوالات پرکن به جای margin-right حاشیه قرار دادم. در سوال آخر به جای 4 خطا فقط 3 خطا پیدا کردم.

اسکن کردن سؤالات تایپی را نسبتاً سخت می کند، بنابراین باید سرعتم را بیشتر کنم. امروز دو فعالیت کدنویسی انجام شد. پیکسل‌های من با کد راه‌حل یکسان نبود، اما با استفاده از تکنیک‌های Skillcrush که در درس مطرح شد، تمرین بیشتری انجام دادم. در طول آخرین فعالیت، کمی در اطراف عرض طرح‌بندی ستون‌ها بازی کردم تا ببینم با ایجاد طرح‌بندی چگونه کار می‌کند.

برنامه فردا

شناور کردن ممکن است هنوز کمی سخت باشد، بنابراین Skillcrush یک درس دیگر را برای فردا آماده کرده است. این یکی در مورد جریان اسناد و شناور است. این به معنای غواصی عمیق تر در مورد نحوه عملکرد جریان سند و نحوه عملکرد شناور است. سپس دانش آموزان با استفاده از ویژگی float تمرین بیشتری می کنند.

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

div {
  text-align: center;
  width: 400px;  
  height: 500px;  
  float: left;
}
main {
  background: #6cd092;
  height: 200px;
  width: 200px;
  float: inherit;
}
aside {
  background: #80b4d1;
  height: 200px;
  width: 200px;
  float: inherit;
}

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