السلام عليكم ورحمة الله تعالى وبركاته
اليوم سيكون الدرس عن صنع قائمة افقية بسيطة وساضع في اخر الموضوع تحميل المتال وان شاء الله في المرة القادمة ستكون قائمة احترافية وان كان اي غموض انا مستعد لتوضيحه ولن اطيل الى الشرح:
اليوم سيكون الدرس عن صنع قائمة افقية بسيطة وساضع في اخر الموضوع تحميل المتال وان شاء الله في المرة القادمة ستكون قائمة احترافية وان كان اي غموض انا مستعد لتوضيحه ولن اطيل الى الشرح:
<html>
<head>
<title>menu</title>
<style type=”text/css”>
body{
direction: rtl;/* لتحويل المحتوى من اليمين الى اليسار */
}
#navbar {
margin: 0 auto;/* الابتعاد الخارجي للقائمة جعلناه صفر وauto لتوسيط القائمة */
padding: 0;/*الابتعاد الداخلي جعلناه صفر */
width: 750px;/* عرض القائمة جعلناه 750px*/
background-color: #ccc;/* لون الخلفية القائمة */
height: 30px;/* ارتفاع القائمة*/
}
#navbar ul{
overflow: hidden;/* اعطينا اوفرفلو هيدن لكي لايحصل مشكل في التعويم ملاحضة لابد ان تعطي اوفرفلو هيدن لاي عنصر الدي تريد عمل تعويم بداخله*/
list-style: none;/*حدفنا النقاط التي تضهر في القائمة*/
background-color: #ccc;
margin: 0;
padding: 0;
}
#navbar ul li{
float: right;/*لقد قمنا بجعل القائمة افقية ودلك بالتعويم الى اليمين*/
width: 100px;
text-align: center;/*جعلنا الروابط في الوسط*/
}
#navbar ul li a{
text-decoration: none;/*ازلنا الخط الدي يضهر تحت الروابط*/
color: #000;/*لون الرابط*/
display: block;/*لاضهار الروابط */
padding: 6px;/*الابتعاد الداخلي جعلناه 6 من كل اتجاهات */
}
#navbar ul li a:hover{
text-decoration: underline;/*الاضهار الخط الدي يكون في القائمة عند مرور الماوس */
background-color: #555;
color: #fff;
border-bottom: 2px solid #000;/*استعملنا خاصية بوردر في الاسفل لاضافة لمسة خفيفة وجعلنا سمكه 2 وجعلنا الخط بدون تقطع واعطيناه اللون الاسود */
}
</style>
</head>
<body>
<div id=”navbar”>
<ul>
<li><a href=”">الرئيسية</a></li>
<li><a href=”">دروس</a></li>
<li><a href=”">اتصل بنا</a></li>
<li><a href=”">من نحن</a></li>
</ul>
</div>
</body></html>
ليست هناك تعليقات:
إرسال تعليق