آموزش ساخت عنصر ثابت با css | آموزش طراحی سایت

  • ۱۱ فروردین ۱۳۹۵
  • 616 نفر
  • یک دیدگاه
  • مجید عابد
 
1 Star2 Stars3 Stars4 Stars5 Stars

آموزش ساخت عنصر ثابت با css

آموزش ساخت عنصر ثابت با css : ما در این مطلب از سایت آی وحید میخواهیم کمی از بحث های آموزش وردپرس دور شویم ، به همین خاطر برای شما آموزش ساخت عنصر ثابت با css آماده کردیم . با استفاده از این آموزش شما میتوانید یک عنصر ثابت رو به وسیله ی کدهای CSS تعریف و در سایتتون قرار بدید . پس با ما در ادامه مطلب برای دیدن آموزش همراه باشید .

 

آموزش ساخت عنصر ثابت با css

آموزش ساخت عنصر ثابت با css

آموزش ساخت عنصر ثابت با css

خصوصیت موقعیت در سی اس اس نوع موقعیت یک عنصر HTML در سایت رو تعریف میکنه ، اگر بخواهید موقعیت یک عنصر در صفحه همیشه به صورت ثابت باشه ( حتی در صورت اسکرول کردن ) ، شما میتوانید از یک موقعیت ثابت استفاده کنید .

در این آموزش من این کار رو به شما آموزش میدم :

گام اول : HTML

کد زیر رو به سایتتون اضافه کنید .

 

ما خودمون برای نمونه متن Lorem Ipsum رو قرار دادیم تا تست رو انجام بدیم .

گام دوم : CSS

کد سی اس اس رو به صورت زیر تعریف کنید :

اگر شما بخواهید میتونید اون رو سفارشی تر کنید ، ما برای تست از کدهای زیر استفاده کرده ایم تا بتونیم بلاک ثابتمون رو به صورت واضح تر به کاربران نمایش بدیم ، کد زیر رو نگاه کنید :

گام سوم : نتیجه نهایی

ما متن رو قرار دادیم و سایت هم به راحتی اون رو شناسایی کرد ، حتی با اسکرول کردن هم بلاک مربوطه هیچ تغییر موقعیتی نمیده !

تصویر زیر گویای نمونه ی کار ما هست :

آموزش ساخت عنصر ثابت با css

آموزش ساخت عنصر ثابت با css

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

 
Ehsan Amiri ۱۱/۰۱/۱۳۹۵ پاسخ دهید

با سلام

پست خوب و مفید مختصری بود.

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

موفق باشید.

تارنما سازان وب پارس درگاه پرداخت واسط پی پکس لول رنگ - پالت رنگ های مورد تایید آی وحید تاتسی | tutsi فروشگاه قالب اختصاصی تمی

FB google plus