طراحی یک صفحه وب به گونه ای که به راحتی قابل خواندن، مرور و درک باشد را می توان به راحتی با استفاده از یک عنصر لیست نامرتب در HTML انجام داد. افزودن تصاویر و دراپ کپ روش های رایج هستند. افزودن نقاط گلوله راه دیگری است که برای پست های وبلاگ و صفحات محصول ایده آل است.
عنصر لیست نامرتب برای گروه بندی اقلام زمانی که ترتیب مهم نیست استفاده می شود. برای مثال، توضیحات محصول نیازی به پیروی از دستور خاصی ندارد. از سوی دیگر، دستورالعمل های دستور العمل نیاز به این دارند.
از پیوندهای پرش زیر برای پیمایش مقاله استفاده کنید یا فقط به پیمایش ادامه دهید:
- نحوه ایجاد یک لیست نامرتب در HTML
- نمونه های لیست نامرتب HTML
- نحوه استفاده از لیست نامرتب در HTML
- استفاده از تگ HTML برای لیست نامرتب
![اکنون دانلود کنید: 50 الگوی کد [قطعات رایگان]](https://iranlenz.com/wp-content/uploads/2023/08/how-to-create-an-unordered-list-in-html-examples_64dd3b1dec060.png)
نحوه ایجاد یک لیست نامرتب در HTML
ایجاد یک لیست نامرتب با HTML آسان است
- برچسب زدن بیایید مراحل را گام به گام در زیر بررسی کنیم.
مرحله 1: موارد فهرست خود را بنویسید.
برای شروع، متنی را بنویسید که به آیتم های لیست یا نقاط گلوله شما تبدیل می شود. در اینجا چند متن مکان‌دار در زیر آمده است:
لیست مورد 1
لیست مورد 2
لیست مورد 3
مرحله 2: هر مورد فهرست را در آن قرار دهید
- برچسب‌ها. بعد، هر کلمه یا عبارت را در آن بپیچید
- برچسب ها اینها آیتم های لیست شما خواهند بود. هر آیتم لیست باید دارای یک تگ باز و بسته باشد.
- لیست مورد 1
-
- لیست مورد 2
-
- لیست مورد 3
-
توجه: موارد فهرست نباید فقط حاوی متن باشند. آنها می توانند عناصر HTML دیگری نیز داشته باشند. به عنوان مثال، لیستی از عناصر لنگر یا پیوندها به این صورت است:
- لینک 1
-
- لینک 2
-
- لینک 3
-
مرحله 3: همه موارد لیست را در یک بپیچید
برچسب زدندر نهایت، تمام موارد لیست را در یک بپیچید
- برچسب زدن این به مرورگر می‌گوید که فهرست نامرتب از آیتم‌ها را ارائه کند که به طور پیش‌فرض یک لیست گلوله‌دار است.
این قطعه کد کامل است:
-
- لیست مورد 1
-
- لیست مورد 2
-
- لیست مورد 3
در اینجا نحوه ظاهر شدن لیست نامرتب در قسمت جلو آمده است:
اکنون که نحوه ایجاد یک لیست نامرتب اصلی را فهمیدید، بیایید به چند روش برای استایل دادن به لیست نگاه کنیم.
نمونه های لیست نامرتب HTML
یک لیست نامرتب HTML را می توان برای تغییر نشانگر آیتم لیست پیش فرض، قرار دادن یک لیست در لیست دیگر و تغییر طرح پیش فرض از عمودی به افقی استایل کرد. نحوه ایجاد هر یک از این احتمالات را در مثال های زیر توضیح خواهیم داد.
نشانگر دیسک
ویژگی CSS list-style-type نشانگر یک آیتم لیست را تعریف می کند. به طور پیش فرض، مقدار “disc” است که نشانگر را روی یک گلوله تنظیم می کند. بنابراین یک لیست نامرتب به عنوان یک لیست گلوله ای ظاهر می شود، چه ویژگی نوع لیست CSS روی “disc” تنظیم شده باشد یا اصلاً تعریف نشده باشد.
راه های متعددی برای افزودن CSS به HTML وجود دارد . همانطور که در قلم زیر نشان داده شده است، CSS داخلی اضافه می کنیم:
قلم را ببینیدبدون عنوانتوسط HubSpot (@hubspot) برCodePen.
نشانگر دایره
برای تغییر نشانگر مورد پیش‌فرض فهرست به دایره، ویژگی CSS list-style-type را روی «circle» تنظیم کنید.
قلم را ببینیدمثال لیست نامرتب HTML: نشانگر دیسکتوسط HubSpot (@hubspot) برCodePen.
نشانگر مربع
برای تغییر نشانگر پیش‌فرض آیتم فهرست به مربع، ویژگی CSS list-style-type را روی “square” قرار دهید.
قلم را ببینیدبدون عنوانتوسط HubSpot (@hubspot) برCodePen.
بدون نشانگر
همچنین می‌توانید با تنظیم ویژگی CSS list-style بر روی «none»، نشانگر آیتم فهرست را به طور کامل حذف کنید. آیتم های لیست همچنان تورفتگی دارند، اما هیچ نشانگری قبل از آنها ظاهر نمی شود.
قلم را ببینیدبدون عنوانتوسط HubSpot (@hubspot) برCodePen.
لیست تو در تو
شما می توانید یک لیست در داخل لیست دیگری ایجاد کنید – در غیر این صورت به عنوان یک لیست تودرتو شناخته می شود – در HTML. شما می توانید یک لیست نامرتب یا مرتب را در یک لیست نامرتب قرار دهید، اما ما روی اولی تمرکز خواهیم کرد زیرا موضوع این پست لیست های نامرتب است.
برای ایجاد یک لیست نامرتب تو در تو، به سادگی دومین لیست نامرتب را زیر یک آیتم لیست در اولین لیست نامرتب اضافه کنید. این فهرست دوم نیز باید حاوی یک والد باشد
عنصر و فرزند
- عناصر. شما باید بسته شدن را درج کنید
تگ کنید یا مرورگر همه موارد لیست زیر را به صورت تودرتو ارائه می کند.
قلم را ببینیدمثال لیست نامرتب HTML: تودرتوتوسط HubSpot (@hubspot) برCodePen.
لیست تورفتگی سفارشی
HTML
- برچسب به صورت پیش‌فرض موارد فهرست خود را فرورفته می‌کند. اگر می خواهید
- ، سپس می توانید از ویژگی CSS margin-left یا padding-left استفاده کنید. یک مقدار مثبت آیتم های لیست را به سمت راست فشار می دهد، در حالی که یک مقدار منفی موارد را به سمت راست فشار می دهد.
قلم را ببینیدبدون عنوانتوسط HubSpot (@hubspot) برCodePen.
فهرست افقی
به‌طور پیش‌فرض، آیتم‌های فهرست به‌صورت عمودی فهرست می‌شوند، اما می‌توانید با مقداری CSS آنها را به‌صورت افقی نمایش دهید. این اغلب هنگام ایجاد یک منوی ناوبری یک انتخاب محبوب است.
مثال زیر لیستی از عناصر لنگر را به صورت افقی نمایش می دهد. CSS به عنصر لیست نامرتب اعمال می شود تا نشانگرهای آیتم های لیست را حذف کند و حاشیه، بالشتک و رنگ پس زمینه را تنظیم کند. ویژگی سرریز نیز روی “مخفی” تنظیم شده است تا هرگونه سرریز از رندر خارج از کادر عنصر پنهان شود.
هر آیتم لیست توسط ویژگی float CSS تعریف می شود و روی “چپ” تنظیم می شود تا در سمت چپ ظرف خود شناور شوند (یعنی عنصر لیست نامرتب).
در نهایت، هر عنصر لنگر توسط CSS به گونه‌ای استایل داده می‌شود که به صورت پررنگ، وسط، آبی سرمه‌ای و بدون زیرخط به نظر برسد. ویژگی نمایش و padding تضمین می کند که بین هر آیتم لیست فاصله وجود دارد .
قلم را ببینیدبدون عنوانتوسط HubSpot (@hubspot) برCodePen.
برای آموزش گام به گام نحوه ایجاد یک منوی ناوبری کاملاً کاربردی، این ویدیو را ببینید:
نحوه استفاده از لیست نامرتب در HTML
ما نحوه ایجاد چندین نوع لیست نامرتب را توضیح داده ایم. بیایید آنچه را که تا کنون آموخته‌ایم مرور کنیم:
-
-
- HTMLبرچسب یک لیست نامرتب را تعریف می کند.
- HTML
- عنصر یک آیتم لیست را تعریف می کند.
- آیتم های لیست می توانند شامل عناصر HTML دیگری مانند عناصر لنگر باشند.
- ویژگی CSS list-style-type نشانگر آیتم لیست را تعریف می کند.
- لیست های نامرتب را می توان تودرتو کرد.
- ویژگی margin-left یا padding-left را می توان برای تغییر فاصله تورفتگی پیش فرض یک لیست نامرتب استفاده کرد.
- از ویژگی float CSS می توان برای نمایش یک لیست نامرتب به صورت افقی استفاده کرد
-
استفاده از تگ HTML برای لیست نامرتب
با HTML
-
- برچسب و CSS، می توانید لیست های نامرتب را در صفحات وب خود ایجاد و استایل دهید. این لیست ها می توانند به بهبود خوانایی پست های وبلاگ، صفحات فرود، صفحات محصول و موارد دیگر کمک کنند.
