تگ های HTML – تگ ul
سلام
با معرفی تگ <ul> از سری تگ های HTML در خدمتتون هستیم.
- نمونه کد تگ <ul>
|
۱ ۲ ۳ ۴ ۵ |
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> |
- معرفی و کاربرد
تگ <ul> برای ایجاد یک لیست نامرتب استفاده میشود.
از تگ <ul> به همراه تگ <li> برای ایجاد لیست های نامرتب استفاده کنید.
نکته: برای استایل دادن به لیست هایی که با تگ <ul> میسازید، از Css استفاده کنید.
برای ایجاد لیست های مرتب شده از تگ <ol> استفاده کنید.
- پشتیبانی در مرورگرها
| عنصر | |||||
|---|---|---|---|---|---|
| ul | بله | بله | بله | بله | بله |
۱۱۰
- تنظیمات پیشفرض Css
اکثر مرورگرها برای نمایش تگ <ul> از تنظیمات پیشفرض زیر استفاده میکنند:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ |
ul { display: block; list-style-type: disc; margin-top: ۱em; margin-bottom: ۱ em; margin-left: ۰; margin-right: ۰; padding-left: ۴۰px; } |
در ادامه چند مثال دیگر از حالت های مختلف تگ ul را برایتان قرار میدهیم.
مثال ۱:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ |
<ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> |
مثال ۲:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ |
<ul style="line-height:180%"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul style="line-height:80%"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> |
مثال ۳:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ |
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> |
مثال ۴:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ |
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> |
معرفی تگ <ul> به پایان رسید.
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید