نحوه ساخت پنجره تنظیمات سیستم

ساختار HTML

اولین مرحله همیشه ایجاد ساختار HTML برای طرح مون هست. برای ایجاد این پنل تنظیمات به ساختار زیر نیاز داریم :

za

از کلاس box برای ایجاد مستطیل استفاده می کنیم. این div سه المنت فرزند داره که دو تا div با کلاس های title و subtitle هستند که برای نمایش عنوان و توضیحات پنل استفاده می شن و یه لیست هم داریم که برای نمایش آیتم های داخل پنل استفاده خواهد شد.

تا اینجا خروجی مون به این صورت هست :

ae

zw

کته ی مهمی که توی این دستورات هست خطوط ۳ تا ۶ هست که به منظور ایجاد یک Gradiant توی بک گراند استفاده می شن، این gradiant ها رو خیلی راحت می شه با محیط ویژوالی مثل این سایت ایجاد کرد.

در ادامه برای اینکه باکس دقیقا در وسط صفحه قرار بگیره از خطوط ۸ تا ۱۰ و خط ۱۴ استفاده کردیم. قبلا توی این مطلب در مورد وسط چین کردن عناصر کامل توضیح داده ام.

بعد از این مرحله خروجی به این صورت خواهد بود :

wifi