طراحی وب

لیست 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

 

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>
برچسب ها

دیدگاهتان را بنویسید

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

پیشنهاد ویژه

تا 75% ذخیره کنید

این آخرین فرصت استفاده از تخفیف 75% است
این پیشنهاد را ببینید
این پیشنهاد فقط یکبار به شما نمایش داده می‌شود !
close-link
بستن