القوائم غير مرتبة HTML Unordered Lists

الدرس السابق الدرس التالي
ul القوائم غير مرتبة 
تحدد علامة <ul> قائمة (نقطية) غير مرتبة.
قائمة HTML غير مرتبة
تبدأ القائمة غير المرتبة بعلامة <ul>. يبدأ كل عنصر بالقائمة بعلامة <li>.
سيتم تمييز عناصر القائمة برموز نقطية (دوائر سوداء صغيرة) افتراضيًا:
مثال

<!DOCTYPE html>
<html>
<body> 
  <ul>
  <li> قهوة </li>
  <li> الشاي </li>
  <li> الحليب </li>
</ul>
</body> 
</html>

اختر علامة عنصر القائمة - Choose List Item Marker
تُستخدم خاصية نوع القائمة CSS list-style-type  لتعريف القائمة. يمكن أن تحتوي على إحدى القيم التالية:
  • disc         يضبط علامة عنصر القائمة على رمز نقطي (افتراضي)
  • circle      لتعيين علامة عنصر القائمة على دائرة
  • square    يضبط علامة عنصر القائمة على مربع
  • none      لن يتم وضع علامة على عناصر القائمة
مثال - disc

<!DOCTYPE html>
<html>
<body> 
 <ul style = "list-style-type:disc;">
      <li> قهوة </li>
      <li> الشاي </li>
     <li> الحليب </li>
 </ul>
</body>
</html>

مثال - Circle

<!DOCTYPE html>
<html>
<body> 
  <ul style = "list-style-type:Circle;">
     <li> قهوة </li>
     <li> الشاي </li>
     <li> الحليب</li>
  </ul>
</body>
</html>
مثال- square

<!DOCTYPE html>
<html>
<body> 
  <ul style = "list-style-type: square;">
      <li> قهوة </li>
       <li> الشاي </li>
       <li> الحليب </li>
  </ul>
</body>
</html>

مثال - none

<!DOCTYPE html>
<html>
<body> 
  <ul style = "list-style-type: none;">
     <li> قهوة </li>
     <li> الشاي </li>
     <li> الحليب </ li>
    </ul>
</body>
</html>

القوائم المتداخلة - Nested HTML Lists
يمكن أن تتداخل القوائم (قائمة داخل القائمة):
مثال

<!DOCTYPE html>
<html>
<body> 
  <ul>
  <li> قهوة </ li>
  <li>الشاي

    <ul>
       <li> شاي أسود </li>
       <li> شاي أخضر </li>
    </ul>
  </li>
  <li> الحليب </li>
  </ul>
</body>
</html>
ملاحظة: يمكن أن يحتوي عنصر القائمة (<li>) على قائمة جديدة وعناصر HTML أخرى ، مثل الصور والروابط وما إلى ذلك.
قائمة أفقية مع  Horizontal List with CSS
يمكن تصميم قوائم HTML بعدة طرق مختلفة باستخدام CSS.
تتمثل إحدى الطرق الشائعة في تصميم قائمة أفقيًا لإنشاء قائمة تنقل:
مثال

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
نصيحة: يمكنك معرفة المزيد عن CSS في دروسنا في CSS.
ملخص الفصل
  • استخدم عنصر <ul> لتحديد قائمة غير مرتبة
  • استخدم خاصية CSS list-style-type لتعريف علامة عنصر القائمة
  • استخدم عنصر <li> لتعريف عنصر قائمة
  • يمكن أن تتداخل القوائم
  • يمكن أن تحتوي عناصر القائمة على عناصر HTML أخرى
  • استخدم خاصية CSS float: left لعرض القائمة أفقيًا
الدرس السابق الدرس التالي
القسم: