ایجاد خطوط حاشیه (border) ضخیم، با کلاس های w3-topbar و w3-bottombar و w3-leftbar و w3-rightbar ، در W3.CSS
قبلا در کلید شماره 26170 شرح دادیم که کلاس w3-border در چارچوب W3.CSS ، برای ایجاد خطوط حاشیه (border) برای یک عنصر به کار می رود. اما خطوط حاشیه (border) ساخته شده توسط کلاس w3-border ، دارای ضخامت کمی هستند. در صورتیکه شاید ما به خطوط حاشیه (border) با ضخامت بیشتری نیاز داشته باشیم.
در چارچوب W3.CSS ، کلاس های w3-topbar و w3-bottombar و w3-leftbar و w3-rightbar برای ایجاد خطوط حاشیه (border) با ضخامت بیشتری به کار می روند (البته با یک ضخامت مشخص).
ضخامت خطوط حاشیه (border) ایجاد شده توسط این 4 کلاس (Class) دارای یک مقدار مشخص می باشند. اگر نیاز دارید که مقدار ضخامت خطوط حاشیه (border) را به صورت دقیق (با یک عدد) مشخص کنید، کلید شماره 26171 را بخوانید.
با توجه به اینکه هر یک از این 4 کلاس، برای رسم خطوط حاشیه (border) در یک طرف از عنصر می باشد، می توانیم تعیین کنیم که حاشیه خطوط (border) در 1 طرف یا 2 طرف یا 3 طرف یا هر 4 طرف عنصر، نمایش داده شوند (بستگی دارد که چند تا از این 4 کلاس را برای عنصر مورد نظر ذکر نماییم). اینکه هر کلاس مربوط به نمایش خطوط حاشیه (border) برای کدام جهت می باشد را می توانید بر اساس نام کلاس ها تشخیص دهید :
به مثال زیر توجه کنید :
در این مثال، تنها خطوط حاشیه (border) را برای سمت چپ عنصر رسم می کنیم.
بخش مهم کدها :
کلاس w3-leftbar برای ایجاد خطوط حاشیه (border) در سمت چپ عنصر به کار می رود.
کلاس w3-panel برای ساخت panel به کار می رود ( کلید شماره 26163 ).
کلاس w3-margin برای ایجاد حاشیه (margin) به اندازه 16px در همه جهت ها، می باشد (تا عنصر را بهتر ببینیم).
کلاس w3-border-blue تعیین می کند که رنگ خطوط حاشیه (border) برابر رنگ آبی (blue) باشد.
کلاس w3-pale-blue مشخص کرده است که رنگ پس زمینه عنصر برابر رنگ pale-blue باشد.
کد کامل صفحه HTML :
نتیجه :
در این مثال، خطوط حاشیه (border) را برای هر 4 طرف عنصر رسم می کنیم.
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
در این مثال، خطوط حاشیه (border) را برای 3 طرف از عنصر رسم می کنیم.
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
