تبلیغات

درباره ما

بایگانی

آمار سایت

  • افراد آنلاین 1
  • بازدید امروز 15
  • بازدید دیروز 0
  • ورودی امروز از گوگل 0
  • ورودی دیروز از گوگل 0
  • بازدید این هفته 15
  • بازدید این ماه 27
  • بازدید این سال 285
  • بازدید کل 327
  • تعداد مطالب سایت 101
  • تعداد نظرات 0

شبکه های اجتماعی



با درود سرویس شما ملازمان عزیز که پیگیر یادگرفتن های در وب سایت عصر نوشتن میباشید . بابت وقفه ی طولانی که بین نصیب چهاردهم و پانزدهم تولید شد از شما بزرگواران پوزش می طلبیم و همت می‌کنیم تا پس از این , ادامه فراگیری ها با سرعت بیشتری در وبسایت قرار گیرد . در‌این نصیب از یادگرفتن پباده سازی وب‌سایت از اساس به بررسی پوزیشن‌ها در CSS میپردازیم . با ما همراه گردید .

خصوصیت های دیگر لایه ها برای ادغام بندی قالب


برای مخلوط بندی , صورت دادن و ساختن یک طرح CSS خط مش های اکثری موجود است که ما همت می‌کنیم راحت ترین و معمولی ترین شیوه را تعیین کنیم تا شما سریعتر ایده های تان را اجرا نمایید و به سود دلخواه دست یابید .

براین اساس از اسم بردن و توضیح تک تک خصوصیت های ساختاری CSS که کاربردهای مشابهی دارا هستند صرف لحاظ کرده و صرفا آنان که کاربرد بیشتری دارا‌هستند را با ذکر نمونه توضیح میدهیم .



توضیح اصلی : از‌آن‌جا‌که کدهای HTML و CSS به لهجه پارسی نیستند و در همگی جهان به صورت مشترک به لهجه انگلیسی به فعالیت می‌روند , ترجمه ی آنان به پارسی در یادگیری مخاطب خلل ساخت کرده و منجر کژ فهمی و نادرست در یادگیری خواهد شد .

بنابر این در‌پی این خصوصی آموزشی سعی در تفهیم کاربرد هر کد داریم و ترجمه واژه و کلمه به واژه و برگردان کلمه های هر فرمان از لهجه انگلیسی به لهجه پارسی مد نظرمان نخواهد بود .



درخصوص Absolute Position در CSS بیشتر بدانیم



Position ها ( پوزیشن به معنای طرز قرار گیری و حالت ) به هر لایه در CSS امر می دهند که برای مثال نسبت به لایه ی بالایی به مقدار 5 پیکسل و نسبت به لایه ی سمت راست 20 پیکسل مسافت بگیرند . براین اساس منزلت شان در ادغام قالب نسبت به لایه های دیگر معین می‌شود .

به‌دنبال به بررسی Absolute Position میپردازیم . در‌این مدل پوزیشن شما میتوانید هر لایه را به مناسب در موقعیتی از کاغذ قرار دهید سوای در لحاظ به دست آوردن منزلت لایه های دیگر . با استفاده از این Position می توان لایه ها را شناور کرد برای مثال دو یا این که یک‌سری لایه را روی لایه دیگر قرار اعطا کرد .

برای توضیح بیشتر یک جعبه زردرنگ به جعبه قرمز رنگ رنگی که در نصیب چهاردهم ساخت کردیم بیشتر می‌کنیم : ( پوشه متنی تصویر زیر در پایان مقاله برای دانلود بیان شده شده‌است )

پباده سازی وبسایت نصیب 15

در اینجا ما یک div با id , “ yellowblock ” را باطن div قرمز‌رنگ با id , “ redblock ” قرار داده ایم . برای شعور خوبتر رده این دو جعبه در برگه , مرورگرتان را تغییر‌و تحول سایز دهید و کوچک و بزرگ نمائید .

توصیه : شما میتوانید در‌این نشانی : اینجا با تغییر و تحول مقادیر top و left و کلیک روی آیتم “ See Result ” پوزیشن absolute را در برگه خوب تر شعور نمائید .

پس اکنون متوجه شدیم که هر گاه خواستیم لایه ای را به اصطلاح شناور کنیم و در جای خاصی از کاغذ در اختیار بگذاریم از پوزیشن absolute با مقادیر مناسب استفاده می‌کنیم .

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

پوزیشن Relative

با پوزیشن absolute اجزا نسب به کلی ورقه فضاگیر میشوند برای مثال به یک لایه امر می‌دهیم که از بالای ورقه 200 پیکسل مسافت بگیر .

ولی در پوزیشن relative لایه ها نسبت به لایه قبل مقعیت دهی می‌شوند . در اینجا یک نمونه را بررسی می‌کنیم .

این کدها را بین کلاس های پروژه تان قرار دهید . بین تگ ها : ( فولدر متنی تصویر زیر در پایان مقاله برای دانلود بیان شده شده‌است )

پباده سازی وبسایت نصیب 15

این کدها را بین تگ body قرار دهید : ( فولدر متنی تصویر زیر در پایان مقاله برای دانلود مطرح شده شده‌است )

پباده سازی تارنما نصیب 15

در بین سه پاراگراف ساخت شده , به پاراگراف میانه با کلاس “ nudged ” پوزیشن relative اختصاص دادیم . که سود را در تصویر سمت راست ذیل مشاهده میکنید .

تصویر سمت چپ مرتبط با همین سه پارا گراف است با این تفاوت که پوزیشن relative آن را حذف کرده ایم .

پباده سازی سایت نصیب 15

در سود به خیر مشاهده میکنید که پوزیشن relative به لایه فرمان می‌دهد تا موقعیتش را نسبت به لایه ی پیشین از خودش گزینش نماید .

[ امتیاز : ]