چیدمان پاسخگو - میتالرن

مدرس Clarissa Peterson

انتشار 2018/10/24

مدت زمان 2h 32m

سطح متوسط

فایل تمرینی دارد

آموزش Responsive Layout

طراحی واکنشگرا مستلزم آن است که وب سایت ها با دستگاهی که در آن نمایش داده می شوند سازگار شوند. طرح‌بندی واکنش‌گرا بسیار کلیدی است، و HTML و CSS اکنون ویژگی‌هایی را ارائه می‌کنند که ایجاد طرح‌بندی‌هایی را که در طیف وسیعی از دستگاه‌ها و اندازه‌های صفحه به خوبی کار می‌کنند، آسان‌تر از همیشه می‌کنند. در این دوره، Clarissa Peterson اصول طراحی طرح‌بندی وب‌سایت واکنش‌گرا با آخرین استانداردها از جمله CSS Flexbox و Grid را پوشش می‌دهد. اصول اولیه را مرور کنید، مانند کار کردن با ویژگی های موقعیت و شناور برای تنظیم مکان عناصر روی صفحه، و نحوه استفاده از پرس و جوهای رسانه ای برای به روز رسانی فعال طرح خود را بیابید. سپس وارد CSS Grid شوید، از جمله تراز کردن و سفارش دادن آیتم‌ها در شبکه، و پیدا کردن کار کردن با ظروف flexbox. در نهایت، یاد بگیرید که یک طرح 12 ستونی بسازید که Grid و Flexbox را در یک طرح ترکیب می کند.

CSS Flexbox Front-end Development HTML Responsive Web Design

Introduction

Go cross-platform with responsive design ()

What you should know ()

1. Basic Page Structure

Viewport ()

Required CSS ()

Display property ()

Positioning ()

Floats ()

Units ()

2. Responsive Layout

Responsive design ()

Media queries ()

Flexbox and Grid ()

Accessibility ()

Browser support ()

3. Grid Layout

Intro to CSS Grid ()

Defining rows and columns ()

Grid gap ()

Sizing rows and columns ()

Placing grid items ()

Grid alignment overview ()

Aligning tracks ()

Aligning grid items within tracks ()

Aligning individual grid items ()

Variable columns ()

Grid template areas ()

Naming grid lines ()

Ordering grid items ()

Grid flow and implicit tracks ()

Challenge: The rainbow box ()

Solution: The rainbow box ()

4. Flexbox

Defining a flexbox container ()

Direction ()

Wrapping ()

Ordering flex items ()

Flexbox alignment overview ()

Aligning items on main axis ()

Aligning items on cross axis ()

Aligning lines on cross axis ()

Aligning individual flex items ()

Distributing space to flex items ()

Challenge: Floats to flexbox ()

Solution: Floats to flexbox ()

5. Layout Design

Centering content ()

3-column layout with grid areas, part 1 ()

3-column layout with grid areas, part 2 ()

3-column layout with flexbox ()

12-column layout setup ()

12-column layout for medium viewports ()

12-column layout for wide viewports ()

Conclusion

Next steps ()

Ex_Files_Responsive_Layout.zip (1.0 MB)

دانلود فایل فشرده

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

در حال به روزرسانی اطلاعات

درخواست لینک دانلود

در حال به روزرسانی اطلاعات

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

پسورد فایل‌های فشرده است.
لینک‌های آماده شده تا 8 روز پس از فعالسازی منقضی خواهند شد.
حجم فایل‌ها تخمینی هستند.
در صورتی که لینک دانلود تا 15دقیقه پس از درخواست آماده نشد، از بخش پشتیبانی پیگیری نمایید.