campaign-edianeh-98

دوره مجازی طراحی وب (جلسه 13): ویژگی های CSS - قسمت سوم



visibility  
mode_comment   ۲۸

در این جلسه آموزش ویژگی های زبان CSS یا همون css3 properties رو خواهیم داشت . در این جلسه در مورد ویژگی های بسیار مهمی صحبت می کنیم که مربوط به تعین موقعیت و شناورسازی تگ ها در کنار هم هست . نکات مهمی هم در این رابطه خواهیم گفت :

عموم مطالبی که در این جلسه مطرح می شوند عبارتند از :

  • ویژگی position و کاربردهای آن
  • ویژگی top و کاربردهای آن
  • ویژگی left و کاربردهای آن
  • ویژگی bottom و کاربردهای آن
  • ویژگی right و کاربردهای آن
  • ویژگی float و کاربردهای آن
  • ویژگی clear و کاربردهای آن
  • ویژگی clip و کاربردهای آن
  • ویژگی display و کاربردهای آن
  • ویژگی height و کاربردهای آن
  • ویژگی width و کاربردهای آن
  • ویژگی visibility و کاربردهای آن
  • ویژگی vertical-align و کاربردهای آن
  • ویژگی line-height و کاربردهای آن
  • ویژگی direction و کاربردهای آن
  • ویژگی text-align و کاربردهای آن
info توجه

این مطلب یک جلسه از آموزش طراحی سایت حرفه ای می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش طراحی سایت حرفه ای

comment دیدگاه کاربران
Mahdi replyپاسخ

دارم دانلودش میکنم…
خیلی مشتاقم این قسمت رو هم ببینم… 😉

nader70 replyپاسخ

استاد آگه امکان داره حجم فایلها رو بنویسید تا از کامل دانلود شدن فایل مطمن باشیم

لقمان آوند

موقع شروع دانلود خود دانلود منیجر حجم رو بهتون میگه . اونو داشته باشید و با حجم فایل نهایی مقایسه کنید .
آخر ویدیو رو هم اگر درست ببینید یعنی درست دانلود شده …

mrzbluestar replyپاسخ

سلام
من جدیدا با نرم افزار های مدیریت دانلود نمیتونم فایل ها را دانلود کنم
زمانی که copy link address را میزنم صفحه سایت دانلود میشه به جای فایل!
با دو تا نرم افزار دانلود اسکلیتور و اوربیت این کار را کردم

وحید صالحی

سلان از نرم افزار internet download manager استفاده کنید…

لقمان آوند

سلام
برای دانلود باید حتما روی لینک موجود در سایت کلیک کنید و با کپی کردن آدرس فایل نمیشه دانلود کرد
اگر internet download manager داشته باشید بعد از کلیک رو لینک دانلگد در سایت خودش دانلودو شروع می کنه

دانشجو replyپاسخ

سلام استاد آوند عزیز و تشکر فراوان از زحمات بی دریغ شما

یه سوالی داشتم خواستم توی دوره دلایل و روشهای رفعش رو مطرح کنید گاهی توی بعضی قالبهای میبینی یه اسکرول افقی خیلی طولانی انتهای سایت میفته این علتش از چی میتونه باشه؟ چه خطاهایی در کدنویسی باعث چنین اسکرولی در سایت میشه و روش اصولی رفعش چی هست بیزحمت توی تدریستون در این مورد هم وقت کردید توضیحات بدید ممنونم

لقمان آوند

سلام
معمولا این مورد بدلیل وجود عنصری که عرضش از عرض صفحه نمایش بزرگتر باشه پیش میاد . یا عنصری که موقعیت اون رو خارج از عرض و پهنای صفحه نمایش قرار داده باشید !

مرتضی replyپاسخ

آوندجان عزیز،
استاد ممنون .
خوب بود:X

لقمان آوند

خواهش می کنم
موفق باشید

ervin replyپاسخ

ببخشید اشتباه شد
ویدیو جلسه 12 رو اصن دانلود نمیکنه

لقمان آوند

اونم تست شد و بدون مشکل دانلود میشه …

مهدی خسروی replyپاسخ

سلام استاد
خسته نباشید
میخواستم بدونم در position : relative مقدار
top : -50px
با
bottom : 50px
چه فرقی میکنه ؟
وقتی میتونیم فاصله از پایین رو برابر 50px قرار بدیم چرا باید فاصله بالا رو 50px- بگذاریم ؟

لقمان آوند

تقریبا فرقی نداره . چون مبدا top و left هست معمولا از این دو بیشتر استفاده میشه .

امین replyپاسخ

سلام
سوالی در مورد این جلسه ندارم عالی بود , فقط خواستم بگم در دقیقه 44 که اومدین از ویژگی box-sizing: border-box; استفاده کردین ولی باز هم با مجموع 100 درصد عرض width , سایدبار و کانتنت کنار هم نیومد دلیلش اینه که شما اومدین این ویژگی رو در .main .content و .main .footer قرار دادین که اگه این ویژگی باکس سایزینگ رو در .main .contentو .main .side (بجای فوتر) قرار بدین با مجموع 100 درصد عرض سایدبار و کانتنت کنار هم میان .

لقمان آوند

ممنون از نکته ای که گفتین.

Seyedali Zia replyپاسخ

سلام استاد من برای این که طول یک تصویر رو مطابق با پنجره مرورگر کنم از علامت درصد استفاده می کنم اما متاسفانه هیچ تغییری توی صفحه نمی بینم. کد رو به این شکل وارد می کنم :
<!–

–>
و در فایل سی اس اس :
#headerimage{
width: 100%;
}
با مشخصه های margin-right , margin-left هم موفق نشدم.
خواستم تصویر رو از طرف کدهای سی اس اس به عنوان پس زمینه لود کنم که توی این حالت هم حتی تصویر نمایش داده نمی شه.
کدهای من مشکل دار هستن یا ایراد از نرم افزاره؟!

وحید صالحی

فایل کدهاتون رو به بنده ایمیل کنید تا بررسی بشه

barati replyپاسخ

سلام استاد
برای کامنت کردن یک تکه کد در php storm چه کاری انجام میدادید ؟

لقمان آوند

ctrl + /
ctr + shift + /

itone

تشکر میکنم از دوست خوبم barati‏ ک این سوالو پرسیدن …
و سلام خدمت دوست خوبم اقا لقمان
استاد اوند ما در اکثر زبان های برنامه نویسی کامنت سینگل لاینی داریم (خودت ک بیشتر از من بلدی ::)) )اینجا توی css همچین ساختاری رو نداریم ؟؟؟
/**/
single line //
single line #
بازم تشکر واسه پاسخ گویی خوبتون و زحماتی ک میکشین … 😆

وحید صالحی

خیر نداریم مگر اینکه از پیش پردازنده های css مثل less و یا sass برای کدنویسی css استفاده کنید

itone replyپاسخ

سلام استاد اوند عزیز …
استاد تفاوت line-height
با vertical-align
چیه ؟؟؟
مثلا اگه بخایم یه عکسو تراز عمودیشو درست کنیم …. میتونیم از line -height استفاده کنیم و هم vertical-align فقط line-heightمقدار منفی نمیگیره ؟؟؟
کاربردشون و فهمیدم ولی نمیدونم کجا باید کدوماشونو استفاده کنم … 😳 🙁 🙁 🙁

وحید صالحی

line-height برای فاصله بین دوخط یا کلا خطوط متنی استفاده میشه و vertical-align برای تراز عمودی عناصر که نیاز به پراپرتی های مکمل در کنارش داره تا کار کنه مثل پراپرتی display

web master ayandeh replyپاسخ

سلام مهندس
خسته نباشید
من خواستم یه چیزی رو بگم که شما فکر کنم داخل فیلم حواستون نبودش (البته دارم جسارت میکنم )
در دقیقه حدودا 43 وقتی داشتین موقعیت float به سایدار و کانتنت میدادین اومدین درصد بکار بردین و باکس رو از نوع border-box قرار دادید ولی باز هم کنار هم قرار نگرفتن و فرمودید احتمالا بخاطر پدینگ و مارجین های دیفالت مرورگر هست
من دقت کردم در فیلم شما کد box-sizing: border-box; رو به دایو کانتنت دادید ولی به دایو سایدبارمون ندادید و بخاطر همین که دایو سایدبارمون نوع باکسش دیفالت مرورگر بود برای بوردر 2 پیکسل اضافه میکرد
به همین دلیل در یک راستا قرار نمیگرفتن و به خط بعد میرفتن

بازم جسارتمو ببخشید
موفق باشید

لقمان آوند

نه خواهش میکنم
بعضی وقتا موقع ضبط ممکنه تمرکز کافی رو نداشته باشیم و اینجور موارد پیش بیاد.
ممنون از ذکر این مورد

وحید صف آرا replyپاسخ


استاد دلیل اینکه باکس آبی رنگ دقیقا وسط صفحه نمیاد چیه؟!
چکار کنم که بیاد؟
در ضمن کد رو هر کاری کردم واستون درست آپلود نمیشه تو سایت .نمیدونم از طرف شما هم اینطوره یا نه

کیوان علی محمدی

سلام برای وسط قرار دادن در صفحه استایل اون المنت خاص رو باید با margin بالا و پایین با عددی مشخص قرار بدین و margin چپ و راست رو مقدار auto قرار بدین.

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.