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

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

آموزش ساخت عنصر ثابت با 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

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

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

امتیاز شما در رابطه با این مقاله ؟
بدبدمعمولیخوبخیلی عالی
4 رای, 4٫25 از 5
Loading...

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

مشاهده مقاله من : درگاه های واسط پرداخت و مزایا نسبت به PSP

دیدگاه شما عزیزان
  • Ehsan Amiri
    11 فروردین 1395

    با سلام

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

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

    موفق باشید.

  • negin
    15 تیر 1398

    خیلی ممنون مشکل بهم ریختگی کد های سایتم حل شد عااااااالی بود

کادر ارسال دیدگاه شما کاربر عزیز

iwmf