أجهزة الكمبيوتربرمجة

الرأسي القائمة CSS: فعل ذلك بنفسك

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

الخطوات الأساسية

لإنشاء بسيط القائمة العمودي CSS، كنت في حاجة إلى الخطوات التالية:

1. أولا، تحديد قائمة من الروابط (باستخدام HTML كود)، والتي من القائمة سيكون. نعطيهم اسما، على سبيل المثال، هي كما يلي:

  1. الصفحة الرئيسية.
  2. تاريخنا.
  3. توجيه.
  4. الخدمات.
  5. اتصالات.

2. ثم يهذب الروابط كما يحلو لك مع مساعدة من CSS.

نكتب كود HTML، نضع في ملف my_Vmenu.html ونرى كيف سيبدو في المتصفح:

وهذا هو الأساس (الهيكل العظمي) من القائمة لدينا. # 1، # 2، الخ ينبغي الاستعاضة عن الإشارة. انظر كيف يبدو في المتصفح. الصورة لن يروق لكم. الآن يجب أن نبدأ في وصف عناصر النمط، لجعل القوائم كاملة CSS العمودية.

وصف الأنماط

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

وصف تفصيلي تستخدم الأنماط

الآن النظر في تفاصيل القائمة العمودية CSS لدينا:

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

المجاهدين # my_Vmenu - النمط العام للقائمة بأكملها.

المجاهدين # my_Vmenu لى - وصلات النمط بين العلامة لى.

المجاهدين # my_Vmenu لى: تحوم - وصفا لنوع قيد النظر من عناصر القائمة في الوقت الذي تحوم واحد على الناس.

المجاهدين # my_Vmenu لى فترة - وصف النص (القائمة العنوان).

تذكر أن ملفات my_Vmenu.css my_Vmenu.html ويجب الحفاظ في نفس الدليل. ومع ذلك، فإنها قد تكون موجودة في مجلدات مختلفة، ولكن بعد ذلك فمن المهم للتسجيل في مسار الملف my_Vmenu.html إلى my_Vmenu.css. كن حذرا، لأن القادمين الجدد إلى هذه المشكلة في كثير من الأحيان.

يجب أن تكون متصلا نمط بين العلامات الرأس في ملف HTML. menu_1.png وmenu_2.png - وهذا هو صورة لعنصر القائمة الصورة في حالة طبيعية وتحوم.

فمن الأفضل لحفظ الصور في مجلد منفصل للصور، سمها ما my_images، ولكن بعد ضبط رمز CSS. إرسال حيث يتم عرض هذه الصور، فهي في هذا الدليل: رابط (my_images / menu_1.png) ورابط (my_images / menu_2.png).

في بقية الخصائص الموضحة في كود CSS، لفهم بسهولة. أنها تحدد مظهر القائمة لدينا. فمن السهل أن تلاحظ أن العرض والارتفاع من البنود المحددة لنفس البنود في حالة طبيعية، وعندما كنت تحوم الماوس فوقها. حجم الخط 18px، يحدد الحشو المسافة البادئة من جوانب مختلفة من أسماء الأماكن. عرض تمكنك من تحديد وحدة العرض لضبط العرض والحشو.

لدينا القائمة العمودية

كما ترون، القوائم CSS الرأسية لخلق بسهولة. على أساس بيانات من المعرفة التي سوف تكون قادرة على جعلها جميلة وجذابة لزوار موقع الويب الخاص بك! استخدم خيالك، ثم الأنيقة القائمة لتكمل موقعك.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 ar.atomiyme.com. Theme powered by WordPress.