HTML <ul> تگ

  • صفحه قبل <u>
  • صفحه بعدی <var>

تعریف و استعمال

<ul> آئیٹم کا استعمال کریں تاکہ غیر منظم (با نشانه‌های لیستی) فہرست کا تعریف کریں۔

استعمال کریں <ul> آئیٹم اور <li> آئیٹم کا استعمال کریں تاکہ غیر منظم فہرست بنائیں۔

نکاتی:CSS کا استعمال کریں تاکہفہرست کا انداز قائم کریں.

نکاتی:درجہ بندی شدہ فہرست کے لئے استعمال کریں <ol> آئیٹم.

مزید ملاحظہ:

HTML درس:HTML فهرست

HTML DOM مرجع دستنوشت:Ul آئیٹم

CSS درس:فہرست کا انداز قائم کریں

مثال

مثال 1

ایک نا منظم HTML فہرست:

<ul>
  <li>قهوه</li>
  <li>چائے</li>
  <li>میلک</li>
</ul>

خودتان امتحان کنید

مثال 2

مختلف فہرست کی نمائش کو قائم کریں (استفاده از CSS):

<ul style="list-style-type:circle">
  <li>قهوه</li>
  <li>چائے</li>
  <li>میلک</li>
</ul>
<ul style="list-style-type:disc">
  <li>قهوه</li>
  <li>چائے</li>
  <li>میلک</li>
</ul>
<ul style="list-style-type:square">
  <li>قهوه</li>
  <li>چائے</li>
  <li>میلک</li>
</ul>

خودتان امتحان کنید

مثال 3

فہرست میں سطر کی اوپچن اور کم کرنے کا کام (استفاده از CSS):

<ul style="line-height:180%">
  <li>قهوه</li>
  <li>چائے</li>
  <li>میلک</li>
</ul>
<ul style="line-height:80%">
  <li>قهوه</li>
  <li>چائے</li>
  <li>میلک</li>
</ul>

خودتان امتحان کنید

مثال 4

فہرست میں ایک دوسرے فہرست کو بنتائیں (درجہ بندی شدہ فہرست):

<ul>
  <li>قهوه</li>
  <li>چای</li>
    <ul>
      <li>پورسلای</li>
      <li>چائے کی لیکن</li>
    </ul>
  </li>
  <li>میلک</li>
</ul>

خودتان امتحان کنید

مثال 5

ایک پیچیدہ تر درجہ بندی شدہ فہرست بنائیں:

<ul>
  <li>قهوه</li>
  <li>چای</li>
    <ul>
      <li>پورسلای</li>
      <li>چای سبز</li>
        <ul>
          <li>بی‌لا</li>
          <li>لونگ چین</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>میلک</li>
</ul>

خودتان امتحان کنید

ویژگی‌های جهانی

<ul> برچسب‌ها همچنین از ویژگی‌های رویداد پشتیبانی می‌کنند ویژگی‌های جهانی در HTML.

ویژگی‌های رویداد

<ul> برچسب‌ها همچنین از ویژگی‌های رویداد پشتیبانی می‌کنند ویژگی‌های رویداد در HTML.

تنظیمات پیش‌فرض CSS

بیشتر مرورگرها از تنظیمات پیش‌فرض زیر برای نمایش استفاده می‌کنند <ul> عنصر:

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

خودتان امتحان کنید

پشتیبانی مرورگر

کروم اینجر فایرفاکس سافاری اپرا
کروم اینجر فایرفاکس سافاری اپرا
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی
  • صفحه قبل <u>
  • صفحه بعدی <var>