عناصر شناور

دسته بندی :دسته‌بندی نشده 4 دسامبر 2022 علیرضا بابامرادی 451

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

پنجره مرورگر که بخش ها در یک مکان و اندازه ثابت باقی می مانند – اینطور نیست با پنجره مرورگر بزرگ یا کوچک شود. خوشبختانه راهی برای جلوگیری از این مشکلات وجود دارد.

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

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

فرمت ویژگی float بسیار ساده است:

float: position

مقدار موقعیت می تواند هیچ، چپ یا راست باشد.

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

بیایید آن را با مثال positiontest.html خود امتحان کنیم. شما یک div اضافه خواهید کرد عنصری برای استفاده به عنوان ظرف برای سه بخش میانی (nav، بخش، و کنار) در سند صفحه وب. این مراحل را دنبال کنید:

1. فایل positiontest.html اصلی را در ویرایشگر متن، ویرایشگر برنامه یا بسته IDE مورد علاقه خود باز کنید.

2. استایل های تعریف شده را طوری تغییر دهید که به شکل زیر درآیند:

<style>

header {

background-color: red;

margin: 0px;

padding: 10px;

height: 25px;

width: 100%

}

nav {

background-color: blue;

margin: 0px;

padding: 10px;

height: 125px;

width: 20%;

float: left;

}

section {

background-color: green;

margin: 0px;

padding: 10px;

height: 125px;

width: 55%;

float: left;

}

aside {

background-color: yellow;

margin: 0px;

padding: 10px;

height: 125px;

width: 20%;

float: right;

}

footer {

clear: both;

background-color: orange;

margin: 0px;

padding: 10px;

height: 25px;

width: 100%;

}

</style>

3. کد HTML را تغییر دهید تا یک عنصر والد div در اطراف ناو اضافه شود.

بخش و عناصر کناری آن کد باید به شکل زیر باشد:

<body>

<header><p>This is the header</p></header>

<nav><p>Navigation</p></nav>

<section><p>Section</p></section>

<aside><p>Aside</p></aside>

</div>

<footer><p>This is the footer</p></footer>

</body>

4. فایل positiontest.html به روز شده را به عنوان positiontest3.html ذخیره کنید.

5. وب سرور خود را راه اندازی کنید، مرورگر خود را باز کنید و به URL زیر بروید:

http://localhost:8080/positiontest2.html

6. مرورگر را ببندید و وب سرور را متوقف کنید.

ویژگی float در عناصر nav، section و side باعث می شود که آنها در عنصر div والد شناور شوند.

من به عنصر والد مقدار مشخصه id دادم ظرفی که به من کمک می کند هدفش را به خاطر بسپارم. لازم نیست که یک ویژگی id تعریف شده باشد زیرا به خودی خود استایل بندی نشده است. هر یک از بخش های داخلی تا زمانی که فضای کافی وجود داشته باشد در کنار هم ظاهر می شوند.

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

علیرضا بابامرادی

تاریخ عضویت:19 سپتامبر 2022

راه آسان‌تری برای ارتباط با کاربران‌مان پیدا کرده‌ایم :) عضویت در کانال

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

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

دیدگاهتان را بنویسید لغو پاسخ

لینک کوتاه:

عناصر شناور

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

دیدگاهتان را بنویسید لغو پاسخ

مزایای عضویت در سیگما:

نوشته‌های تازه

آخرین دیدگاه‌ها

دسته بندی مطالب

لینک های کمکی

خدمات اداری

خدمات تیم نهال آی تی

خدمات تیم نهال آی تی

نماد اعتماد الکترونیکی