لیست نامرتب
< HTML:لیست‌ها(تغییرمسیر از آموزش ساخت لیست نامرتب در Html)
پرش به ناوبری
پرش به جستجو
برچسب <ul> در HTML، لیستی مرتب (گلوله شکل) را تعریف می کند.
محتویات
لیست نامرتب HTML
یک لیست نامرتب با تگ <ul> آغاز می شود. هر آیتم لیست با تگ <li> آغاز می شود.[۱]
آیتم‌های لیست بطور پیش فرض با bulletها (دایره‌های کوچک سیاه) نشانه‌گذاری می‌شوند:
مثال
1 <ul>
2 <li>Coffee</li>
3 <li>Tea</li>
4 <li>Milk</li>
5 </ul>
لیست نامرتب HTML - انتخاب نشانگر آیتم لیست
خصوصیت list-style-type در CSS برای تعریف استایل نشانگر آیتم لیست استفاده می‌شوند:
| مقدار | توصیف |
|---|---|
| disc | نشانگر آیتم لیست را bullet تنظیم می‌کند (پیش فرض) |
| circle | نشانگر آیتم لیست را دایره تبدیل می‌کند |
| square | نشانگر آیتم لیست را مربع تبدیل می‌کند |
| none | نشانگر آیتم‌های لیست را حذف می‌کند |
مثال - Disc
1 <ul style="list-style-type:disc;">
2 <li>Coffee</li>
3 <li>Tea</li>
4 <li>Milk</li>
5 </ul>
مثال - Circle
1 <ul style="list-style-type:circle;">
2 <li>Coffee</li>
3 <li>Tea</li>
4 <li>Milk</li>
5 </ul>
مثال - Square
1 <ul style="list-style-type:square;">
2 <li>Coffee</li>
3 <li>Tea</li>
4 <li>Milk</li>
5 </ul>
مثال - None
1 <ul style="list-style-type:none;">
2 <li>Coffee</li>
3 <li>Tea</li>
4 <li>Milk</li>
5 </ul>
لیست های HTML تودرتو
لیست‌ها می‌توانند تودرتو باشند (لیستی در لیست دیگر):
مثال
1 <ul>
2 <li>Coffee</li>
3 <li>Tea
4 <ul>
5 <li>Black tea</li>
6 <li>Green tea</li>
7 </ul>
8 </li>
9 <li>Milk</li>
10 </ul>
توجه: آیتم‌های لیست خود می‌توانند شامل لیست جدید، و عنصرهای دیگر HTML باشند مانند تصویر، لینک و غیره.
لیست افقی با CSS
لیست‌های HTML با روش‌های مختلفی توسط CSS استایل دهی می‌شوند.
یک روش معروف استایل دهی افقی به لیست برای ایجاد منوی راهبری (به انگلیسی: Navigation Menu) است:
مثال
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 ul {
6 list-style-type: none;
7 margin: 0;
8 padding: 0;
9 overflow: hidden;
10 background-color: #333333;
11 }
12
13 li {
14 float: left;
15 }
16
17 li a {
18 display: block;
19 color: white;
20 text-align: center;
21 padding: 16px;
22 text-decoration: none;
23 }
24
25 li a:hover {
26 background-color: #111111;
27 }
28 </style>
29 </head>
30 <body>
31
32 <ul>
33 <li><a href="#home">Home</a></li>
34 <li><a href="#news">News</a></li>
35 <li><a href="#contact">Contact</a></li>
36 <li><a href="#about">About</a></li>
37 </ul>
38
39 </body>
40 </html>
نکته: می‌توانید در مورد CSS در آموزش CSS ما بیشتر مطالعه کنید.
خلاصه بخش
- از عنصر
<ul>در HTML برای تعریف لیست نامرتب استفاده کنید
- از خصوصیت
list-style-typeدر CSS برای تعریف نشانگر آیتم لیست استفاده کنید
- از عنصر
<li>در HTML برای تعریف آیتم لیست استفاده کنید
- لیست‌ها می‌توانند داخل لیست‌های دیگر بصورت تودرتو باشند
- آیتم‌های لیست می‌توانند شامل عنصرهای HTML دیگری باشند
- از خصوصیت
float:leftدر CSS یاdisplay:inlineبرای نمایش یک لیست بصورت افقی استفاده می‌شود
تمرین های HTML
منابع آموزشی