فهرست نامرتب (Unordered Lists)
«فهرست نامرتب (Unordered List)» با تگ <ul> ساخته می شود. هر مورد هم با <li> می آید. این فهرست نقطه مشکی دارد. مثل لیست خرید خانه؛ ترتیب مهم نیست، فقط آیتم ها کنار هم اند.
ساخت فهرست نامرتب ساده
قدم به قدم جلو برو. اول <ul> را بنویس. سپس چند <li> اضافه کن.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
نکته: «بولت (Bullet)» همان نشانه کنار هر آیتم است.
انتخاب نشانه آیتم با CSS
با ویژگی CSS «list-style-type» شکل نشانه عوض می شود. چهار حالت مهم داریم.
disc (پیش فرض)
<ul style="list-style-type: disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
circle (دایره توخالی)
<ul style="list-style-type: circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
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>
فهرست های تو در تو (Nested)
می توانی داخل یک <li> یک فهرست دیگر بگذاری. مثل فصل و زیرمبحث.
<ul>
<li>Coffee</li>
<li>Tea<br />
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
نکته: هر <li> می تواند تصویر، لینک، یا حتی فهرست دیگر داشته باشد.
فهرست افقی (منوی ناوبری)
با کمی 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>اسکلت فهرست را بساز. - آیتم ها را با
<li>اضافه کن. - در صورت نیاز،
list-style-typeرا تنظیم کن.
برای دیدن معرفی کلی، صفحه «فهرست نامرتب» و دیگر انواع را هم بررسی کن.
جمع بندی سریع
<ul>برای موارد بدون ترتیب است.list-style-typeشکل نشانه را تعیین می کند.- می توانی فهرست ها را تو در تو بسازی.
- با CSS منوی افقی بساز.
نکته: صفحه فهرست ها و صفحه فهرست مرتب ادامه مسیر تو هستند.