illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

20205 ۲۹ تیر ۹۲

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

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

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

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

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

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

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

 

نکته :

حال شاید برای بعضی ها سوال پیش بیاد  که چرا مقدار 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 بر گردین و کد زیر رو اضافه کنید :

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 31 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

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

    • ‏‏
      سجاد دریس(۱۵ شهریور ۱۳۹۲)

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

    • ‏‏
      سلام بر شما(۱۹ فروردین ۱۳۹۳)

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

  • ‏‏

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

  • ‏‏
    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(۲۰ دی ۱۳۹۲)

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

  • ‏‏

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

    • ‏‏
      لقمان آوند(۲۳ دی ۱۳۹۲)

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

      • ‏‏

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

        • ‏‏
          لقمان آوند(۲۴ دی ۱۳۹۲)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram