سبد (0)

طراحی نوار وضعیت حبابی(قسمت ششم)

در این قسمت از مقاله ی طراحی نوار وضعیت حبابی، قصد داریم آنچه تاکنون طراحی کرده ایم را در وسط صفحه ی نمایش قرار دهیم. برای انجام این کار، گام های زیر را دنبال کنید: 


گام شماره 1: 

برای وسط چین کردن آنچه که تاکنون طراحی کرده ایم، باید به کلاس green. استایل دهی کنیم، زیرا دایره ی سبز رنگ ما در داخل عنصر با کلاس green. قرار دارد. ابتدا قصد داریم از آنچه که در چهار مقاله ی اول آموختیم استفاده کنیم و به وسیله ی آنها دایره ی سبز رنگ را در داخل div با کلاس green. از لحاظ عمودی و افقی وسط چین کنیم. بنابراین ابتدا دستورات زیر را در داخل کلاس green. می نویسیم: 

مثال 1.1

.green {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
display: -webkit-box;
}

 تمامی دستورات بالا، درواقع یک دستور بیشتر نیستند. همه ی آنها معادل با دستور display:flex هستند، اما برای مرورگرهای متفاوت نوشته شده اند تا بتوان از قابلیت ظرف های انعطاف پذیر در آن مرورگرها نیز استفاده نمود. پس با استفاده از دستورات بالا، تعیین می کنیم که عنصر div که از کلاس green. استفاده می کند، یک ظرف انعطاف پذیر در نظر گرفته شود. (قبلا با مفهوم ظرف انعطاف پذیر آشنا شدید). 

 


گام شماره 2:

 حالا به کلاس green. کدهای قرمز رنگ  زیر را اضافه می کنیم: 

مثال 1.2

.green {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
display: -webkit-box;

width: 100%;
height: 350px;
border:1px solid red;

}

 با استفاده از کدهای قرمز رنگ بالا، ابتدا مقدار width از عنصر با کلاس green. را برابر با 100% قرار می دهیم. این کار باعث می شود که عرض عنصر div با کلاس green. به اندازه ی عرض عنصر والد خود، یعنی عنصر body در بیاید. 

حالا مقدار خصوصیت height (ارتفاع) برای این عنصر را برابر با مقدار 350 پیکسل قرار می دهیم. که می تواند به دلخواه شما بیشتر یا کمی کمتر نیز باشد. 

سپس برای اینکه بتوانیم تغییرات اعمال شده را مشاهده کنیم، با استفاده از ویژگی border، یک کادر به رنگ قرمز به دور عنصر div با کلاس green. ترسیم می کنیم. 


 گام شماره 3: 

 حالا برای اینکه مشخص کنیم که آیتم درون عنصر با کلاس green. ار لحاظ افقی و عمودی، در وسط قرار گیرد، دستورات آبی و نارنجی رنگ زیر را به کلاس green. اضافه می کنیم: 

مثال 1.3

.green {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
display: -webkit-box;

width: 100%;
height: 350px;
border:1px solid red;

-webkit-justify-content: center;
justify-content: center;

-webkit-align-items: center;
align-items: center;

}

 در کدهای بالا، دستورات آبی رنگ هردو یکی هستند، و تنها برای کار کردن در مرورگرهای مختلف این طور نوشته شده اند. همان طور که در مقالات ابتدایی این آموزش مطالعه کردید، دستور justify-content: center باعث می شود تا آیتم ما در داخل عنصر والد خود، به صورت افقی در وسط قرار گیرد. 

کدهای نشان داده شده به رنگ نارنجی نیز هر دو یکی هستند. همان طور که قبلا مطالعه نمودید، دستور align-items: center باعث می شود که آیتم ما در داخل عنصر والد خود، به صورت عمودی وسط چین شود. 


مشاهده ی نتیجه:

 در خودتان امتحان کنید زیر، نتیجه ی دستورات بالا را به طور کامل مشاهده می کنید: 

See the Pen 1.2.1نوار وضعیت حبابی by Ehsan Abbasi (@sbaloot) on CodePen.

 برای مشاهده ی این نتیجه به صورت تمام صفحه، اینجا کلیک کنید

 

آموزش صوتی JavaScript

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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