بسم الله نبدا الدرس الثاني في لغه css
انتهينا في الدرس السابق من عمل headerللصفحه
في هذا الدرس سنتعلم انشاء قائمه جانبيه
side menu
نقوم باكمال الاكواد التي بداناها في الدرس الماضي
كالتالي
في
ال index
مصر ام الدنيا
مصر الماضي والحاضر من اين والي اين
طبعا يتم وضعها في القسم body
انظر الصوره التاليه توضح لك
ر يرمز باختصار لشيء فـ ul يرمز إلى unorderd list أي قائمة غير مرتبة بأرقام وهي القائمة التي نريد استخدامها في موقعنا لذلك تم استخدامها
تم استخدام class للتعريف عن العنصر بدل id وذالك لأن class هي خاصية تعريف تستخدم عندما يكون العنصر يستخدم عدة مرات وليس لمرة واحدة فالـ id هو تعريفي لشيء واحد أما القائمة الجانبية فهي متكررة لذلك يتم وضعها في class
بعد اضافه الاكواد تكون صفحه موقعنا كالتالي
من الصوره نجد ان الجزء الخاص بهذه القائمه يحتاج لتنسيق
للتنسيق CSS يتم ذلك من خلال ملف style.css
اكتب التالي داخله
.side_menu, .side_menu h2, .side_menu li, .side_menu li ul, .side_menu li ul li {
list-style:none; margin:0px; padding:0px;
}
.side_menu {
width:180px;
}
.side_menu h2 {
margin:10px 0 0 0;
padding:4px 0;
border-bottom:1px gray dotted;
color:#999999;
}
.side_menu li ul li {
border-bottom:1px green solid;
padding:5px 0;
font-weight:bold;
color:#006600;
}
الخاصية width تحدد عرضاً معيناً لعنصر محد
تحديد الارتفاع "height"
كل عنصر له أربع جوانب، اليمين right، اليسار left، الاعلى top، الأسفل bottom، الخاصية margin تتحكم ببعد كل جانب من جوانب العنصر عن العنصر المحاذي له، أو إطار الصفحة
استخدام الحشو "padding" الحشو يمكن التعبير عنه بأنه "ما في داخل العنصر نفسه" والحشو لا يؤثر في المسافية بين العنصر والآخر، بل يحدد المسافة في العنصر نفسه بين محتويات العنصر والإطار
border الاطار يمكن ان نستخدم top للإطار العلوي، وbottom للإطار السفلي، وleft للأيسر، وright للأيمن
انظر الصورتين التالييتين تبين لك المعلومات السابقه لتفهمها اكثر
بعد اضافه الاكواد الي ملف style.css
يصبح الشكل العام للصفحه كالتالي
حسنا
يمكننا انشاء قائمه اخري علي اليمين او اليسار او اسفل بدون ان نكتب المزيد من
الكواد وهذه هي ميزه الcss
حيث ان الاكواد الموجوده في style.css
التي كتبناها سابقا لاضافه تنسيقات علي النصوص في القائمه ستطبق علي القوائم الجديده تلقائيا
لاحظ المثال التالي معي لاوضح كلامي
ساضيف قائمه اخري بعنوان مواقع صديقه مثلا
سيكون شكل الكود داخل index.html
كالتالي
انظر الصوره التاليه
والان انظر الي شكل الصفحه والي القائمه الجديده المضافه
انظر للصوره التاليه
تابع معي الاضافات لصفحتك في الدرس القادم
نلتقي في درس قادم اتمني ان اكون قدمت درس سهل ومفيد
فتي دمياط الاول
http://bit.ly/a4AIhn
ليست هناك تعليقات:
إرسال تعليق