قوائم HTML غير مرتبة
تحدد علامة HTML <ul>قائمة (نقطية) غير مرتبة.
قائمة HTML غير مرتبة
تبدأ القائمة غير المرتبة <ul>بالعلامة. يبدأ كل عنصر بالقائمة
<li>بالعلامة.
سيتم تمييز عناصر القائمة برموز نقطية (دوائر سوداء صغيرة) بشكل افتراضي:
مثال
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
قائمة HTML غير مرتبة - اختر علامة عنصر القائمة
تُستخدم خاصية CSS list-style-typeلتحديد نمط علامة عنصر القائمة. يمكن أن تحتوي على إحدى القيم التالية:
| Value | Description |
|---|---|
| disc | Sets the list item marker to a bullet (default) |
| circle | Sets the list item marker to a circle |
| square | Sets the list item marker to a square |
| none | The list items will not be marked |
مثال - قرص
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
مثال - الدائرة
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
مثال - مربع
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
مثال - لا شيء
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
قوائم HTML المتداخلة
يمكن أن تتداخل القوائم (قائمة داخل القائمة):
مثال
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
ملاحظة: يمكن أن يحتوي عنصر القائمة ( <li>) على قائمة جديدة وعناصر HTML أخرى ، مثل الصور والروابط وما إلى ذلك.
قائمة أفقية مع 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>عنصر HTML لتعريف قائمة غير مرتبة - استخدم
list-style-typeخاصية CSS لتحديد علامة عنصر القائمة - استخدم عنصر HTML
<li>لتعريف عنصر قائمة - يمكن أن تتداخل القوائم
- يمكن أن تحتوي عناصر القائمة على عناصر HTML أخرى
- استخدم خاصية CSS
float:leftلعرض قائمة أفقيًا
علامات قائمة HTML
| Tag | Description |
|---|---|
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <dl> | Defines a description list |
| <dt> | Defines a term in a description list |
| <dd> | Describes the term in a description list |
للحصول على قائمة كاملة بجميع علامات HTML المتاحة ، تفضل بزيارة مرجع علامات HTML الخاص بنا .