آموزش طراحی قالب (فصل پنجم – جلسه سوم) : استایل دهی سرصفحه



visibility  
mode_comment   ۳۱

در جلسه قبلی از کدهای css قالب ، لوگو و آیکون شبکه های اجتماعی رو درست کردیم،

در این جلسه قسمت جستجو و منو را استایل دهی خواهیم کرد پس با ما همراه باشید :

فایل style.css را در ویرایشگر کد، و فایل index.html را در مرورگر باز کنید.

با توجه id قسمت جستجو کد زیر را در فایل style می نویسیم.

حال باید فرم را به پایین بکشیم، پس از خصوصیت margin-top استفاده می کنیم.

پس از اینکار به استایل دهی inputها می پردازیم، ابتدا برای برداشتن استایل پیشفرض کد زیر را می نویسیم.

حال استایل input text  رو می نویسیم.

 

info نکته :

حال شاید برای بعضی ها سوال پیش بیاد  که چرا مقدار box-shadow را به این صورت نوشته ایم؟

دلیل این است که ما دو سایه برای باکس جستجو داریم یکی داخل باکس، ودیگری خارج از آن

برای سایه خارجی از کد

سپس برای جدا کردن دو سایه از علامت (,) و سپس مکان سایه داخل باکس را با مقدار inset تعیین و سایه را ایجاد کرده ایم.

 

استایل input submit :

حال باید آیکون را وارد باکس جستجو کنیم، اما با margin اینکار شدنی نیست و هر چقدر آن را به سمت راست بکشیم، باکس جستجو نیز همراه با آن حرکت می کند. پس از خصوصیت position استفاده می کنیم.

ادامه کد :

اما هنوز خارج از باکس قرار دارد! پس باید کدهای html را دستکاری کنیم.

فایل index.html را با ویرایشگر کد باز کنید و به شکل زیر مکان تگ های input text  و input submit را عوض کنید :

اگر کد را ذخیره و index را در مرورگر اجرا کنید می بینید که آیکون جستجو وارد باکس شده است، حال کافیست که با استفاده از margin آن را تغییر مکان دهیم.

حال به استایل input text برگردید و با استفاده از margin آن را کمی یه سمت راست بکشید :

اگر دقت کرده باشید پس از این جابجایی ها مکان آیکون شبکه های اجتماعی نیز تغییر کرده است پس به استایل آن ها بر می گردیم و مقدار margin رو تغییر می دیم.

حال همه قسمت ها به درستی در مکان خود قرار گرفته اند. پس به سراغ قسمت بعدی یعنی منو می رویم :

استایل منو

منوی ما در قسمت header قرار گرفته است اما ارتفاع هدر ما 200px است که فقط تا قسمت جستجو را در بر می گیرد، حال باید ارتفاع آن را 50px ( 50px ارتفاع منو است) بیشتر کنیم تا قسمت منو نیز در header قرار بگیرد پس :

اگر style را ذخیره و مروگر را ریفرش کنید خواهید دید که ارتفاع بیشتر شده، و پس زمینه ای که برای header در نظر گرفته بودیم، تکرار شده است، اما چونکه پس زمینه منو متفاوت است از تکرار جلوگیری می کنیم  پس دوباره کد header رو توسعه می دیم :

Repeat-x باعث خواهد شد، پس زمینه به صورت عمودی تکرار شود.

درضمن 2px بخاطر سایه ی header کم کردیم. تا دیگر در پایین منو نمایش داده نشود.

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

حال باید عرض و ارتفاع و همینطور پس زمینه رو اضافه کنیم، پس کد رو به شکل زیر توسعه می دیم :

با استفاده از margin نیز مقداری منو رو به سمت پایین می کشیم تا در مکان خود قرار بگیرد. با استفاده از padding نیز مقداری گزینه های منو را از سمت راست فاصله میدهیم

حال نوبت آن رسیده تا که منو را از این شلوغی دربیاریم پس برای اینکار ابتدا با کد گزینه ها را در پشت سر هم در یک خط (inline) قرار می دهیم :

سپس میان ها با استفاده از margin فاصله می اندازیم، و برای اینکه بصورت افقی در وسط قرار بگیرند از line-height استفاده می کنیم.

حال به لینک ها استایل می دهیم :

حال از منو فقط آیکون صفحه اصلی مانده است که نیاز به تغییر استایل دارد، ابتدا فایل index.html رو در ویرایشگر کد باز کنید و اولین گزینه منو که همان صفحه اصلی است را به شکل زیر ویرایش کنید

به فایل style بر گردین و کد زیر رو اضافه کنید :

بسیار خب خسته نباشید، قسمت منو رو نیز به پایان رسوندیم، منتظر آموزش بعدی باشید.

اگر مشکلی براتون پیش اومده در قسمت نظرات مطرح کنید

comment دیدگاه کاربران
mhty

سلام و خدا قوت
من توی کدهای آخر این جلسه مشکل دارم. آیکنhome توی خروجی نشون نمیده.کدهایhtml و css ش رو هم درست نوشتم ولی اصلا تصویرم رو نشون نمیده.مشکل از کجاست؟
از آموزش های خوبتون هم ممنونم. خدا خیرتون بده.

سجاد دریس

سلام.
اگر دقیقا کدهاتون به همین شکل باشه، باید تصویر نشون داده بشه.
یکم بیشتر دقت کنید؛
اگرم مشکل رو یدا نکردید قالب رو واسم ارسال کنید.

سلام بر شما

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

meyti pugo

خسته نباشی داداش 😡

meyti pugo

و راستی نمیدونم چرا توی گوگل کروم full width شده سایت.. هرکارم کردم center نشد.. ولی توی فایرفاکس همه چیش حالت عادیه …
و اینکه برای منو من مجبور شدم کد رو به کمی تغییر به این شکل در بیارمم…
#menu {
height: 50px;
background: url(‘../img/menu-bg.png’);
margin-top: 79px;
padding-right: 30px;
width: 970px;
position: absolute;
}
چون width منو تا وسط بود و کل صوز مسیر رو پر نمیکرد..
margin-top هم که میبینی شما 8 قرار دادی من 79
این تفاوت ها برای چیه ؟؟ من در عجبم…

elyas ahmadi

ممنون از آموزش های خوبتون خدا خیرتون بده 🙂

rezad91

سلام جسته نباشید تو آموزشتون یک سری نکات ریز هست که باعث شده من توی طراحی قالبهام از شو استفاده کنم
فقط یه سوال مگر ما برای هر بخش از سایت یک id ندادیم و خاصیت id منحصر به فرد کردن اون تگه پس چرا توی فالیل css برای فراخوانی اون تگ بجای استفاده از #searchfr از این نوع فراخوانی #header .left #searchfrm استفاده میکنید دلیلش چیه؟

لقمان آوند

برای اینکه از خصوصیات پدر و فرزندی استفاده بشه در css به این شکل نوشته میشه . #header .left #searchfrm یعنی تگی که آیدی searchform داره و درون تگی هست که کلاس left رو داره که اون خودش درون تگی با آیدی header هست .

rezad91

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

لقمان آوند

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

ارسال نظرات

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

1 2