021-20483015

لیست ها در HTML

مثال :

یک لیست مرتب :

1- اولین آیتم لیست
2- دومین آیتم لیست
3- سومین آیتم لیست


لیست نا مرتب :

- آیتم لیست
- آیتم لیست
- آیتم لیست



لیست های نامرتب HTML

یک لیست نامرتب با یک تگ <ul> و هر کدام از آیتم های لیست با تگ <li> شروع می شود.
آیتم های لیست بوسیله بولت (معمولا یک دایره سیاه کوچک) مشخص می شوند.

مثال :
لیست نامرتب
<ul>
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ul> 
مشاهده مثال


علامت آیتم ها در لیست های HTML

صفت list-style-type از CSS برای تعیین نوع علامت آیتم استفاده می شود :

- disc علامت آیتم را به شکل دایره تو پر نمایش می دهد
- circle علامت آیتم را به شکل دایره تو خالی نمایش می دهد
- square علامت آیتم را به شکل مربع تو پر نمایش می دهد
- none آیتم را بدون علامت نمایش می دهد

مثال دایره تو پر :
علامت لیست دایره ای
<ul style="list-style-type:disc">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ul>  
مشاهده مثال


مثال دایره تو خالی :
علامت لیست حلقه ای
<ul style="list-style-type:circle">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ul>  
مشاهده مثال


مثال مربع :
علامت لیست مربع
<ul style="list-style-type:square">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ul>  
مشاهده مثال


مثال بدون علامت :
لیست نامرتب بدون علامت
<ul style="list-style-type:none">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ul>  
مشاهده مثال



لیست های مرتب HTML

یک لیست مرتب با یک تگ <ol> و هر کدام از آیتم های لیست با تگ <li> شروع می شود.
آیتم های لیست بطور پیش فرض بوسیله اعداد مشخص می شوند.

مثال :
لیست مرتب
<ol>
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>  
مشاهده مثال
 

نوع شماره گذاری یا مرتب سازی لیست در HTML

صفت type از تگ <ol> تعیین کننده نوع علامت گذاری و مرتب سازی در لیست مرتب می باشد :

    
type="1" آیتم های لیست را با اعداد مرتب سازی می کند (پیش فرض)
type="A" آیتم های لیست را با حروف بزرگ مرتب می کند
type="a" آیتم های لیست را با حروف کوچک مرتب می کند.
type="I" آیتم های لیست را با اعداد رومی بزرگ مرتب می کند.
type="i" آیتم های لیست را با اعداد رومی کوچک مرتب می کند.

مثال  اعداد :
لیست مرتب با اعداد
<ol type="1">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>  
مشاهده مثال
 

مثال حروف بزرگ :
لیست مرتب با حروف انگلیسی بزرگ
<ol type="A">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>  
مشاهده مثال
  

مثال حروف کوچک :
لیست مرتب با حروف انگلیسی کوچک
<ol type="a">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>  
مشاهده مثال
  

مثال اعداد رومی بزرگ :
لیست مرتب با اعداد رومی بزرگ
<ol type="I">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>  
مشاهده مثال
  

مثال اعداد رومی کوچک :
یک لیست مرتب با اعداد رومی کوچک
<ol type="i">
  <li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>  
مشاهده مثال
  

لیست های تعریفی در HTML

یک لیست تعریفی ، لیستی از عبارات یا کلمه هایی است که شرح هر یک از آنها نیز در زیر آنها آورده شده باشد.
تگ <dl> یک لیست تعریفی را ایجاد می کند.
با استفاده از تگ  <dt> ، آیتم های لیست و با استفاده از تگ <dd> توضیح آیتم های مورد نظر  را تعریف می کنیم :

مثال :
لیست تعریفی
<dl>
  <dt>قهوه</dt>
  <dd>نوشیدنی سیاه گرم</dd>
  <dt>شیر</dt>
  <dd>- نوشیدنی سفید سرد</dd>
</dl>
مشاهده مثال
  

لیست های تو در تو در HTML

لیست ها همچنین می توانند تو در تو ایجاد شوند.

مثال :
لیست تو در تو
<ul>
  <li>قهوه</li>
  <li>چای
    <ul>
    <li>چای سیاه</li>
    <li> چای سبز</li>
    </ul>
  </li>
  <li>شیر</li>
</ul>
مشاهده مثال
  

نکته ! آیتم های لیست می توانند حاوی لیست هاو عناصر دیگر HTML مانند تصویر و لینک و ... باشند.


لیست های افقی در HTML

لیست های HTML می توانند به حالت های مختلفی . با استفاده از CSS استایل دهی شوند. یکی از روش های محبوب استایل افقی لیست برای ایجاد منو می باشد

مثال :
لیست افقی
<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #000000;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">ارتباط با ما</a></li>
  <li><a href="#about">درباره ما</a></li>
</ul>

</body>
</html>
مشاهده مثال
  

خلاصه درس :

عنصر  <ul> در HTML برای ایجاد لیست نامرتب
صفت  list-style-type از CSS برای تعیین نوع علامت آیتم
عنصر  <ol> در HTML برای ایجاد لیست مرتب
صفت  type  در HTML برای تعیین نوع مرتب سازی
عنصر  <li> در HTML برای ایجاد یک آیتم  لیست 
عنصر  <dl> در HTML برای ایجاد لیست تعریفی
عنصر  <dt> در HTML برای ایجاد آیتم در لیست تعریفی
عنصر  <dd> در HTML برای ایجاد توضیح آیتم در لیست تعریفی
لیست ها می توانند داخل لیست های دیگر قرار گیرند
آیتم های لیست می توانند  حاوی عناصر دیگر HTML باشند
صفت float:left یا display:inline از CSS می توانند برای نمایش افقی لیست استفاده شوند

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط