تگ ul چه می کند. لیست های شماره گذاری شده در HTML

02.04.2019 در تماس با

لیست گلوله شدهبا افزودن یک نشانگر کوچک، معمولاً یک دایره پر، در جلوی هر آیتم لیست تعریف می شود. خود لیست با استفاده از یک ظرف تشکیل می شود

همانطور که در زیر نشان داده شده است.
- نکته اول
- نکته دوم
- نکته سوم
تگ پایان باید در لیست موجود باشد.

در غیر این صورت خطایی رخ خواهد داد. تگ پایاناگرچه لازم نیست، اما به شما توصیه می کنیم همیشه آن را اضافه کنید تا به وضوح موارد موجود در لیست را جدا کنید.

مثال 11.1 HTML را برای افزودن لیست گلوله‌ای به یک صفحه وب ارائه می‌کند.

مثال 11.1. یک لیست گلوله ای ایجاد کنید

لیست گلوله شده

چبوراشکا
کروکودیل گنا
شاپوکلیاک
موش لاریسا

نتیجه این مثالنشان داده شده در شکل 11.1.

برنج. 11.1. نمای لیست گلوله ای

به بالشتک در بالا، پایین و سمت چپ لیست توجه کنید. چنین تورفتگی هایی به طور خودکار اضافه می شوند.

نشانگرها می توانند سه نوع باشند: دایره (پیش فرض)، دایره و مربع. از ویژگی type تگ برای انتخاب سبک نشانگر استفاده می شود.

مقادیر معتبر

نوع فهرست	کد HTML	مثال
لیست با گلوله ها به شکل دایره		اولین دومین سوم
لیست با گلوله ها به شکل دایره		اولین دومین سوم
لیست با نشانگرهای مربعی		اولین دومین سوم

نوع نشانگرها ممکن است کمی متفاوت باشد مرورگرهای مختلفو همچنین هنگام تغییر فونت و اندازه متن.

ایجاد یک لیست با نشانگرهای مربع در مثال 11.2 نشان داده شده است.

مثال 11.2. نوع نشانگر

لیست گلوله شده

تغییر باورها

تغییر در باور مذهبی (اختیاری: بودیسم، کنفوسیوس، هندوئیسم). پیشنهاد ویژه- یهودیت و اسلام با هم؛
تغییر در اعتقاد به عصمت طرف محبوب;
اعتقاد به وجود بیگانگان؛
ترجیح برای نظام سیاسی به عنوان بهترین نوع خود (اختیاری: فئودالیسم، سوسیالیسم، کمونیسم، سرمایه داری).

نتیجه این مثال در شکل نشان داده شده است. 11.2.

با سلام خدمت خوانندگان عزیز سایت وبلاگ. امروز، در این عنوان، می خواهم در مورد انواع لیست های Html صحبت کنم که می توانند بر اساس تگ های طراحی شده خاص UL، OL، LI و DL ایجاد شوند. با کمک جفت UL و LI، لیست های گلوله ای، با کمک OL و LI - شماره گذاری شده و با کمک عناصر DL، DT و DD، به اصطلاح لیست تعاریف ایجاد می شود. همچنین به طور مختصر به اصول ایجاد ساختارهای تودرتو خواهیم پرداخت.

می خواهم به شما یادآوری کنم که ما قبلاً موفق شده ایم ، در مورد اصول اولیه مدرن و همچنین چیدمان جدول () صحبت کنیم. علاوه بر این، ما اصول اولیه را لمس کردیم، خوب، از طریق آن یاد گرفتیم.

لیست های گلوله شده بر اساس برچسب های UL و LI

تگ UL برای ایجاد لیست های گلوله ای و OL برای ایجاد لیست های شماره دار استفاده می شود. این تگ ها مانند عنصر LI جفت شده و مسدود می شوند.

آیتم های لیست جداگانه بین تگ های باز و بسته قرار دارند که به نوبه خود در یک عنصر باز و بسته کننده LI محصور می شوند. در بالا و پایین لیست های Html، مرورگر تورفتگی یک خطی، مشابه تورفتگی ایجاد شده توسط یک تگ پاراگراف، اضافه می کند.

بیایید، برای مثال، یک نوع گلوله ای را ببینیم که ممکن است به این شکل باشد:

خط اول
دومین
آخرین عنصر

فقط عناصر LI می توانند داخل تگ های UL باز و بسته شوند و در حال حاضر در درون خود این عناصر (اقلام) می توانید هر محتوایی (متن، تصاویر، عنوان ها، پاراگراف ها، لینک ها و حتی لیست های دیگر) را وارد کنید.

آن ها UL فقط برای سازماندهی یک لیست برچسب دار (نامرتب) و هر چیزی که در آن خواهید دید خدمت می کند. صفحه وبدر داخل آن، با استفاده از محتویات عناصر LI پیاده سازی شده است.

برای UL می توانید نوع نشانگر را با نوشتن در آن تغییر دهید معانی مختلفبرای ویژگی "نوع". اگر "نوع" (کنترل ظاهر نشانگرها) برای عنصر UL مشخص نشده باشد، نوع نشانگر پیش فرض نمایش داده می شود (دیسک - دایره ای که با رنگ متن پر شده است):

در مثال‌های بالا، ویژگی «Type» را در عنصر UL با استفاده از آن نوشتیم نوع داده شدهنشانگر برای همه موارد اما ویژگی "Type" را می توان برای هر تگ LI مجزا با تنظیم نوع نشانگر خود برای این مورد اختصاص داد.

نمونه ای از لیست گلوله ای با انواع مختلفنشانگر برای هر مورد:

یک نشانگر به شکل یک دیسک پر شده
نشانگر به شکل یک دیسک رنگ نشده
مربع

لیست های شماره گذاری شده در Html بر اساس تگ OL

برای ایجاد یک لیست شماره گذاری شده، از تگ های OL استفاده می شود که در داخل آن، مجدداً عناصر LI قرار خواهند گرفت. OL و LI همانطور که قبلاً اشاره کردم بلوک هستند (یعنی تمایل دارند تمام فضای موجود در عرض آنها را اشغال کنند) و در داخل OL امکان قرار دادن چیز دیگری غیر از عناصر LI وجود نخواهد داشت.

به نظر می رسد که OL و UL تگ های خدماتی هستند که فقط برای اینکه به مرورگر بگوییم چه نوع لیستی را تولید می کنیم (گلوله دار یا شماره گذاری شده) مورد نیاز هستند. در مورد شماره یک، در سمت چپ هر آیتم نه یک نشانگر، بلکه یک عدد و یک نقطه در پشت آن خواهیم دید:

خط اول
نکته دوم
خط سوم

همانطور که در بالا ذکر کردم، عناصر UL، OL و LI توانایی استفاده از ویژگی TYPE را دارند. این به شما امکان می دهد نوع گلوله را سفارشی کنید یا مشخص کنید کدام اعداد یا حروف در فهرست شماره گذاری می شوند. برای یک لیست شماره گذاری شده، پارامترهای این ویژگی می توانند مقادیر زیر را داشته باشند:

حروف بزرگ

- اعداد رومی کوچک؛

نمونه ای از یک لیست شماره گذاری شده با انواع مختلف شماره گذاری برای هر مورد:

با شماره گذاری در اعداد رومی بزرگ
شماره گذاری با حروف کوچک لاتین
اعداد رومی کوچک

هنگام ایجاد لیست های شماره گذاری شده، می توان شماره گذاری را نه از یک، بلکه از شماره مشخص شده در ویژگی START شروع کرد. برای مثال:

اولین عنصری که شماره آن در تگ OL با ویژگی start = "23" مشخص شده است
مورد بعدی با عدد یک بالاتر
یکی دیگه یکی دیگه

برای OL، می توانید با نوشتن ویژگی VALUE با عدد مورد نیاز در LI ابتدایی این آیتم، شماره گذاری جدیدی را از هر مقداری شروع کنید، از هر آیتمی شروع کنید. برای مثال:

اولین مورد با شماره یک
این عنصر عدد مشخص شده در ویژگی value = "32" را دریافت می کند
مورد با تعداد زیاد

لیست های استایل در CSS (Style Sheets)

ولی معمولا الان ظاهرنشانگرها از طریق ویژگی TYPE تنظیم نمی شوند، بلکه ویژگی های مربوطه به آنها اختصاص داده شده است.

در اینجا من فقط یک مثال از گلوله های مختلف برای لیست های بدون شماره می آورم که ظاهر آنها از طریق مشخص شده است. فایل جداگانهبا شیوه نامه های آبشاری.

نکته اول
دومین
آخر

اما در مقالات بعدی در مورد آن صحبت خواهیم کرد. ظاهر نشانگرهای UL در این وبلاگ به این ترتیب تنظیم می شود. تصاویر به عنوان نشانگر استفاده می شوند: برای موارد معمولی یک لیست بدون شماره -، برای موارد تو در تو یک لیست بدون شماره -.

لیست های ویژه و تودرتو در کد Html

نوع سوم و آخر "لیست های تعریف" نامیده می شود و با استفاده از سه تگ DL، DT و DD مشخص می شوند. DL به مرورگر می گوید که لیستی از تعاریف به دنبال خواهد داشت.

معمولاً از این نوع (خوب، یا فرض بر این بود که از آن استفاده خواهد شد) برای نوشتن مدخل های فرهنگ لغت، شامل اصطلاحات (محصور در برچسب های DT) و توضیحات آنها (محصور در برچسب های DD) استفاده می شود.

ترم اول: شرح
ترم دوم: توصیف او

اگر به مثال بالا نگاه کنید، متوجه خواهید شد که عنصر DD (شرح اصطلاح) نسبت به عنصر DT (خود اصطلاح) به میزان 40 پیکسل فاصله دارد.

به طور کلی DL، DT و DD هستند برچسب های بلوک، علاوه بر این، در داخل عنصر DT فقط می توانید محتوا را با آن درج کنید برچسب های درون خطی(به نظر می رسد که در داخل DT امکان استفاده از عناصر بلوک سرفصل ها و پاراگراف ها وجود نخواهد داشت). و در داخل تگ‌های DD، می‌توانید هر عنصر را، چه درون خطی و چه بلوک، وارد کنید.

لیست تو در تودر Html با قیاس با یک ساده ایجاد می شود، اما در داخل لیست اصلی، برخی از موارد یک بار دیگر در باز و بسته شدن تگ های UL یا OL قرار می گیرند.

لطفاً توجه داشته باشید که LI بسته شدن موردی که آیتم تودرتو در آن ایجاد می‌شود، تنها پس از کل کد فهرست تودرتو قرار می‌گیرد (این برای نمایش صحیح آن در صفحه وب بسیار مهم است). لیست تودرتو ممکن است چیزی شبیه به این باشد:

اولین پاراگراف اصلی شماره گذاری شده است
نکته دوم
- اولین عنصر از گلوله تو در تو
- دومین
- پاراگراف سوم و آخر با برچسب
مورد سوم شماره گذاری شده است

موفق باشی! به زودی شما را در صفحات سایت وبلاگ می بینیم

با رفتن به اینجا می توانید ویدیوهای بیشتری را تماشا کنید

");">

ممکن است علاقه مند باشید

نحوه درج در لینک HTMLو یک عکس (عکس) - برچسب های IMGو A
فرم های Htmlبرای سایت - برچسب های Form، Input و Select، Option، Textarea، Label و موارد دیگر برای ایجاد عناصر فرم های وب انتخاب، Option، Textarea، Label، Fieldset، Legend - برچسب های Html فرم کشویی و جعبه متن
نحوه تنظیم رنگ ها در کد Html و CSS، انتخاب سایه های RGB در جداول، Yandex و سایر برنامه ها
جاسازی و شی - تگ های HTMLبرای نمایش محتوای رسانه ای (فیلم، فلش، صدا) در صفحات وب
برچسب ها و ویژگی های عنوان H1-H6، خط افقی Hr، خط شکسته Br و پاراگراف P مطابق با استاندارد Html 4.01
جداول در Html - تگ های Table، Tr و Td و همچنین Colspan، Cellpadding، Cellspacing و Rowspan برای ایجاد آنها

روز خوب!

در این مقاله، در مورد تمام احتمالات لیست ها، نحوه ایجاد یک لیست شماره گذاری شده، تسلط بر برچسب هایی که کمک می کند تا یک لیست گلوله ای ساده با گلوله های دلخواه جالب تر و قابل توجه تر شود، آشنا خواهید شد. پس از اتمام درس، متوجه خواهید شد که لیست ها در کجا استفاده می شوند و تحت چه شرایطی می توان از آنها استفاده کرد.

این مقاله سومین مقاله در این دوره کوتاه است مبانی HTML... قبل از خواندن این درستوصیه می کنم دو مورد قبلی را مرور کنید:

مقاله به تازگی شروع شده است، و ممکن است قبلاً متوجه استفاده از لیست گلوله‌ای استاندارد شده باشید. در وب سایت من، کاملاً ساده به نظر می رسد: در سمت چپ یک تورفتگی کوچک با یک خط و یک نشانگر مربع وجود دارد. در ادامه مقاله، ما نگاهی دقیق‌تر به این خواهیم داشت که نشانگرها چیست، چگونه اعداد بسازیم، و همچنین چگونه نشانگر خود را بسازیم.

در هر قسمت از مقاله، ایجاد لیست های خاص با توضیحات مفصل برای درج یک لیست خاص همراه خواهد بود.

1. لیست های گلوله شده در HTML

این نوع لیست ها برای برشمردن مجموعه ای از عناصر مشابه از نظر معنی در متن استفاده می شود. این می تواند فهرستی از پیوندهای مرتبط با موضوع مشابه باشد، توضیح مفصلبرای قطعات جدامتن اما بیایید ببینیم لیست های گلوله شده در کد چگونه به نظر می رسند:

و این شکلی است که در مرورگر به نظر می رسد:

برنج. 1.1. نمای استاندارد لیست نامرتب گلوله‌ای HTML در مرورگر

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

در تصویر بالا (شکل 1.1.) می توانید دایره های ابتدای هر آیتم منو را مشاهده کنید. این نشانگر است. به طور پیش فرض، یک دایره پر شده در مرورگر است. چندین نوع نشانگر در HTML وجود دارد: دایره پر شده، دایره خالی و مربع. آنها به CSS یا تصاویر شخص ثالث نیاز ندارند:

1.2 نشانگر را به عنوان یک دایره خالی فهرست کنید

شما مقادیر ویژگی ها را می دانید، اما اکنون بیایید ببینیم که چگونه یک لیست گلوله ای HTML در کد ایجاد کنیم. از جدول بالا، مقدار دوم "دایره" را برای آن انتخاب کرده ایم نوع ویژگیو آن را به لیست گلوله‌ای ما داد:

<html> <سر> <عنوان>نمونه ای از لیست گلوله ای با نشانگر دایره خالی</ عنوان> </ سر> <بدن> ستاره ها: <نوع ul = "دایره"> <li>سیریوس</ li> <li>آرکتوروس</ li> <li>پولوکس</ li> <li>بتلژوز</ li> <li>خورشید</ li> </ ul> </ بدن> </ html>

بیایید ببینیم این کد در مرورگر چگونه به نظر می رسد:

برنج. 1.2. نمایش گلوله برای یک لیست به شکل یک دایره در مرورگر

1.3 نشانگر را به شکل مربع فهرست کنید

بیایید آخرین مثال را با یک گلوله مربع برای لیست HTML نیز ببینیم:

به نشانگر توجه کنید، مربع شده است:

برنج. 1.3. نشانگر کادر فهرست به صورت مربع در مرورگر

یادداشت مهم: این دیگر برای استایل دادن به لیست های گلوله ای استفاده نمی شود. وجود دارد تقسیم روشن CSS (بخوانید CSS چیست) و HTML. HTML برای نشانه گذاری و CSS برای ظاهر خوب است.

کدی که حاوی ویژگی داده شده، هنگام تعیین نوع سند فعلیمانند HTML5 ("")، در حین اعتبارسنجی خطا می دهد. اگر نشنیده اید اعتبار سنجی چیست، باید به اینجا بروید -.

خطا به صورت زیر خواهد بود:

برنج. 1.4. خطا در اعتبارسنجی هنگام استفاده از ویژگی "نوع" لیست

ما لیست های گلوله ای را کشف کردیم. حالا بیایید به لیست های شماره گذاری شده برویم و سپس لیست های تودرتو و چندین لیست را در نظر بگیریم نمونه های آمادهکه بیشتر در سایت های واقعی استفاده می شوند.

2. لیست های شماره گذاری شده در HTML

بر خلاف نوع قبلی لیست ها، لیست های شماره دار دارای یکی هستند ویژگی مهم: آنها را خودکار شماره گذاری می کنند. این زمانی مفید است که باید شماره گذاری انجام شود. لیست بزرگ... به صورت دستی زمان بسیار زیادی طول می کشد، اما همچنان می توانید گم شوید. یک لیست شماره گذاری شده با استفاده از یک برچسب مشخص می شود. در عمل چگونه به نظر می رسد:

نمونه ای از لیست شماره گذاری شده:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<html> <سر> <عنوان>نمونه ای از یک لیست شماره گذاری استاندارد</ عنوان> </ سر> <بدن> یک تا پنج: <ol> <li>اولین</ li> <li>دومین</ li> <li>سوم</ li> <li>چهارم</ li> <li>پنجم</ li> </ اول> </ بدن> </ html>

به این ترتیب یک لیست شماره گذاری شده به نظر می رسد تنظیمات استاندارددر مرورگر:

برنج. 2.1. لیست شماره گذاری شده در یک مرورگر با تنظیمات استاندارد

مانند نسخه قبلی خود (فهرست گلوله شده)، سبک های خاص خود را برای نمایش اعداد دارد. شماره گذاری ساده تنها نوع گلوله برای لیست شماره گذاری شده در HTML نیست.

2.1 گلوله های استاندارد برای یک لیست شماره دار

در اینجا ما نه از سه نوع نشانگر، بلکه از پنج نوع انتخاب داریم:

نام نشانگر	مقدار ویژگی "نوع".	مثال فهرست کنید
نشانگر اعداد عربی	1	بدمینتون بیسبال
نشانگرهای حروف کوچک حروف لاتین	آ	Chomolungma چوگوری کانچن جونگا
نشانگرهایی به شکل حروف بزرگ لاتین	آ	قله به شدت سقوط کرد کوچه تنتروم اینسانو
نشانگرهای اعداد رومی با حروف کوچک	من	دریای فیلیپین دریای عرب دریای مرجانی
اعداد رومی بزرگ	من	قرمز سبز آبی

2.2 شماره گذاری سفارشی در لیست HTML

علاوه بر خروجی معمول یک لیست شماره دار، می توانیم شماره گذاری خود را از هر رقمی نیز شروع کنیم. برای انجام این کار، باید ویژگی "شروع" اضافی را تنظیم کنید. این شماره گذاری برای همه انواع گلوله ها برای لیست های شماره گذاری شده کار می کند. در عمل چگونه به نظر می رسد:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<html> <سر> <عنوان>شماره گذاری تصادفی برای لیست شماره گذاری شده</ عنوان> </ سر> <بدن> شماره گذاری را از دوازده شروع می کنیم: <ol type = "a" start = "12"> <li>دوازده</ li> <li>سیزده</ li> <li>چهارده</ li> <li>پانزده</ li> <li>شانزده</ li> </ اول> </ بدن> </ html>

به این صورت در یک سایت زنده نمایش داده می شود:

برنج. 2.2. شماره گذاری از شماره دلخواهدر یک لیست شماره گذاری شده

در تصویر بالا، لیست را از دوازده شماره گذاری کردیم، در حالی که نشانگرهایی به شکل حروف لاتین کوچک ساختیم. اکنون، فکر می کنم، مشخص شد که چگونه از این ویژگی ها در پروژه های خود استفاده کنید.

در حال حاضر، اجازه دهید به لیست های HTML تو در تو برویم.

3. نحوه ایجاد یک لیست چند سطحی (تودرتو) در HTML

در ساخت منو از لیست های چند سطحی در سایت استفاده می شود. این منو اغلب مانند یک کشویی به نظر می رسد یا به پایین (درس در)، یا کشویی به سمت چپ یا راست. چنین منوهایی به شما این امکان را می دهند که سایر موارد منو را به شکل فشرده ذخیره کنید.

با استفاده از مدل های خودرو به عنوان مثال، یک لیست چند سطحی در HTML ایجاد می کنیم:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<html> <سر> <عنوان>لیست گلوله ای تو در تو HTML</ عنوان> </ سر> <بدن> <ul> <li>سیتروئن<ul> <li>برلینگو</ li> <li> C1</ li> <li> C2</ li> <li> C3 پیکاسو</ li> <li> C4 گراند پیکاسو</ li> </ ul> </ li> <li> KIA</ li> <li>تویوتا</ li> <li>آئودی</ li> <li>لکسوس</ li> </ ul> </ بدن> </ html>

توجه کنید که یک لیست چند سطحی در مرورگر چگونه به نظر می رسد:

برنج. 3.1. نمونه ای از لیست چند سطحی در HTML

ما یک لیست چند سطحی با استفاده از یک گلوله (برچسب

اما ما می توانیم ترکیب کنیم لیست های لایه ایبا شماره گذاری و برچسب گذاری به صورت زیر:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<html> <سر> <عنوان>لیست های شماره گذاری شده، گلوله ای و شماره گذاری شده در HTML</ عنوان> </ سر> <بدن> <ul> <li>گروه اول لاله ها<ol> <li>کلاس اول<ul> <li>لاله های اولیه ساده</ li> </ ul> </ li> <li>درجه دوم<ul> <li>لاله های دوتایی</ li> </ ul> </ li> </ اول> </ li> </ ul> </ بدن> </ html>

در مثال بالا، ما تودرتوی دوگانه (2 سطح) داریم. ابتدا لیستی از دو دسته گل لاله قرار می دهیم، آن را شماره گذاری می کنیم. سپس، یک لیست گلوله ای در هر یک از موارد موجود در لیست شماره گذاری شده قرار می گیرد.

ما به ظاهر آن در مرورگر نگاه می کنیم:

4. منابع مفید برای لیست های HTML

این شامل اطلاعاتی است که نیاز به درک ویژگی های CSS دارد. برای این کار توصیه می کنم درس های زیر را مطالعه کنید:. همه نمونه ها بلافاصله با کد منبعو به تب های HTML (ساختار)، CSS (سبک ها) و Result (نتیجه) تقسیم می شوند.

4.1 چگونه یک لیست HTML را به یک رشته تبدیل کنیم

ممکن است هنگام ایجاد لیست HTML به رشته ای نیاز باشد منوی افقی... درست کردن آن بسیار ساده است:

4.2 نحوه ایجاد یک لیست HTML بدون آیکون

مسئول این امر است ویژگی از نوع list-styleدر CSS (جزئیات بیشتر):

4.3 نحوه ایجاد یک لیست در HTML محور

آیتم لیست یک عنصر بلوک است، بنابراین باید در مرکز قرار گیرد حاشیه ها... اما یکی وجود دارد نکته مهم- باید به صراحت عرض را مشخص کنیم تا تراز کار کند:

4.4 نحوه ایجاد یک لیست در HTML با تصاویر

فقط یک ملک کافی است CSS list-style-image... در داخل url، آدرس را قبل از نماد مشخص کنید. فقط می خواهم توجه داشته باشم که بهتر است بلافاصله یک تصویر کوچک انتخاب کنید، زیرا ارتفاع خط لیست به آن بستگی دارد:

4.5 HTML نشانگر خود را فهرست کنید

در این مورد، لازم است که آیکون های فونت (مثلا FontAwesome) را از قبل متصل کنید. سپس می توانید هر نمادی را به جای نشانگر استاندارد ایجاد کنید:

4.6 نحوه ایجاد یک لیست در HTML با چندین ستون

برای ایجاد یک لیست چند ستونی استفاده خواهیم کرد ویژگی CSSستون-count (این ویژگی فقط در مرورگرهای زیر پشتیبانی می‌شود: IE 10+، Chrome 1.0+، Opera 11.1+، Safari 3.0+، Firefox 1.5+). شما همچنین باید ارتفاع لیست را تنظیم کنید تا تقسیم به چندین ستون را ببینید:

5. تمرین کار با لیست ها

در ویدیوی زیر می توانید تمام کار با لیست های HTMLدر تمرین:

لیست های استاندارد

نمای استاندارد

بر اساس اصول اولیه، اکنون نگاهی دقیق‌تر به عناصر مورد استفاده برای ارائه ساختار و معنا خواهیم داشت بخش های مختلفطرح. اگر کسی نمی داند، پس ul و li، این بسیار است بهترین راهاز ساده متن متنزیرا وقتی متن پیچیده می شود، به خصوص در تلفن همراه، کاملا فرورفته می شود و دور نشانگر نمی پیچد.

اعتقاد بر این است که لیست ها هستند راه عالیارائه اطلاعات در صفحات به این دلیل که خواندن آنها آسان است و خوب به نظر می رسند. به نظر می رسد بسیاری از مردم فکر می کنند که نقاط گلوله تصاویر کوچکی هستند، اما در واقع همه آنها بیشتر از طریق ایجاد شده اند HTML سادهکد. می توانید درج کنید انواع مختلفلیست ها را به یکدیگر اضافه کنید، اگر دوست دارید، فقط به یاد داشته باشید که آنها را به درستی ببندید. شما می توانید با متن مورد نظر خود در تمام این دستورات لیست بازی کنید.

همچنین باید بدانید که لیست ها در ابتدا شامل چندین عنصر هستند:

1 ... اطلاعات بهم ریخته
2 ... اطلاعات سفارش داده شده
3 ... تعاریف

شروع نصب:

1. گزینه:

مورد فهرست

لیست منحصر به فرد

لیست های اصلی

ZORNET.RU - برای مدیر وب سایت

یه لیست دیگه

کسانگلوپان (
حاشیه: 19px 0 0;
بالشتک: 0;
list-style: هیچکدام;
تنظیم مجدد: li;
}
ksangelopan li (
حاشیه: 2px solid # 3575ad;
پس زمینه: # d7dee4;
موقعیت: نسبی;
حاشیه پایین: 17 پیکسل.
بالشتک: 15px 9px;
}
.ksangelopan li: شناور (
z-index: 1;
}
ksangelopan li: قبل از (
حاشیه: 2px جامد # 2270b3;
موقعیت: مطلق;
بالا: -14px;
بالشتک: 3px 9px;
اندازه فونت: 11px;
فونت-وزن: پررنگ;
رنگ: # 246 eaf;
پس زمینه: # f2f4f7;
ضد افزایش: li;
محتوا: شمارنده (li);
-webkit-transition-duration: 0.4s;
مدت زمان انتقال: 0.4 ثانیه;
}
ksangelopan li: شناور: قبل از (
پس زمینه: # 2672b3;
رنگ: # f7f9fb;
-webkit-transform: translate (-11px، 0)؛
-ms-transform: translate (-11px، 0)؛
-o-transform: translate (-11px، 0)؛
transform: translate (-11px, 0);
}
ksangelopan li: بعد از (
محتوا: ""؛
موقعیت: مطلق;
مدت زمان انتقال: 0.3 ثانیه;
-webkit-transition-property: عرض.
transition-property: width;
z-index: -1;
پس زمینه: #FFF;
ارتفاع: 100%;
سمت چپ: 0;
بالا: 0;
عرض: 0;
}
.ksangelopan li: شناور: بعد از (
عرض: 100%؛
}

2 گزینه دوم:

مورد فهرست

لیست منحصر به فرد

لیست های اصلی

ZORNET.RU - برای مدیر وب سایت

یه لیست دیگه

Beleduzlopamges (
margin-bottom: 8px;
بالشتک: 0;
list-style: هیچکدام;
تنظیم مجدد: li;
}
.beleduzlopamges li (
موقعیت: نسبی;
حاشیه: 2px جامد # 195588;
پس زمینه: # eff3f7;
padding: 15px 19px 15px 27px;
حاشیه: 12px 0 12px 40px;
-webkit-transition-duration: 0.3s;
مدت زمان انتقال: 0.3 ثانیه;
}
.beleduzlopamges li: شناور (
پس زمینه: #FFF;
}
.beleduzlopamges li: قبل از (
ارتفاع خط: 32 پیکسل.
موقعیت: مطلق;
بالا: 4px;
سمت چپ: -39 پیکسل.
عرض: 39 پیکسل؛
text-align: center;
اندازه فونت: 16px;
فونت-وزن: پررنگ;
رنگ: # f9f5f5;
پس زمینه: # 275b88;
ضد افزایش: li;
محتوا: شمارنده (li);
مدت زمان انتقال: 0.2 ثانیه;
}
.beleduzlopamges li: شناور: قبل از (
عرض: 46 پیکسل؛
}
.beleduzlopamges li: پس از (
موقعیت: مطلق;
سمت چپ: 0;
بالا: 4px;
محتوا: ""؛
ارتفاع: 0;
عرض: 0;
حاشیه: 16 پیکسل جامد شفاف.
رنگ حاشیه چپ: # 275b88;
-webkit-transition-duration: 0.2s;
مدت زمان انتقال: 0.2 ثانیه;
}
.beleduzlopamges li: شناور: بعد از (
حاشیه سمت چپ: 6px;
}

3 گزینه سوم:

اسکریپت برای uCoz

الگوهای uCoz

طراحی سایت

سبک های سایت

یک ظاهر طراحی CSS

Nizualisanelag (
بالشتک: 0;
list-style: هیچکدام;
تنظیم مجدد: li;
}
nizualisanelag li (
موقعیت: نسبی;
بالشتک: 9px 17px 17px 25px;
حاشیه سمت چپ: 39 پیکسل؛
مدت زمان انتقال: 0.2 ثانیه;
مکان نما: اشاره گر
فونت-وزن: پررنگ;
رنگ: # 343638;
}
.nizualisanelag li: قبل از (
حاشیه: 3 پیکسل جامد شفاف.
ارتفاع خط: 35 پیکسل؛
موقعیت: مطلق;
بالا: 0;
سمت چپ: -29 پیکسل.
عرض: 41 پیکسل؛
text-align: center;
اندازه فونت: 14px;
فونت-وزن: پررنگ;
رنگ: # 619dce;
ضد افزایش: li;
محتوا: شمارنده (li);
مدت زمان انتقال: 0.3 ثانیه;

box-sizing: border-box;
}
nizualisanelag li: شناور: قبل از (
رنگ: # 337AB7;
}
nizualisanelag li: بعد از (
موقعیت: مطلق;
بالا: 0;
سمت چپ: -29 پیکسل.
عرض: 41 پیکسل؛
ارتفاع: 41px;
حاشیه: 5px جامد # 468bd0;
شعاع مرزی: 50%;
محتوا: ""؛
Opacity: 0.5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
nizualisanelag li: شناور: بعد از (
انیمیشن: 500ms ease-in-out 0s bounceIn;
کدورت: 1;
}

@keyframes bounceIn (
0% {
کدورت: 0;
تبدیل: scale3d (.3، 0.3، 0.3);
}
20% {
تبدیل: scale3d (1.3، 1.3، 1.3)؛
}
40% {
تبدیل: scale3d (.9، .9، 0.9);
}
60% {
کدورت: 1;
تبدیل: scale3d (1.03، 1.03، 1.03)؛
}
80% {
تبدیل: scale3d (.97، 0.97، 0.97);
}
به (
کدورت: 1;
تبدیل: scale3d (1، 1، 1)؛
}
}

انیمیشن زیبا

4 گزینه چهارم:

اولین عنصر برای سایت

عنصر دوم برای سایت

عنصر سوم برای سایت

عنصر چهارم برای سایت

عنصر پنجم برای سایت

بالشتک: 0;
list-style: هیچکدام;
}
.kudezamuden li (
padding: 6px;
}
.kudezamuden li: قبل از (
padding-right: 11px;
فونت-وزن: پررنگ;
رنگ: # 4979a0;
محتوا: "\ 2606"؛
مدت زمان انتقال: 0.4 ثانیه;
}
.kudezamuden li: شناور: قبل از (
رنگ: # 235e90;
محتوا: "\ 2605"؛
}

نسخه های قبلی

به طور کلی اینطور است انتخاب کوچکلیست‌ها، به مدیر وب‌سایت می‌دهد تا یک لیست زیبا در پورتال ایجاد کند، جایی که خودش می‌تواند آن را بیشتر ترتیب دهد، همانطور که می‌خواهد آن را ببیند.

اگر بخواهید موارد را به جای لیست گلوله ای در یک لیست شماره گذاری قرار دهید، از HTML مرتب شده در اینجا استفاده می شود. این لیست با استفاده از تگ ol ایجاد شده است. شماره گذاری از یک شروع می شود و برای هر آیتم لیست مرتب شده بعدی با یک برچسب li یک افزایش می یابد.

لیست های HTMLبرای گروه بندی اطلاعات مرتبط با هم استفاده می شود. سه نوع لیست وجود دارد:

لیست گلوله ای —

با نشانگر مشخص شده است،
لیست شماره گذاری شده —
1. با یک عدد مشخص شده است،
  لیست تعریف- - از جفت ترم تشکیل شده است
  —
  تعریف.
  هر فهرست ظرفی است که شامل موارد فهرست یا جفت‌های تعریف اصطلاح است. آیتم‌های فهرست مانند عناصر بلوک عمل می‌کنند، یکی زیر دیگری چیده می‌شوند و کل عرض بلوک ظرف را می‌گیرند. هر آیتم لیست دارای یک کادر اضافی در سمت خود است که در طرح بندی شرکت نمی کند.
  
  ایجاد لیست های HTML
  
  1. لیست گلوله ای
  
  لیست گلوله شدهیک لیست نامرتب است (از فهرست نامرتب انگلیسی)... ایجاد شده با تگ جفت شده
  ... نشانگر یک آیتم لیست یک برچسب است، به عنوان مثال، یک دایره پر شده.
  مرورگرها قالب بندی زیر را به صورت پیش فرض به کادر لیست اضافه می کنند:
  هر آیتم لیست با استفاده از یک جفت تگ ایجاد می شود
2. (از مورد فهرست انگلیسی).
- مایکروسافت
- گوگل
- سیب
برنج. 1. لیست گلوله ای
2. لیست شماره گذاری شده

لیست شماره گذاری شدهبا استفاده از یک تگ جفت ایجاد می شود. هر مورد لیست نیز با استفاده از عنصر ایجاد می شود
... مرورگر به طور خودکار عناصر را به ترتیب شماره گذاری می کند، و اگر یک یا چند عنصر از چنین لیستی را حذف کنید، بقیه اعداد به طور خودکار دوباره محاسبه می شوند.
کادر فهرست همچنین دارای سبک های پیش فرض مرورگر است:
ویژگی مقدار در دسترس است، که به شما امکان می‌دهد عدد پیش‌فرض را برای آیتم فهرست انتخاب‌شده تغییر دهید. به عنوان مثال، اگر برای اولین مورد در لیست تنظیم کنید

، سپس بقیه شماره گذاری نسبت به مقدار جدید مجدداً محاسبه می شود.

برای برچسب زدن

صفت	توضیحات، ارزش پذیرفته شده
معکوس شد	ویژگی reversed نمایش لیست را در آن مشخص می کند به صورت برعکس(به عنوان مثال، 9، 8، 7 ...).
شروع کنید	ویژگی start مشخص می کند مقدار اولیه، که از آن شماره گذاری شروع می شود، به عنوان مثال، ساخت و ساز اولین مورد اختصاص خواهد یافت شماره سریال"10". همچنین می توانید نوع شماره گذاری را همزمان تنظیم کنید، به عنوان مثال، .
نوع	ویژگی type نوع نشانگر مورد استفاده در لیست (به عنوان حروف یا اعداد) را مشخص می کند. مقادیر پذیرفته شده: 1 - مقدار پیش فرض، شماره دهی. الف - شماره گذاری لیست در به ترتیب حروف الفبا، حروف بزرگ (A، B، C، D). الف - شماره گذاری لیست به ترتیب حروف الفبا، حروف کوچک (a، b، c، d). I - شماره گذاری در اعداد بزرگ رومی (I، II، III، IV). i - شماره گذاری به اعداد کوچک رومی (i، ii، iii، iv).

مایکروسافت
گوگل
سیب

3. فهرست تعاریف

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

جعبه لیست تعریف دارای سبک های پیش فرض مرورگر زیر است:

برای برچسب ها

و

در دسترس.

کارگردان:: پتر توچیلین
قالب:: آندری گایدولیان; الکسی گاوریلوف; ویتالی گوگونسکی; ماریا کوژونیکوا

برنج. 3. فهرست تعاریف

4. لیست تو در تو

اغلب فرصت ها لیست های سادهکافی نیست، برای مثال، هنگام ایجاد فهرست مطالب، نمی توانید بدون آن کار کنید اقلام تو در تو... نشانه گذاری برای لیست تودرتو به صورت زیر خواهد بود:

بند 1.
نقطه 2.
- بند 2.1.
- بند 2.2.
  - بند 2.2.1.
  - بند 2.2.2.
- بند 2.3.
نکته 3.

برنج. 4. لیست تو در تو

5. فهرست شماره گذاری چند سطحی

یک لیست چند سطحی برای نمایش موارد لیست استفاده می شود سطوح مختلفبا تورفتگی های مختلف نشانه گذاری برای یک لیست شماره گذاری چندسطحی به صورت زیر خواهد بود:

پاراگراف
پاراگراف
1. پاراگراف
2. پاراگراف
3. پاراگراف
  1. پاراگراف
  2. پاراگراف
  3. پاراگراف
4. پاراگراف
پاراگراف
پاراگراف

این نشانه‌گذاری پیش‌فرض برای هر فهرست تودرتو، یک شماره‌گذاری تکی جدید ایجاد می‌کند. برای شماره گذاری تو در تو، باید از آن استفاده کنید خواص زیر:
counter-reset یک یا چند شمارنده را بازنشانی می کند و مقداری را برای تنظیم مجدد تنظیم می کند.
counter-increment مقدار افزایش شمارنده را مشخص می کند. هر مورد بعدی با چه مرحله ای شماره گذاری می شود.
محتوا - محتوای تولید شده، در در این موردوظیفه نمایش شماره در مقابل هر آیتم در لیست را بر عهده دارد.

Ol (/ * حذف شماره استاندارد * / list-style: هیچ؛ / * شمارنده را شناسایی کنید و نام آن را li کنید. مقدار شمارنده مشخص نشده است - به طور پیش فرض 0 * / counter-reset: li;) li : before (/ * عنصری را که باید شماره گذاری شود - li تعریف می کنیم. شبه عنصر قبل مشخص می کند که محتوای درج شده با استفاده از ویژگی content قبل از آیتم های لیست ظاهر می شود. این نیز مقدار افزایش شمارنده است (پیش فرض 1 است). * / Counter-increment: li; / * خاصیت content تعداد شمارنده های آیتم های لیست را نمایش می دهد () به این معنی که متن تولید شده مقدار تمام شمارنده های با آن نام است. یک دوره نقل قول یک دوره جداکننده بین اعداد و یک نقطه اضافه می کند. با یک فاصله قبل از محتویات هر آیتم لیست اضافه می شود * / محتوا: شمارنده ها (li، ".") ".";)
برنج. 5. فهرست شماره گذاری چند سطحی