لیست html

لیست html  به چه صورت هایی نوشته می شود؟

آموزش  html  درس هفدهم

لیست نامرتب html

لیست html  به صورت نامرتب با تگ <ul>  شروع می شود. هر کدام از آیتم های لیست با تگ <li>  شروع می شود. هر کدام از آیتم های لیست به طور پیش فرض با bullets (حلقه های کوچک سیاه و سفید) مشخص می شوند.

 

لیست html
لیست html

مثال:

<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

 علامت آیتم های لیست نامرتب در html

 

ValueDescription
discSets the list item marker to a bullet (default)
circleSets the list item marker to a circle
squareSets the list item marker to a square
noneThe list items will not be marked

 

مثال 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>

لیست مرتب html

لیست مرتب با تگ <ol> شروع می شود و هر کدام از آیتم های لیست با <li>  شروع می شوند. آیتم های لیست به طور پیش فرض با عدد شروع می شوند.
مثال :
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

ویژگی type در لیست های مرتب html

 

حتما بخوانید:  چیدمان HTML
TypeDescription
type=”1″The list items will be numbered with numbers (default)
type=”A”The list items will be numbered with uppercase letters
type=”a”The list items will be numbered with lowercase letters
type=”I”The list items will be numbered with uppercase roman numbers
type=”i”The list items will be numbered with lowercase roman numbers

 

اعداد
<ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
حروف بزرگ
<ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
حروف کوچک
<ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
حروف رومی بزرگ
<ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
حروف رومی کوچک
<ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

 فهرست توصیفات HTML

HTML نیز از لیست توضیحات پشتیبانی می کند.

فهرست توصیفی یک لیست از اصطلاحات  با شرح هر اصطلاح است.

تگ <dl> فهرست توصیفی را مشخص می کند، تگ <dt> اصطلاح (نام) را تعریف می کند و تگ <dd> هر اصطلاح را شرح می دهد:

مثال :
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>

لیست های تو در تو در html  که nested نامیده می شوند.

مثال :
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>
توجه: اقلام لیست می تواند شامل لیست جدید و دیگر عناصر HTML مانند تصاویر و لینک ها و غیره باشد.

لیست افقی
لیست های 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>
امتیاز کاربران به این مطلب
۱ نفر - میانگین: ۵
تلگرام

دیدگاه‌تان را ثبت کنید:

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بیست + چهار =

PHN0eWxlPi5oX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWV7cG9zaXRpb246cmVsYXRpdmU7fSAuaF9pZnJhbWUtYXBhcmF0X2VtYmVkX2ZyYW1lIC5yYXRpbyB7ZGlzcGxheTpibG9jazt3aWR0aDoxMDAlO2hlaWdodDphdXRvO30gLmhfaWZyYW1lLWFwYXJhdF9lbWJlZF9mcmFtZSBpZnJhbWUge3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlOyBoZWlnaHQ6MTAwJTt9PC9zdHlsZT48ZGl2IGNsYXNzPSJoX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWUiPiA8c3BhbiBzdHlsZT0iZGlzcGxheTogYmxvY2s7cGFkZGluZy10b3A6IDU3JSI+PC9zcGFuPjxpZnJhbWUgc3JjPSJodHRwczovL3d3dy5hcGFyYXQuY29tL3ZpZGVvL3ZpZGVvL2VtYmVkL3ZpZGVvaGFzaC85dHk0VS92dC9mcmFtZSIgYWxsb3dGdWxsU2NyZWVuPSJ0cnVlIiB3ZWJraXRhbGxvd2Z1bGxzY3JlZW49InRydWUiIG1vemFsbG93ZnVsbHNjcmVlbj0idHJ1ZSIgPjwvaWZyYW1lPjwvZGl2Pg==
با سپاس از ثبت دیدگاه شما دوست عزیز
از تماشای این ویدیو لذت ببرید ...
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود فایل سخنرانی استیو جابز ...
ایبوک هدف‌گذاری موثر
زودتر از آنچه فکرش را می‌کنید به خواسته‌هایتان دست پیدا کنید!
* لینک دانلود بلافاصله ایمیل می‌شود.
چهار عامل شگفت انگیز کسب درآمد چیست؟
فقط چند ثانیه تا دانلود فاصله دارید!
* سه ایده کسب و کار خانگی پولساز
فقط چند ثانیه تا دانلود فاصله دارید!
* ایبوک: ده مکان عالی برای پیدا کردن یک ایده جدید
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود ویدیوی جذاب و با کیفیت مصاحبه جک ما
از همین امروز شروع کنید
بدون تجربه و دانش فنی وارد دنیای درآمدهای اینترنتی شوید!
فایل‌های آموزشی برای شما ایمیل می‌شود.
فقط چند ثانیه تا دریافت این فایل آموزشی فاصله دارید!
فایل‌های آموزشی ویژه اعضای سایت
* اگر عضو نیستید با وارد کردن ایمیل‌تان به این فایل دسترسی پیدا می‌کنید
دسترسی مخصوص اعضای سایت
عضو سایت نیستید؟
فقط کافیه نام و ایمیل‌تان را وارد کنید و ...
* دسترسی سریع به تمام فایل‌های آموزشی
هدیه ما به شما
با سپاس از اینکه دیدگاه تان را در سایت ما ثبت کردید.


یک کوپن تخفیف 30%
  • مشاوره حضوری
  • دوره های آنلاین
  • بسته های آموزشی
  • محصولات دانلودی
  • وبینارهای آموزشی
  این کد فقط یکبار به شما نمایش داده می‌شود.
کد: qwert
ورود کاربران
* دسترسی رایگان به بخش آکادمی