جعل القائمة الأفقية للموقع نفسك

القائمة الأفقية لديهم أي موقع تقريبا - هو جزء مهم، كما أنه يمكن مع مظهره وسهولة الاستخدام لجذب أو، على العكس، اخافة الزوار. دعونا نتعلم كيفية إنشاء قائمة أفقية الابتدائية: جعله "هيكل عظمي" لHTML، لإتقان المهارات الأساسية للخلق. أنت بالتأكيد يمكن العثور على القائمة جاهزة، ولكن أجمل من ذلك بكثير لمعرفة كيفية تطوير ذلك بنفسك. انها متعة جميلة.

تعلم كيفية جعل القائمة

نحن لا نحاول أن تحيد عن معاني الكلمات، التي تنضم إلى شخصيات بارزة من التخطيط. أولا لديك لتقديم "هيكل عظمي" لالقوائم جهدنا لHTML، وتعلم المهارات الأساسية لجعل القوائم الأفقية الخاصة بهم. وبعد ذلك سيتم تزيين، وذلك باستخدام أوراق الأنماط. دعونا القائمة الأفقية لدينا يحتوي على 5 عناصر. سيتم إعادة توجيه العنصر الأول إلى الصفحة الرئيسية. النقطة الثانية - "من نحن". الثالث - "لدينا الجوائز". الرابع - "إنه لأمر ممتع". خامسا - "اتصل بنا".

HTML رمز يشبه هذا:

الذي لا يعرف: يستخدم العلامة UL لل رصاصة، تبدأ عناصرها مع لى. علامات لي ترث الأنماط التي يتم تطبيقها على المجاهدين.

المجاهدين - عنصر كتلة من القائمة، فإنه سوف تمتد إلى العرض. لى هو أيضا كتلة.

لذلك، إنشاء index.html و. نقوم بجمع متاحة لدينا. في هذه المرحلة، والمتصفح يعرض عمودي بدلا من القائمة الأفقية. ولكن نحن معك الهدف - لجعل القائمة الأفقية للموقع. لهذا نحن بحاجة CSS.

ما هي تقنية CSS؟

إذا لديك حتى الآن لإتقان تطوير المواقع، لا بد من التعرف على مفهوم صفحات الطرز المتراصة. في الواقع، هذه هي قواعد التنسيق والتجهيز والتي يتم تطبيقها على عناصر مختلفة على صفحات الموقع على شبكة الانترنت. إذا وصفنا خصائص عناصر HTML القياسية، سيكون لديك لتكرار ذلك عدة مرات، وتحصل على الازدواجية في نفس قطعة من التعليمات البرمجية. سوف وقت تحميل الصفحة على جهاز الكمبيوتر الخاص بالمستخدم تنمو. لتجنب هذا، هناك CSS. ويكفي لوصف مرة واحدة فقط على عنصر معين، ومن ثم ببساطة تشير إلى مكان لاستخدام خصائص نمط معين. فمن الممكن لجعل صفا ليس فقط نص الصفحة نفسها، ولكن أيضا في ملف آخر. وهذا سوف يسمح لتطبيق صفا للأنماط مختلفة على جميع صفحات الموقع. ومن المريح أيضا لتعديل بعض الصفحات، تعديل ملف CSS. تسمح أوراق الأنماط لك للعمل مع الخطوط على مستوى أفضل من HTML، مما يساعد على تجنب تفاقم صفحات الرسومات للموقع.

استخدام أوراق الأنماط للتنمية القائمة

CSS-رمز القائمة:

1. # My_1menu {قائمة على غرار: لا شيء؛ الحشو: 6؛ العرض: 800px؛ هامش: السيارات؛}
2. # My_1menu لى {تعويم: غادر؛ الخط: 18px مائل ارييل؛}
3. # My_1menu و{لون: # 756؛ عرض: كتلة. الطول: 55px؛ خط الطول: 55px؛ الحشو: 0px 0px 15px 15px؛ خلفية: #dfc. النص الديكور: لا شيء؛}
4. # My_1menu و: تحوم {لون: #foa. خلفية: # 788؛}

الآن دعونا نلقي نظرة على القائمة CSS الأفقية الناتجة عن ذلك.

# My_1menu - حتى لا يكون هناك مهمة على غرار لعنصر UL- مع معرف = my_1menu، القائمة على غرار: لا شيء - هذا الأمر لإزالة علامات من البنود المقرر نقاط.

العرض: 800px - عرض القائمة لدينا هو 800 بكسل.

الحشو: 0 - وهذا يزيل الحشو في الداخل.

هامش: السيارات - vyravnivnie القائمة الأفقية في مركز صفحتنا.

# My_1menu لي - تعيين الأنماط ليثيوم العناصر.

الطول: 55px - ارتفاع القائمة.

# My_1menu و: تحوم - تعيين الأنماط لعنصر والماوس عند الناجم عن ذلك.

ونحن لن تصف بالتفصيل كل سطر، كما في كل المطور يمكن تحديد معالمها هنا. هذا أساس لاستخدام الأنماط في القائمة على الموقع. يمكنك إعطائها مظهر أكثر النهائي وجميلة، وذلك باستخدام الصور. تعيين العنصر ولكن، على سبيل المثال، خلفية: رابط (img1.png) تكرار السينية. يجب ألا يكون هناك خلفية: رابط (img2.png) تكرار السينية ل: تحوم.

استخدام الخيال، والأفضليات الإبداعية الخاصة بك. ثم بناء على تلك المعرفة حول كيفية إنشاء قائمة بسيطة على الموقع، يمكنك تطوير صفحة مع تصميم فريدة من نوعها.