لیست‌های نامرتب در HTML
تگ <ul> در HTML یک لیست نامرتب (نقطه‌ای) رو تعریف می‌کنه.
لیست نامرتب HTML
یک لیست نامرتب با تگ <ul> شروع میشه. هر آیتم لیست با تگ <li> آغاز میشه. آیتم‌های لیست به صورت پیش‌فرض با نقطه‌های کوچک سیاه (bullets) مشخص می‌شن:
مثال:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
لیست نامرتب HTML - انتخاب نشانگر آیتم لیست
ویژگی CSS list-style-type برای تعریف استایل نشانگر آیتم لیست استفاده میشه. این ویژگی می‌تونه یکی از مقادیر زیر رو داشته باشه:
Disc (نقطه توپر)
مثال - Disc:
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>Circle (دایره)
مثال - Circle:
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>Square (مربع)
مثال - Square:
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>بدون نشانگر لیست
مثال - None:
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
لیست‌های تودرتو در HTML (Nested HTML Lists)
لیست‌ها می‌تونن تودرتو باشن (لیست داخل لیست):
مثال:
<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>
خلاصه فصل
-
از عنصر
<ul>HTML برای تعریف یک لیست نامرتب استفاده کنید. -
از ویژگی CSS
list-style-typeبرای تعریف نشانگر آیتم لیست استفاده کنید. -
از عنصر
<li>HTML برای تعریف یک آیتم لیست استفاده کنید. -
لیست‌ها می‌تونن تودرتو باشن.
-
آیتم‌های لیست می‌تونن شامل عناصر HTML دیگه باشن.
-
از ویژگی CSS
float:leftبرای نمایش یک لیست به صورت افقی استفاده کنید.
تگ‌های لیست HTML