به احتمال خیلی زیاد در برخی وب سایت ها مشاهده کرده اید که یک باکس در یکی از گوشه های سایت ( معمولاً سمت چپ یا راست در پایین ) قرار گرفته است . به خاطر اینکه این باکس ها شناور هستند با جابجایی کاربر در بخش های مختلف صفحه همچنان در موقعیت خود که گوشه وب سایت است نمایش داده می شوند . مدیران وب سایت ها از این باکس ها برای ارائه پیشنهادی مانند مشاوره رایگان ، مشاوره قبل از خرید ، پشتیبانی و … به کاربران و مشتریان خود استفاده می کنند . در تصویر زیر خروجی کدهای این مقاله را مشاهده می کنید .

در این مطلب از کانی تمز می خواهیم به شما روش ایجاد این نوع باکس ها را به صورت بسیار ساده نشان دهیم .

ابتدا به کد های HTML برای ساختار این باکس نیاز داریم . از کد زیر استفاده کنید .

پس از ایجاد ساختار باید بوسیله کدهای css به ساختار کدهای بالا استایل دهی کنیم . برای اینکار از کدهای css زیر استفاده کنید .

اگر می خواهید موقعیت باکس را از راست به چپ ببرید کافیست مقدار right: 10px; را به left: 10px; تغییر دهید .

نتیجه اجرای کدهای بالا را در بخش زیر مشاهده می کنید . دقت داشته باشید که می توانید کدهای مورد نظر خود را با کلیک روی تب مربوطه در بخش زیر تغییر دهید و نتیجه را به صورت زنده مشاهده کنید و در نهایت کد مورد نظر را برای خود کپی کنید . به عنوان مثال برای تغییر رنگ بخش های مختلف روی تب CSS کلیک کنید و کدها را تغییر دهید .


1

پیشنهاد می کنیم برای دریافت آخرین مطالب کانال تلگرام کانی تمزرا دنبال کنید .