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

منوی افقی تقریبا هر سایت - آن بخش مهمی است، به عنوان آن را می توانید با ظاهر و قابلیت استفاده آن برای جذب و یا، برعکس، ترساندن و دور از بازدید کنندگان. بیایید یاد بگیرند که چگونه برای ایجاد یک منوی افقی ابتدایی: آن را "اسکلت" به HTML، به کارشناسی کارشناسی ارشد مهارت های اولیه از ایجاد. شما مطمئنا می تواند پیدا کردن یک منوی آماده، اما بسیار بهتر است برای یاد بگیرند که چگونه به خودتان آن را توسعه دهد. این بسیار سرگرم کننده است.

یاد بگیرید که چطور منوی

ما سعی می کنیم به انحراف از معانی، که پایبند به چهره های پیشرو در طرح است. در ابتدا شما باید به ایجاد یک "اسکلت" برای منوها ما به HTML، یادگیری مهارت های اساسی به افقی منوها خود را دارند. و سپس آن را تزئین، با استفاده از شیوه نامه. اجازه دهید منوی افقی ما شامل 5 مورد. اولین مورد خواهد شد به صفحه اصلی هدایت می شوید. نکته دوم - "درباره ما". سوم - "جوایز ما". چهارم - "این سرگرم کننده است." پنجم - "تماس با ما".

کد HTML مانند زیر است:

چه کسی نمی داند: برچسب UL برای استفاده گلوله، عناصر آن با لی آغاز خواهد شد. برچسب ها لی سبک که به UL اعمال ارث می برند.

UL - عنصر بلوک از لیست، از آن خواهد شد به عرض کشیده شده است. لی همچنین یک بلوک.

بنابراین، ایجاد یک فایل index.html. ما کد ما جمع آوری کند. در این مرحله، مرورگر نمایش عمودی به جای یک منوی افقی. اما ما با شما هدف - را به یک منوی افقی برای سایت. برای این کار ما نیاز CSS.

CSS چیست؟

اگر شما هنوز به کارشناسی کارشناسی ارشد توسعه سایت های، لازم است به با مفهوم شیوه نامه های آبشاری آشنا است. در واقع، این قوانین برای قالب بندی، پردازش، که به عناصر مختلف بر روی صفحات یک وب سایت اعمال می شود. اگر ما خواص عناصر در HTML استاندارد توصیف، شما باید این چندین بار تکرار کنید، شما یک تقلید از قطعات مشابه از کد دریافت کنید. صفحه زمان لود بر روی کامپیوتر کاربر رشد خواهد کرد. برای جلوگیری از این است، یک CSS وجود دارد. کافی است به توصیف تنها یک بار یک عنصر خاص، و سپس به سادگی نشان می دهد که در آن به استفاده از خواص یک سبک خاص است. این امکان وجود دارد را به شرح نه تنها متن از صفحه خود، بلکه در یک فایل دیگر. این اجازه خواهد داد به اعمال شرح سبک های مختلف در تمام صفحات از سایت. همچنین مناسب برای تغییر برخی از صفحات، تغییر CSS-فایل. ورق های سبک به شما اجازه کار با فونت در سطح بهتر از HTML، کمک به جلوگیری از بدتر شدن صفحات گرافیکی از سایت.

با استفاده از ورق های سبک برای توسعه منوی

CSS کد برای منو:

1. # My_1menu {سبک لیست: هیچ؛ بالشتک: 6؛ عرض: 800px است. از margin: auto؛}
2. # My_1menu لی {شناور: سمت چپ. فونت: با Arial 18px مورب؛}
3. # My_1menu یک {رنگ: # 756؛ صفحه نمایش: بلوک؛ ارتفاع: 55px در؛ خط ارتفاع: 55px در؛ بالشتک: روی 0px 15px 15px روی 0px؛ پس زمینه: #dfc؛ متن دکوراسیون: هیچ؛}
4. # My_1menu: شناور {رنگ: #foa؛ پس زمینه: # 788؛}

حالا اجازه دهید در نتیجه منوی CSS افقی است.

# My_1menu - بنابراین انتساب سبک برای عنصر UL- با id = my_1menu، سبک لیست وجود دارد: ندارد - این دستور برای حذف علامت سمت چپ توسط آیتم های برنامه ریزی.

عرض: 800px است - عرض منو ما 800 پیکسل است.

پوشش: 0 - این حذف بالشتک در داخل.

از margin: auto - vyravnivnie منوی افقی در مرکز صفحه ما است.

# My_1menu لی - اختصاص سبک لیتیوم عناصر.

ارتفاع: 55px در - ارتفاع منو.

# My_1menu: شناور - سبک به عنصر تعیین و ماوس هنگامی که آن را ناشی از.

ما نمی خواهد به تفصیل به شرح هر خط، به عنوان هر توسعه دهنده می تواند پارامترهای آن در اینجا مشخص کنید. این پایه ای برای استفاده از سبک های در منو در وب سایت. شما می توانید آن را یک ظاهر به پایان رسید تر و زیبا با استفاده از تصاویر به من بدهید. اختصاص عنصر، اما برای مثال، پس زمینه: آدرس (img1.png) تکرار x. اجازه دهید وجود داشته پس زمینه: آدرس (img2.png) تکرار x برای: شناور.

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