لیست نامرتب

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳ویرایشگرها
۴پایه
۵عنصرها
۶ویژگی‌ها
۷عنوان‌ها
۸پاراگراف‌ها
۹استایل‌ها
۱۰قالب‌بندی
۱۱نقل‌قول‌ها
۱۲توضیحات
۱۳رنگ‌ها
۱۴CSS
۱۵لینک‌ها
۱۶تصاویر
۱۷جداول
۱۸لیست‌ها
۱۹بلوک‌ها
۲۰کلاس‌ها
۲۱شناسه
۲۲Iframeها
۲۳جاوا اسکریپت
۲۴مسیرهای فایل
۲۵سرصفحه
۲۶چیدمان‌ها
۲۷واکنش‌گرا
۲۸کد کامپیوتری
۲۹معنایی‌ها
۳۰راهنمای استایل
۳۱موجودیت‌ها
۳۲نماد‌ها
۳۳ایموجی‌ها
۳۴مجموعه کاراکترها
۳۵رمزگذاری URL
۳۶HTML و XHTML
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در 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


منابع آموزشی