با استفاده از CSS شناور املاک برای طراحی صفحات وب صفحه
اموال CSS یک ویژگی بسیار مهم برای طرح است. این اجازه می دهد تا شما را به طراحی صفحات وب خود را دقیقا همانطور که می خواهید آنها را نمایش دهد، اما برای استفاده از آن شما باید بدانید که چگونه کار می کند.
در یک صفحه سبک، ویژگی شناور CSS به نظر می رسد به شرح زیر است:
راست. {شناور: راست؛ }
این به مرورگر می گوید که همه چیز با کلاس "حق" باید به سمت راست شناور شود.
شما آن را مانند این قرار می دهید:
class = "right" />
چه چیزی می تواند با ویژگی شناور CSS شناور باشد؟
شما نمیتوانید هر عنصر را در یک صفحه وب شناور کنید. شما فقط می توانید عناصر بلوک سطح شناور. اینها عناصری هستند که یک بلوک فضایی بر روی صفحه مانند تصویر ()، پاراگرافها ()، تقسیمات () و لیست () را میگیرند.
عناصر دیگر که روی متن تاثیر می گذارد، اما یک جعبه در صفحه ایجاد نمی کنند، عناصر درون خطی نامیده می شوند و نمی توانند شناور شوند. این عناصر مانند span ()، خطوط خط ()، تاکید قوی () یا کج () هستند.
کجا آنها شناورند؟
شما می توانید عناصر را به سمت راست یا چپ شناور کنید. هر عنصری که عنصر شناور را دنبال می کند، اطراف عنصر شناور در طرف دیگر جریان می یابد.
به عنوان مثال، اگر من یک تصویر را به سمت چپ شناور کنم، هر متن یا عناصر دیگری که زیر آن است، در اطراف آن به سمت راست حرکت می کند. و اگر من یک تصویر را به سمت راست بکشم، هر متن یا عناصر دیگری که زیر آن قرار دارد، در اطراف آن به سمت چپ حرکت می کند. یک تصویر که در یک بلوک متن قرار می گیرد بدون اینکه هیچ سبک شناور به آن اعمال شود، نمایش داده می شود، اما مرورگر برای نشان دادن تصاویر تنظیم شده است.
این معمولا با خط اول متن زیر نمایش داده شده در پایین تصویر است.
تا چه حد آنها شناور خواهند شد؟
عنصری که شناور شده است به همان اندازه که می تواند به سمت چپ یا راست عنصر کانتینر حرکت کند. این به چندین موقعیت مختلف بستگی دارد که چگونه کد شما نوشته شده است.
برای این مثال ها، یک عنصر کوچک DIV را به سمت چپ شناور می کنم:
- اگر عنصر شناور دارای یک عرض از پیش تعریف نشده باشد، صرف نظر از شناور، فضای افقی را به اندازه مورد نیاز و در دسترس قرار می دهد. توجه: بعضی از مرورگرها تلاش می کنند عناصر را در کنار عناصر شناور قرار دهند، وقتی که عرض تعریف نمی شود، معمولا عنصر غیر شناور تنها مقدار کمی از فضا را می دهد. بنابراین شما همیشه باید عرض را در عناصر شناور تعریف کنید .
- اگر عنصر محفظه عنصر HTML باشد، DIV شناور در سمت چپ صفحه نشسته است.
- اگر عنصر محفظه خود را با دیگری تنظیم کند، DIV شناور در حاشیه سمت چپ مخزن نشسته است.
- شما می توانید عناصر شناور را دراز بکشید، و این می تواند منجر به شناور شدن در جای جای تعجب شود. به عنوان مثال، این شناور DIV سمت چپ شناور در داخل یک DIV شناور راست است.
- عناصر شناور در کنار یکدیگر نشسته در صورتی که در ظرف وجود داشته باشد. به عنوان مثال، این ظرف دارای سه عنصر DIV عظیم 100 پیکسل است و در یک ظرف بزرگ 400 پیکسل قرار دارد.
شما حتی می توانید از شناورها برای ایجاد گالری گالری عکس استفاده کنید. شما هر تصویر بند انگشتی (در هر DIV با اندازه ی یکسان کار می کند) در DIV با عنوان و شناور عناصر DIV در ظرف.
مهم نیست که پنجره مرورگر چقدر گسترده است، ریز عکسها یکنواخت می شوند
خاموش شدن شناور
هنگامی که شما می دانید چگونه یک عنصر را به شناور ببرید، مهم است بدانید که چگونه شناور را خاموش کنید. شما شناور را با ویژگی روشن Clear CSS خاموش می کنید. شما می توانید شناورهای چپ، شناورهای راست یا هر دو را پاک کنید:
روشن: چپ؛
روشن: راست؛
روشن: هر دو؛
هر عنصری که ملک روشن آن را تنظیم می کنید در زیر یک عنصر که در آن مسیر شناور است ظاهر می شود. به عنوان مثال، در این مثال دو پاراگراف اول متن پاک نشده اند، اما سوم این است.
بازی با ارزش روشن از عناصر مختلف در اسناد خود را برای گرفتن اثرات طرح های مختلف.
یکی از جالبترین طرحهای شناور یک سری عکس از ستون سمت راست یا چپ کنار پاراگراف متن است. حتی اگر متن به اندازه کافی طول نکشید تا تصویر را بچرخاند، می توانید از تمام تصاویر برای پاک کردن آن در ستون به جای عکس قبلی استفاده کنید.
HTML (تکرار این پاراگراف):
در صورت عدم رعایت مقررات در زمان تحویل، Cupidatat غیر proident، ut labore و dolore magna aliqua.
CSS (برای جابجایی تصاویر به سمت چپ):
img.float {شناور: چپ؛
روشن: چپ؛
حاشیه: 5 پیکسل؛
}
و به سمت راست:
img.float {شناور: راست؛
روشن: راست؛
حاشیه: 5 پیکسل؛
}
با استفاده از شناورها برای طرح بندی
هنگامی که شما متوجه شدید که چگونه مالکیت شناور کار می کند، می توانید از آن برای استفاده از صفحات وب خود استفاده کنید. این ها مراحل ایجاد یک صفحه وب شناور را انجام می دهند:
- طراحی طرح (بر روی کاغذ یا یک ابزار گرافیکی یا در سر من).
- تعیین محل تقسیم صفحه را تعیین کنید.
- عرض عرض های مختلف ظروف و عناصر درون آنها را تعیین کنید.
- همه چیز را شناور. حتی عنصر کانتینر outermost به سمت چپ شناور شده است، بنابراین من می دانم که در آن نسبت به پورت نمایش مرورگر چه خواهد بود.
تا زمانی که شما می دانید عرض (درصد خوب است) بخش های طرح خود، شما می توانید از مالکیت شناور برای قرار دادن آنها در جایی که آنها در صفحه تعلق دارند استفاده کنید. و چیز خوبی است، شما مجبور نیستید تا حد زیادی در مورد مدل جعبه متفاوت برای اینترنت اکسپلورر یا فایرفاکس.