آموزش ساخت منو


در این وبلاگ چگونگی ساخت یک منوی ساده را به شما آموزش می‌دهیم

برای ساخت منوی زیر چه کدهایی را باید وارد کنیم:

همان طور که مشاهده می‌کنید داخل تگ‌های <link> و <a> یکسری کدهای دیگری نیز خرده است این کدها کدهای css هستند و در قسمت‌های بعدی به صورت مفصل توضیح خواهیم داد

پس تنها کدهای اصلی قسمت پیکر تگ‌های <link>,<a> هستند و دیکر کدهای وارد شده برای css هستند.

برای نزدیک‌تر کردن منویمان به تصویر اول باید از کدهای css استفاده کرد برای وارد کردن کدهای css از دو روش می‌توان استفاده کرد یکی اینکه کد هاا را در هر خط نوشت و یا اینکه در قسمت head تگ <style> باز کرده و کدهای css را در این تگ اعمال می‌کنیم که برای طراحی منوی بالا از این کدها استفاده می‌کنیم.

ابتدا کدهای قسمت <body> را در تگ <style > نوشته همان طور که می‌بینید ابتدا رنگ پس زمینه را انتخاب کرده و به ان کد رنگ مورد نطر خود را می‌دهیم. سپس padding را مشخص می‌کنیم این کد فاصله متن را از کادر ما تعیین می‌کند و کد بعدی جهت قرار گیری متن را مشخص می‌کند که ما ان رامرکز صفحه قرار دادیم و آخرین کدی که ما برای قسمت < < body اعمال می‌کنیم font-family است که فونت نوشتهٔ مارا تعیین می‌کند

حال بر روی شکل و رنگ عنوان کار می‌کنیم (تگ <h1>)

همان که در عکس نوشته شده ابتدا رنگ نوشته را تعیین کرده و در کد بعدی سایز نوشته را تعیین می‌کنیم.

در مرحلهٔ بعد برروی شکل گزینه‌های منو کار می‌کنیم

کد btn در اینجا برای بوجود آوردن دکمه است و پارامترهایی که برایان اعمال شده عبارت است از رنگ نوشته‌ها، پس زمینه نوشته‌ها (همان مستطیل سرمه‌ای رنگ)، سایز نوشته‌ها، چگونگی خط زیر نوشته‌ها که در اینجا none است و کد بعدی برای فاصلهٔ بین حروف است

در اینجا کدی اعمال شده است که زمانی که موس بر روی دکمهٔ ما برود دکمه تغییر رنگ بدهد و با کدهای

border: برای کادر در اطراف مربه که ما در اینجا none قرار داده

bachground: رنگ پس زمینه را مشخص می‌کنیم

padding: در اینجا ابعاد کادر سفید رنگ را مشخص می‌کند

color: این کد رنگ نوشته‌ها است زمانی که کادر سفید می‌شود

این کد برای قسمت فوتر سایت ما می‌باشد

font-size: این کد برای اندازهٔ حرووف است

Color: برای رنگ نوشته‌ها

Clear: برای ازبین بردن float های بالا

Display: نحوهٔ فرار گیری هر دیوی را تعیین می‌کند

letter-spacing: فاصلهٔ بین حروف

border: کادر اطراف نوشته

Padding: فاصله نوشته تا کادر بالا

text-decoration: شکل قرار گیری خط زیر نوشته‌ها

Width: عرض کادر ما

Margin: جای قرار گیری کادر در صفحه

margin-top: فاصله‌ای که این کادر تا نوار منو می‌گیرد

دسته بندی نشده

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *