آموزش ساخت عنصر ثابت با css | آموزش طراحی سایت
آموزشآموزش ساخت عنصر ثابت با css : ما در این مطلب از سایت آی وحید میخواهیم کمی از بحث های آموزش وردپرس دور شویم ، به همین خاطر برای شما آموزش ساخت عنصر ثابت با css آماده کردیم . با استفاده از این آموزش شما میتوانید یک عنصر ثابت رو به وسیله ی کدهای CSS تعریف و در سایتتون قرار بدید . پس با ما در ادامه مطلب برای دیدن آموزش همراه باشید .
آموزش ساخت عنصر ثابت با css
خصوصیت موقعیت در سی اس اس نوع موقعیت یک عنصر HTML در سایت رو تعریف میکنه ، اگر بخواهید موقعیت یک عنصر در صفحه همیشه به صورت ثابت باشه ( حتی در صورت اسکرول کردن ) ، شما میتوانید از یک موقعیت ثابت استفاده کنید .
در این آموزش من این کار رو به شما آموزش میدم :
گام اول : HTML
کد زیر رو به سایتتون اضافه کنید .
<div class="block">
در این قسمت هر متنی که میخواهید در بلاک قرار گیرد را وارد کنید .
</div>
ما خودمون برای نمونه متن Lorem Ipsum رو قرار دادیم تا تست رو انجام بدیم .
گام دوم : CSS
کد سی اس اس رو به صورت زیر تعریف کنید :
.block {
position: fixed;
}
اگر شما بخواهید میتونید اون رو سفارشی تر کنید ، ما برای تست از کدهای زیر استفاده کرده ایم تا بتونیم بلاک ثابتمون رو به صورت واضح تر به کاربران نمایش بدیم ، کد زیر رو نگاه کنید :
.block {
position: fixed;
background: #2184cd;
color: #fff;
padding: 20px;
width: 400px;
}
گام سوم : نتیجه نهایی
ما متن رو قرار دادیم و سایت هم به راحتی اون رو شناسایی کرد ، حتی با اسکرول کردن هم بلاک مربوطه هیچ تغییر موقعیتی نمیده !
تصویر زیر گویای نمونه ی کار ما هست :
آموزش ساخت عنصر ثابت با css
شما میتوانید این کد را در هر کجا که خواستید استفاده کنید و از آن لذت ببرید . ما در سایت آی وحید منتظر انتقادات و پیشنهادات شما عزیزان هستیم .
سلام وقت بخیر
من یه برنامه ای با HTML CSS نوشتم و میخوام قسمت فوتر با حرکت اسکرول ثابت بمونه برای header از position Fixed استفاده کردم اما برای فوتر نمیدونم چکار کنم، راهنمایی میکنید لطفا؟
سلام مچکر
شما میتونید با کتابخانه های جاوااسکریپت این کار رو راحت انجام بدین ولی اگر نمیخواین از کتاب خونه استفاده کنید میتونید از مقداری position Fixed و bottom:0 استفاده کنید.
خیلی ممنون مشکل بهم ریختگی کد های سایتم حل شد عااااااالی بود
با سلام
پست خوب و مفید مختصری بود.
همچهنین، پیشنهاد میکنم به جای استفاده از عکس برای نمایش نتیجه کد ها، کد رو در سایت های مثل کدپن قرار بدید، و خود نتیجه رو در سایتتون قرار بدید تا کاربر بتونه همزمان که نتیجه رو می بینه، روی همون کد تغییرات مورد نظرش رو اعمال کنه تا مفهوم کاملا واسش جا بیافته. شاید در تکه کد های کوچک، لزوم زیادی به این کار نباشه، اما در کدهای پیچیده تر، تفاوت زیادی در میزان دریافتی کاربر ایجاد میکنه.
موفق باشید.
سلام
شما میتونی توی گوگل سرچ کنی تست کد html اونجا نتیجه مورد نظرو نشون میده