Saturday 1 December 2012
درس عمل قائمة جميلة باستخدام html,css
نفتح برنامج جديد في الفرونت بيج او الدريم
ويفر ونقوم بتسمية الملف index.html عمل مجلد جديد باسم images
ليصبح لدينا الشكل التالي :
ثم نقوم باضافة اللينكات Home, Products, Services, About Us وذلك داخل <body> </body> وذلك على الشكل التالي :
<ul>
<li><a
href="home.htm">Home</a></li>
<li><a
href="products.htm">Products</a></li>
<li><a
href="services.htm">Services</a></li>
<li><a
href="about.htm">About Us</a></li>
</ul>
ليصبح الشكل كالتالي : 
ثم نقوم بوضع ال<ul>كاملا داخل <div> وليكن اسمه nav ليصبح الكود على الشكل التالي :
ثم نقوم باضافة الcss لهذه القائمة ولاضافة ذلك فقط عليك ان تضيف
الكود التالي قبل </head> وهو
<style type=”text/css”>
</style>
ليصبح الشكل العام هو :
الان نقوم بكتابة كود الcss التالي وهو :
List-style: none; (وهو لازالة علامات
الترقيم الموجودة قبل كل كلمة .
Background(وهو يقوم باضافة
الصورة على القائمة وان تكون بدون تكرار وان تكون فالوسط
Height,width(لاضافة الطول والعرض
للقائمة ,
Padding-topوهي لجعل الكلام يبدا من وسط الصورة وليس من الاعلى
والشكل سوف كون كالتالي :
ثم نقوم باضافة هذا الكود لcss وهو الذي يقوم بجعل اللينكات على طول القائمة وييقوم
بتحديد بين كل كلمة والاخرى مسافة
Text-align بقوم بوضع اللينكات
عفي الوسط
Line-heightلجعل كل لينك يبدا من متصف البار او الشكل
Widthاعطاء كل لينك عرض بقيمة 150:
ليصبح عنا الشكل التالي :
ثم نقوم باضافة هذا الكود وهو الخاص في حالات
الينك اذا كان في وضعية hover,
visited, active, link
لتصبح لدينا النتيجة النهائية :
لتحميل المثال كامل من هنا
المحاضر حاتم الخطيب
Subscribe to:
Posts (Atom)