از برچسب ها برای قالب بندی لیست های شماره دار استفاده می شود. نمونه هایی از طراحی شیک ul li لیست های CSS. جایی که سبک های لیست در قالب Twenty Eleven نوشته شده است
سلام، خوانندگان عزیز! امروز در ادامه سلسله مقالات زیر قسمت “HTML Basics” می خواهم الگوریتم ایجاد را به شما معرفی کنم. html را لیست می کندبا کمک برچسب‌ها ul و li (فهرست گلوله)، ol و li (فهرست شماره‌دار)، dl، dt، dd (لیست تعریف).
اکنون به شما در ادامه پرکاربردترین ها را معرفی می کنم با تگ های html، که برای ایجاد لیست در صفحات سایت استفاده می شود. اگر کسی نداند این چیست، مطمئناً پس از اطلاعات دریافت شده در زیر، بلافاصله متوجه می شود که در مورد چه چیزی صحبت می کنیم، زیرا این شکل ارائه مطالب بسیار رایج است.
لیست های گلوله ای HTML - برچسب های ul و li
لیست گلوله ای با تگ ul تعریف می شود. بین تگ های باز و بسته کننده ul عناصر لیستی وجود دارد که محتویات هر یک به نوبه خود باید بین تگ های باز و بسته کننده li قرار گیرد. اجازه دهید بلافاصله توجه کنم که تگ ul جفت است (وجود یک تگ باز و بسته)، و همچنین سطح بلوک، یعنی یک ظرف را تشکیل می دهد که شامل عناصر (خطوطی) است که هر بار توسط تگ li تشکیل می شود. بر این اساس، تگ li جفت شده و حروف کوچک است.
پیش فرض ظاهرنشانگر با یک دایره پر نشان داده می شود. با این حال، می توانید ظاهر آن را با استفاده از ویژگی type که دارای مقادیر زیر است تغییر دهید: دیسک، دایره، مربع. مقدار دیسک (که ظاهر نشانگر را به عنوان یک دایره پر شده تعیین می کند) پیش فرض است. یعنی اگر ویژگی type مشخص نشده باشد، ظاهر نشانگر شبیه یک دایره پر شده خواهد بود. اگر این ویژگی ها را به تگ ul اضافه کنیم، گزینه های زیر را دریافت می کنیم:
به طور طبیعی، هر نشانگر یک عنصر جداگانه است لیست گلوله ایمی توانید با تعیین مقادیر مناسب برای ویژگی type، ظاهر خود را به آن بدهید.
لیست های HTML شماره گذاری شده - برچسب های ol و li
حال بیایید ببینیم که چگونه یک لیست شماره گذاری شده با استفاده از تگ های ol (یک تگ بلوک و جفت شبیه به ul) تشکیل می شود. تگ li نیز در اینجا به عنوان برچسبی استفاده می شود که عناصر یک لیست شماره گذاری شده را در HTML تعریف می کند. لیست شماره گذاری شده مجموعه ای از عناصر شماره گذاری شده است. نوع شماره گذاری با ویژگی type تعیین می شود که می تواند مقادیر زیر را داشته باشد:
- الف - حروف لاتین بزرگ؛
- الف - حروف کوچک لاتین؛
- I - اعداد رومی بزرگ؛
- i - اعداد رومی کوچک؛
- 1 - اعداد عربی
|
|
|
|
|
|
|
|
|
|
شما همچنین می توانید یک لیست شماره گذاری شده ارائه دهید که در آن عناصر به ترتیب معکوس شماره گذاری می شوند، به عنوان مثال: 3، 2، 1. این کار با استفاده از ویژگی رزرو تگ ol انجام می شود.
همچنین گزینه ای برای شروع یک لیست گلوله ای از هر عددی غیر از 1 وجود دارد. برای این کار می توانید از ویژگی start استفاده کنید و فرقی نمی کند که ویژگی type روی چه مقداری تنظیم شده باشد. مثالی از استفاده از ویژگی name در ارتباط با معانی مختلفنوع ویژگی (1 و I):
لیست های تعریف HTML - برچسب های dl، dd، dt
نوع دیگری از لیست html، لیست تعریف است. به شرح زیر تشکیل می شود. محتوای این لیست بین تگ های باز و بسته dl قرار دارد که ظرف را تشکیل می دهند. تگ dt یک اصطلاح را تعریف می کند و تگ dd آن عبارت را توصیف می کند.
همانطور که می بینید محتوای تگ dt که یک اصطلاح است به سمت چپ منتقل می شود و محتوای تگ dd که یک تعریف است. این اصطلاح، با حروف مورب نوشته شده است. همه اینها با استفاده از سبک های مختلف CSS به دست می آید که مطمئناً در انتشارات آینده در مورد آنها صحبت خواهیم کرد.
به هر حال، واقعیت های مدرن به گونه ای است که زبان html را نمی توان جدا از آن در نظر گرفت، بنابراین، برای اینکه این مطالب مهم را از دست ندهید، از طریق فید RSS یا از طریق ایمیل در به روز رسانی وبلاگ مشترک شوید. موضوع مقاله امروز به پایان می رسد؛ اگر اطلاعات لازم را دریافت کرده اید، از استفاده از دکمه های شبکه های اجتماعی خودداری نکنید.
تنها تفاوت این است که این تگ به شدت برای شماره گذاری لیست ها ساخته شده است. نام تگ از مخفف انگلیسی "فهرست مرتب" - یک لیست شماره گذاری شده است.
نحو تگ کنید
- عنصر شماره 1
- عنصر شماره 2
- عنصر شماره 3
- ...
جایی که ویژگی type="value" می تواند مقادیر زیر را بگیرد
- A - نشانگرها را به شکل حروف لاتین بزرگ (A، B، C..) تنظیم می کند.
- الف - نشانگرها را به شکل حروف لاتین کوچک (a، b، c..) تنظیم می کند.
- I - نشانگرها را به شکل اعداد رومی بزرگ (I، II، III، IV..) تنظیم می کند.
- i - نشانگرها را به شکل اعداد رومی کوچک (i، ii، iii، iv..) تنظیم می کند.
- 1 (پیش فرض) - نشانگرها را به شکل اعداد عربی (1، 2، 3..) تنظیم می کند.
ویژگی start="value" مقدار اولیه (مقدار شروع) گزارش را مشخص می کند.
ویژگی reversed شمارش معکوس (در صورت لزوم) را مشخص می کند.
برچسب بزنید
- نیاز به استفاده اجباری از برچسب بسته شدن دارد
برای تشکیل عناصر لیست، از یک تگ جفت استفاده می شود
توجه داشته باشید
در داخل لیست می توانید حساب را به حساب خود تغییر دهید. برای این منظور یک مشخصه ویژه value="" روی تگ وجود دارد.
- عنصر شماره 1
- عنصر شماره 2
- عنصر شماره 3
نمونه هایی با لیست های شماره گذاری شده در html ( )
مثال 1. فهرست شماره دار HTML با حروف لاتین
مثال با حروف بزرگ
- عنصر شماره 1
- عنصر شماره 2
- عنصر شماره 3
- عنصر شماره 1
- عنصر شماره 2
- عنصر شماره 3
مثال با حروف کوچک
- عنصر شماره 10
- عنصر شماره 11
- عنصر شماره 12
این چیزی است که در صفحه به نظر می رسد:
- عنصر شماره 1
- عنصر شماره 2
- عنصر شماره 3
مثال 2. فهرست شماره دار HTML با حروف رومی
مثال با حروف بزرگ
- عنصر شماره 1
- عنصر شماره 2
- عنصر شماره 3
این چیزی است که در صفحه به نظر می رسد:
- عنصر شماره 1
- عنصر شماره 2
- عنصر شماره 3
مثال با حروف کوچک
- عنصر شماره 1
- عنصر شماره 2
- عنصر شماره 3
این چیزی است که در صفحه به نظر می رسد:
- عنصر شماره 1
- عنصر شماره 2
- عنصر شماره 3
مثال 3. لیست شماره دار html موقعیت شروع متفاوت
مثالی که قابلیت های ویژگی start را نشان می دهد که به شما امکان می دهد مقدار شروع شمارنده را تنظیم کنید.
- عنصر شماره 1
- عنصر شماره 2
- عنصر شماره 3
این چیزی است که در صفحه به نظر می رسد:
- عنصر شماره 1
- عنصر شماره 2
- عنصر شماره 3
مثال 4. تغییر تعداد در لیست های شماره دار html
در زیر نمونه ای با قابلیت تغییر مقادیر شمارنده با استفاده از ویژگی value هنگام نمایش عناصر جدید در تگ ها آورده شده است.
- عنصر شماره 1
- عنصر شماره 2
- عنصر شماره 3
- عنصر شماره 4
این چیزی است که در صفحه به نظر می رسد:
- عنصر شماره 1
- عنصر شماره 2
- عنصر شماره 3
- عنصر شماره 4
مثال 5. لیست شماره گذاری معکوس در html
در زیر نمونه ای از لیست شماره گذاری شده معکوس (شمارش به ترتیب معکوس) آورده شده است.
- عنصر شماره 1
- عنصر شماره 2
- عنصر شماره 3
- عنصر شماره 4
این چیزی است که در صفحه به نظر می رسد:
- عنصر شماره 1
- عنصر شماره 2
- عنصر شماره 3
- عنصر شماره 4
HTML مجموعه خاصی از تگ ها را برای ارائه اطلاعات در قالب لیست فراهم می کند. لیست ها یکی از رایج ترین اشکال ارائه داده ها هستند، هر دو در اسناد الکترونیکی، و در حال چاپ تقریباً هر روز با لیست‌هایی روبرو می‌شویم - می‌تواند فهرستی از خریدهای ضروری در یک فروشگاه، دانش‌آموزان در کلاس یا به سادگی کارهایی باشد که باید انجام شوند. توانایی سازماندهی ساختارهای فهرست در بسیاری از موارد موجود است ویرایشگرهای متن، به ویژه، یک واژه پرداز قدرتمند مایکروسافت ورددارای ابزارهای قالب بندی لیست مناسب است انواع مختلف(امکان ایجاد لیست های HTML زمانی که کمک مایکروسافتکلمه در فصل 8 مورد بحث قرار گرفته است). در اینجا تعدادی از موارد وجود دارد که استفاده از لیست ها برای آنها بسیار راحت است:
- ترکیب قطعات اطلاعات در یک ساختار واحد برای ایجاد ظاهری خوانا.
- شرح فرآیندهای پیچیده گام به گام.
- ترتیبی از اطلاعات به سبک فهرست مطالب، با پاراگراف هایی که به بخش های مرتبط سند اشاره می کنند.
توجه داشته باشید که نکات فوق دقیقاً در قالب یک ساختار فهرست سازماندهی شده اند.
HTML انواع اصلی لیست های زیر را ارائه می دهد: لیست گلوله ای، شماره گذاری شده و لیست تعریف. برای پیاده سازی لیست ها انواع مختلفاز تگ های زیر استفاده می شود:
- ,
- (LI - آیتم فهرست، عنصر فهرست). برچسب بزنید
- نیازی به برچسب بسته شدن مربوطه ندارد، اگرچه وجود آن در اصل ممنوع نیست. مرورگرها معمولاً هر بار که یک سند را نمایش می دهند شروع به کار می کنند. عنصر جدیدلیست از یک خط جدید
اطلاعات ارائه شده برای ایجاد یک لیست گلوله ای اولیه کافی است. بیایید نمونه ای از یک سند HTML را با استفاده از یک لیست گلوله ای ارائه دهیم که نمایش آن توسط مرورگر در شکل نشان داده شده است. 2.1.
نمونه لیست گلوله شده - برج حمل
- ثور
- دوقلوها
- سرطان
- یک شیر
- باکره
- ترازو
- عقرب
- قوس
- برج جدی
- دلو
- ماهی
علائم زودیاک:
برنج. 2.1.نمایش فهرست گلوله‌ای در مرورگر
توجه داشته باشید که علاوه بر عناصر لیست که با تگ مشخص شده اند
- ، سایر عناصر HTML ممکن است وجود داشته باشد. در مثال بالا، یکی از این عناصر متن ساده است که یک آیتم لیست نیست، بلکه به عنوان عنوان آن عمل می کند.
توجه داشته باشید
برخی از کتاب‌های درسی در زبان HTML نشان می‌دهند که باید از یک برچسب ظرف برای تنظیم عنوان لیست استفاده شود.
(LH - سرصفحه فهرست، سرصفحه فهرست). این تگ در حال حاضر توسط هیچ مرورگر رایجی شناسایی نمی شود و بخشی از مشخصات HTML نیست. بنابراین، استفاده از آن بی معنی می شود، اگرچه منجر به هیچ خطایی نخواهد شد. در تگ
- دو پارامتر را می توان مشخص کرد: COMPACT و TYPE.
- .
ورودی نمونه:
-
.
توجه داشته باشید
مرورگرها مشخصات نوع گلوله را برای یک آیتم فهرست جداگانه تفسیر می کنند. مرورگر Netscape ظاهر نشانگر را برای این و همه موارد بعدی تغییر می دهد تا زمانی که با تعریف مجدد بعدی ظاهر نشانگر مواجه شود. مرورگر اینترنت Explorer ظاهر نشانگر را فقط برای تغییر می دهد از این عنصر.
نشانگرهای لیست گرافیکی
می‌توانید از تصاویر گرافیکی به‌عنوان گلوله‌های فهرست استفاده کنید، که به طور گسترده برای ایجاد اسناد HTML جذاب و با طراحی خوب استفاده می‌شود. در واقع این امکان به طور مستقیم توسط زبان HTML ارائه نمی شود، بلکه تا حدودی به صورت مصنوعی پیاده سازی می شود. این بدان معنا نیست که انجام این کار توصیه یا مذموم نیست، بلکه تنها به این معنا نیست که هیچ ساختار زبان HTML خاصی در اینجا استفاده نخواهد شد.
برای درک این ایده، باید مکانیسم پیاده سازی لیست ها در صفحات HTML را درک کنید. به نظر می رسد که تگ لیست
- (در واقع، برچسب های لیست از انواع دیگر، که در زیر مورد بحث قرار گرفته است) یک کار واحد را انجام می دهد - به مرورگر می گوید که تمام اطلاعاتی که بعد از این برچسب قرار دارند باید به میزان مشخصی به سمت راست (تورفتگی) منتقل شوند. برچسب ها
- ، که به موارد منفرد لیست اشاره می کنند، نشانگرهای استاندارد آیتم لیست را ارائه می دهند.
اگر ما نیاز به ساخت لیستی با نشانگرهای گرافیکی داشته باشیم، می‌توانیم بدون تگ کار کنیم
- . درج تصویر گرافیکی مورد نظر قبل از هر عنصر از لیست کافی خواهد بود. تنها مشکلی که باید حل شود جداسازی عناصر لیست از یکدیگر است. برای این کار می توانید از تگ های پاراگراف استفاده کنید
یا به اجبار یک خط تغذیه کنید
. نمونه ای از پیاده سازی لیست با نشانگرهای گرافیکی که نمایش آن در شکل نشان داده شده است. 2.2 در زیر نشان داده شده است:لیست گلوله شده علائم زودیاک:
برج حمل
برنج. 2.2.لیست گلوله شده با گلوله های گرافیکی
در مثال داده شده، فایل گرافیکی Green_ball.gif به عنوان نشانگر آیتم لیست استفاده می شود. توجه داشته باشید که استفاده از گرافیک در صفحات HTML می تواند میزان انتقال اطلاعات را به میزان قابل توجهی افزایش دهد. با این حال، در این مورد این افزایش بسیار ناچیز است. در اینجا از همان فایل برای همه نشانگرها استفاده می شود،
که فقط یک بار مخابره می شود. اندازه فایل یک تصویر کوچک نیز بسیار کوچک است.
توجه داشته باشید
تکنیک های ایجاد لیست با گلوله های گرافیکی به نوبه خود در فصل 8 مورد بحث قرار گرفته است.
لیست شماره گذاری شده
نوع دیگری از لیست پیاده سازی شده در HTML لیست شماره گذاری شده است. در غیر این صورت لیست هایی از این نوع را مرتب می گویند. نام خانوادگی اغلب به عنوان ترجمه رسمی نام تگ مربوطه استفاده می شود
- ، با کمک آن لیست هایی از این نوع در اسناد HTML سازماندهی می شوند (OL - Ordered List, ordered list).
- .
در اینجا یک مثال از یک سند HTML با استفاده از یک لیست شماره گذاری شده است: نمایش آنمرورگر در شکل نشان داده شده است. 2.3.
نمونه ای از لیست شماره گذاری شده - سیریوس
- K آنوپوس
- آرکتوروس
- آلفا قنطورس
- وگا
- K appella
- ریگل
- پروسیون
- آچرنار
- بتا قنطورس
- Wetelgeuse
- آلدباران
. . .- میزار
. . .- قطبی
درخشان ترین ستاره های قابل مشاهده از زمین:
برنج. 2.Z.لیست شماره گذاری شده
در تگ
- پارامترهای زیر را می توان مشخص کرد: COMPACT، TYPE و START.
- .
ورودی نمونه:
- .
پارامتر تگ START
- به شما اجازه می دهد تا لیست را از چیزی غیر از یک شروع کنید. مقدار پارامتر START همیشه باید یک عدد طبیعی باشد، صرف نظر از نوع شماره گذاری لیست. در اینجا یک مثال است:
- برای لیست های شماره گذاری شده، امکان استفاده از پارامترهای TYPE و VALUE را فراهم می کند. پارامتر TYPE می تواند همان مقادیری را که برای تگ دریافت می کند، داشته باشد
- .
- .
توجه داشته باشید
مرورگرها نوع شماره گذاری را برای یک آیتم فهرست جداگانه تفسیر می کنند. مرورگر نت اسکیپ نوع شماره گذاری این عنصر و تمام موارد بعدی را تا زمانی که با لغو بعدی مواجه شود تغییر می دهد. اینترنت اکسپلورر ظاهر شماره را فقط برای این عنصر تغییر می دهد.
زمقدار پارامتر تگ VALUE
- - به شما امکان می دهد تعداد یک عنصر لیست داده شده را تغییر دهید. این شماره گذاری تمام عناصر بعدی را تغییر می دهد. یک برنامه معمولی لیست هایی است که برخی از عناصر از دست رفته است. نمونه ای از چنین لیستی در بالا آورده شد (شکل 2.3). فهرستی منظم از درخشان‌ترین ستارگان را ارائه می‌کند که در آن مکان‌های 58 و 75 شامل ستارگانی هستند که در عرض جغرافیایی ما به وضوح قابل مشاهده هستند (میزار درخشان‌ترین ستاره در صورت فلکی دب اکبر و قطبی درخشان‌ترین ستاره در صورت فلکی دب صغیر است) .
بیایید یک مثال اصلی دیگر از استفاده از انواع مختلف شماره گذاری ارائه دهیم. کد HTML زیر شامل سه لیست با شماره گذاری متفاوت است. برای سهولت مشاهده، هر یک از لیست ها در یک سلول جدول جداگانه قرار می گیرند. هر سه لیست یکسان هستند و فقط در نوع شماره گذاری متفاوت هستند: در ستون اول جدول اعداد عربی وجود دارد، در دوم - اعداد رومی، و در سوم شماره گذاری با حروف لاتین است. لطفاً توجه داشته باشید که عناصر لیست خالی هستند، یعنی بعد از هر تگ
- هیچ داده ای وجود ندارد نمونه ای از این نوع را می توان به عنوان جدول تناظر بین نوشتن اعداد به اعداد عربی و رومی استفاده کرد. به نظر می رسد که هر مرورگری که از لیست ها پشتیبانی می کند می تواند به عنوان تولید کننده چنین جدولی استفاده شود (شکل 2.4)، فقط باید کد HTML داده شده را تایپ کنید. شماره گذاری در اعداد رومی تا مقدار 3999 به درستی کار می کند. با مطالعه ستون سمت راست می توانید متوجه شوید که چگونه شماره گذاری در حروف رومی انجام می شود. هنگامی که شماره یک حرفی (از A تا Z) تمام شد، شماره دو حرف اول به عنوان عدد بعدی در نظر گرفته می شود - AA و غیره.
استفاده از انواع مختلف شماره گذاری در لیست ها -
. . .
-
. . .
-
. . .
برنج. 2.4.انواع مختلف شماره گذاری لیست HTML
فهرست تعاریف
لیست های تعریف، که به آنها دیکشنری های تعریف نیز می گویند، نوع خاصی از فهرست ها هستند. بر خلاف انواع دیگر لیست ها، هر عنصر از لیست تعریف همیشه از دو بخش تشکیل شده است. قسمت اول عنصر لیست شامل اصطلاحی است که تعریف می شود و قسمت دوم حاوی متنی به شکل مدخل فرهنگ لغت است که معنای اصطلاح را نشان می دهد.
لیست های تعریف با استفاده از یک برچسب ظرف مشخص می شوند
- (فهرست تعریف). داخل ظرف با برچسب
- (اصطلاح تعریف) عبارت در حال تعریف مشخص شده است و برچسب
- (تعریف توضیحات) - یک پاراگراف با تعریف آن. برای برچسب ها
- و
- می توانید تگ های پایانی مربوطه را حذف کنید.
به طور کلی فهرست تعاریف به صورت زیر نوشته شده است:
- مدت، اصطلاح
- تعریف اصطلاح
در متن بعد از تگ
- عناصر سطح بلوک مانند تگ های پاراگراف را نمی توان استفاده کرد
یا هدرها
-
. به عنوان یک قاعده، متن عبارت تعریف شده باید در یک خط قرار گیرد. متن حاوی تعریف اصطلاح با شروع از خط بعدی (یا هر خط برای برخی مرورگرها) پس از تعریف اصطلاح، با تورفتگی در سمت راست نمایش داده می شود. در اطلاعاتی که بعد از تگ قرار داده شده است
- ، عناصر سطح بلوک را می توان قرار داد. به‌ویژه از این نتیجه می‌آید که فهرست‌هایی از تعاریف را می‌توان تودرتو کرد.
در تگ
- ممکن است یک پارامتر COMPACT مشخص شود که هدف آن شبیه به لیست های دیگر توضیح داده شده در بالا است.
- فرد بلغمی
- منفعل، بسیار سخت کوش، آهسته در سازگاری؛
خلق و خوی پایدار، کمی مستعد تأثیر خارجی است.
بی حالی واکنش های عاطفی و کندی در فعالیت ارادی
- سانگوئن
- فعال، پرانرژی، سازگار، -
سرزندگی و تحرک واکنش های عاطفی، سرعت و قدرت تظاهرات ارادی
- وبا
- فعال، بسیار پرانرژی، مداوم؛
تند و قدرت واکنش های عاطفی، تظاهرات خشونت آمیز اراده
- مالیخولیایی
- منفعل، به راحتی خسته، سخت برای سازگاری، -
ضعف تظاهرات ارادی و غلبه خلق افسرده، شک به خود - زمپیا
- ماه
- Mapc
- فوبوس
- دیموس
- اورانوس
- آریل
- چتر
- تیتانیا
- اوبرون
- میراندا
- نپتون
- تریتون
- نرید
لیست ها می توانند شماره گذاری یا بدون شماره باشند.
لیست های شماره گذاری شده با کد خروجی می شوند:
- لیست با اعداد
- بند 1
- نقطه 2
- نقطه 3
لیست های بدون شماره با کد زیر نمایش داده می شوند:
- فهرستی با علامت های چک یا سایر نمادها
- بند 1
- بند 1
- بند 1
هر مورد در هر لیست در یک تگ li محصور شده است. همه موارد لیست در یک تگ مشترک ul یا ol قرار می گیرند. سبک های این تگ ها در شیوه نامه نوشته شده است.
به هر تگ سبک های طراحی خاصی اختصاص داده شده است. آنها تورفتگی هایی را از متن نشان می دهند.
برای یک لیست شماره گذاری شده، سبک های شماره گذاری برای هر مورد مشخص می شود.
اعداد استاندارد عربی با مقدار اعشاری توصیف می شوند.
list-style-type: اعشاری; /*اعداد عربی*/
برای یک لیست گلوله‌ای، سبک کاراکتر را مشخص کنید - مربع یا دایره.
list-style-type: حلقه; /*دایره ها*/
list-style-type: مربع; /*مربع*/به هر آیتم منو می توان یک تصویر اختصاص داد.
list-style-image: url('path to image');
به طور معمول، در قالب ها، یک لیست شماره دار با اعداد ساده و یک لیست بدون شماره با مربع و دایره سیاه قالب بندی می شود. خسته کننده و بی بیان است. بیایید این را درست کنیم.
استایل های لیست نوشته شده در قالب بیست یازده کجا هستند؟
فایل style.css را باز کنید. بخشی به نام /* عناصر متن */ را پیدا کنید
کد استاندارد به شکل زیر است:
چگونه یک لیست شماره دار ایجاد کنیم؟
لیست شماره گذاری شده با استفاده از پس زمینه
به این طراحی لیست شماره گذاری شده زیبا نگاه کنید.
پسندیدن؟ بیایید تکرار کنیم.
سبک هایی را برای تگ ol بیابید. خواص جدیدی به آن اضافه کنید.
Ol ( بالشتک: 0px 0 0 20px؛ حاشیه: 0.5em 0 1.571em 1.9em؛ رنگ: #2E2E2E؛ نوع فهرست: هیچکدام؛ فونت: 15px/17px Verdana، Arial، Helvetica، sans-index; z- : 2؛ تنظیم مجدد: نقطه؛ ol li ( حاشیه-پایین: 4 پیکسل؛ ارتفاع خط: 1.6؛ رنگ: #2E2E2E؛ موقعیت: نسبی؛ ) ol li: قبل (حاشیه-پایین: 4 پیکسل؛ افزایش متقابل: نقطه 1؛ ارتفاع خط: 1.6؛ ارتفاع: 24 پیکسل؛ حاشیه سمت چپ: -36 پیکسل؛ سمت چپ: 0 پیکسل؛ عرض: 24 پیکسل؛ حاشیه بالا: 1 پیکسل؛ پس‌زمینه: #BDC3C7؛ محتوا: شمارنده (نقطه)؛ تراز متن: مرکز؛ موقعیت: مطلق؛ وزن قلم: پررنگ؛ )
برای اینکه بفهمید کجا و چه چیزی باید متناسب با طراحی خود تغییر دهید، بیایید این کد را قطعه قطعه کنیم.
list-style-type: هیچکدام; - خروجی اعداد استاندارد را غیرفعال می کند
ضد تنظیم مجدد: نقطه; - یک متغیر برای شمارنده شماره گذاری تنظیم می کند
موقعیت: نسبی; - شماره گذاری مکان ها در کنار خود مواردbefore یک عنصر شبه برای تگ ol li است. دارای سبک های زیر:
محتوا: counter(point); - مقدار یک متغیر را نمایش می دهد
افزایش متقابل: نقطه 1; - شمارنده را 1 افزایش می دهد
موقعیت: مطلق;
پس زمینه: #BDC3C7; - پس زمینه اعداد (پس زمینه را می توان با یک رنگ یا یک نماد زیبا تنظیم کرد
حاشیه - حاشیه های خارجی
padding – بالشتک داخلی
رنگ - رنگ متن عنصر
پس زمینه - پس زمینه
text-align – تراز متن
وزن قلم – ضخامت قلم (اشباع)در سبک های خود، می توانید هر رنگ، تراز، اندازه فونت و تورفتگی را تنظیم کنید.
لیست شماره گذاری شده با یک تصویر منحصر به فرد برای هر مورد
سایت یک زنانه لیست های شماره گذاری شده بسیار جذابی دارد.
این چگونه اجرا می شود؟ بیایید به کد زیر نگاه کنیم:
/*نخستین شماره*/ ol li:first-child ( list-style-image: url(مسیر به تصویر با شماره 1)؛ ) /*scond number*/ ol li:nth-child(2n) (list-style- image: url(مسیر به تصویر با عدد 2)؛ ) /*شماره سوم*/ ol li:nth-child(3n) ( list-style-image: url(مسیر به تصویر با عدد 3)؛ ) /*شماره چهارم */ ol li:nth-child(4n) ( list-style-image: url(مسیر به تصویر با عدد 4)؛ ) /*بعد دقیقاً همان را فقط برای اعداد مورد بعدی می نویسیم* /
در کد چنین لیست شماره گذاری شده ای، باید تمام شماره آیتم ها را فهرست کنید و به هر یک از آنها یک نماد منحصر به فرد اختصاص دهید.
اگر از 20 مورد شماره گذاری شده در لیست ها در مقالات استفاده می کنید، باید شبه کلاس nth-child(An) را 20 بار بنویسید. به طوری که آخرین مورد در سبک ها nth-child(20n) شبه کلاس است.
خطوطی را در فایل styles که طراحی لیست شماره گذاری شده را توصیف می کند (برچسب های ol li) پیدا کنید.
شبه کلاس فرزند اول را به آن اضافه کنید. یک بار آن را کپی و پیست کنید، سپس این ویژگی را به nth-child(An) تغییر دهید و هر تعداد عددی را که می خواهید کپی کنید تا نماد خودش را داشته باشد. شماره اقلام را وارد کنید
برای هر عدد، ویژگی list-style-image را با نماد منحصر به فرد خود اضافه کنید.
اگر نمادهای سایت دور از آیتم ها قرار دارند یا روی آنها همپوشانی دارند، باید تراز و تورفتگی آیکون های دیجیتال یا متن آیتم ها را ویرایش کنید.
چگونه یک لیست گلوله ای (بدون شماره) ایجاد کنیم؟
لیست گلوله شده ul li با نمادهای متناوب
من این لیست گلوله ای را خیلی دوست داشتم.
Ul ( بالشتک: 11px 0 5px 0; ) ul li ( بالشتک-سمت چپ: 32px؛ حاشیه-پایین: 10px؛ قلم: معمولی 15px Verdana، sans-serif؛ رنگ: #2E2E2E؛ ارتفاع خط: 1.6؛ حاشیه-پایین: 1px خط چین #cccc؛ padding-bottom: 10px; ) ul li:before ( محتوا: ""؛ موقعیت: مطلق؛ عرض: 27px؛ ارتفاع: 24px؛ حاشیه سمت چپ: -35px؛ حاشیه-بالا: -2px؛ پس زمینه: url("images/sprite.jpg") 0px 2px بدون تکرار؛ لیست-سبک-نوع: دایره؛ ) ul li:nth-child(2n):before ( محتوا: ""؛ موقعیت: مطلق؛ عرض: 27px; ارتفاع: 43 پیکسل؛ حاشیه چپ: -35 پیکسل؛ حاشیه بالا: -2 پیکسل؛ پس‌زمینه: url ("images/sprite.jpg") 0 پیکسل - 17 پیکسل بدون تکرار؛ نوع فهرست: دایره؛ )
به‌جای نوع استاندارد list-style، می‌توانید ویژگی «path to the icon» را اختصاص دهید - list-style-image:url. اما پس از آن باید یک حاشیه سمت چپ خارجی را از لبه های سایت مشخص کنید - بدون آن، نمادها نمایش داده نمی شوند و از منطقه محتوا فراتر می روند.
برای آزمایش، می توانید تورفتگی ها را اختصاص دهید:
Ul li(list-style-image: url(images/radio.png)؛ حاشیه سمت چپ: 30px؛ )
تناوب نمادها را می توان با ویژگی nth-child(An) تنظیم کرد. مثال بالا از شبه عنصر قبل استفاده می کند.
کد شامل یک شبه کلاس nth-child (2n) است. مقدار آن 2 است. معلوم می شود که هر نقطه زوج با نماد دیگری مطابقت دارد. اگر به جای 2n 2n+1 بنویسید، نماد دیگری در نقاط فرد ظاهر می شود.
برای هر آیتم لیست، می توانید یک خط زیر مشخص کنید. در مثال بالا، نقاط با خطوط نقطه چین خط کشیده شده اند.
همچنین می‌توانید قاب‌ها، پس‌زمینه‌ها و آیکون‌ها را به هر مورد اختصاص دهید. فقط زیاده روی نکنید. هدف ما این نیست که همه را با یک طراحی فانتزی منفجر کنیم، بلکه بهبود کیفیت درک محتوا است.
چگونه چندین لیست با طرح های مختلف را در یک صفحه نمایش دهیم؟
گاهی اوقات لازم است چندین لیست با سبک های مختلف قرار دهید.
اگر سبک های مشترکی را اختصاص دهید، طرح یکسان به همه لیست ها اختصاص داده می شود. اگر یک شناسه جداگانه به تگ ol یا ul اختصاص دهید و آن را در حالت html ویرایش مقاله وارد کنید، لیست های مختلفی می توانند نمایش داده شوند. خوب، در فایل style برای این id باید استایل های جداگانه بنویسید.
به عنوان مثال، در اینجا یک گزینه خوب طراحی محتوا وجود دارد:
در HTML لیست را به صورت زیر می نویسید:
- محتوا
- بند 1
- نقطه 2
- نقطه 3
در CSS شما می توانید سبک هایی مانند این را بنویسید:
Ol#sod( بالشتک: 0px 20px 10px 51px؛ حاشیه: 0.5em 0 0em 1em؛ رنگ: #2E2E2E؛ نوع فهرست: هیچکدام؛ پس‌زمینه: #f1f4f5؛ حاشیه سمت چپ: #BDC3C7 4px توپر؛ نمایشگر در خط: block; ) ol#sod li() ol#sod li:before( font-weight: normal !important )
سبک جدید در طراحی تگ ol با سبک اصلی متفاوت است: پس زمینه، سبک نمایش، خط سمت چپ محتوا.
با استفاده از چندین لیست از طرح های مختلف در متن، ارائه اطلاعات را جذاب تر خواهید کرد. هنگام فهرست کردن هر آیتمی، می‌توانید برخی از نمادها را تنظیم کنید، و هنگام فهرست کردن اقدامات، می‌توانید نمادهای مختلفی را تنظیم کنید. در اینجا طراحی فقط با تخیل شما محدود می شود.
این روش ها در طراحی آیتم های منو، سرفصل ها و هر عنصر دیگر سایت نیز قابل اجرا هستند.
چگونه لینک های لنگر را در لیست محتوا ایجاد کنیم؟
چگونه آنها را در کد HTML بنویسیم؟ یک تکه کد لنگر لینک را قاب می کند و یک قطعه کد دیگر در کنار جایی قرار می گیرد که هنگام کلیک روی لینک باید به آنجا هدایت شویم.
- محتوا
- سرفصل 1
- سرفصل 2
- سرفصل 3
و در متن مقاله باید این را بنویسید:
عنوان 1… عنوان 2… عنوان 3…
شاید وب مسترهای با تجربه تر بتوانند در مورد چیزی من را اصلاح کنند. من به سادگی آنچه را که خودم در عمل امتحان کرده ام توصیه می کنم.
اگر باز هم سوالی دارید، خوشحال می شوم که آنها را در نظرات ببینم.
آگیوا ورونیکا.
همچنین ممکن است که شما علاقه مند باشید به:
اگر تصمیم دارید لیست های استاندارد ul و li را تغییر دهید، این موضوع برای شما جالب خواهد بود. زیرا در اینجا چندین راه حل اصلی را یاد خواهید گرفت. که مطمئناً به شما کمک می کند تا ظاهر استاندارد را به یک ظاهر منحصر به فرد تغییر دهید، جایی که از سبک CSS برای طراحی لیست ها استفاده می شود. مزیت این است که ما فقط از یک کلاس در سراسر استفاده خواهیم کرد که ظاهر را به شدت تغییر می دهد. علاوه بر این پارامترها، می توانید تعیین کنید که لیست از چه شماره ای شروع شود؛ در اینجا می توانید همه کارها را خودتان انجام دهید. مقدار شروع پیش‌فرض برای لیست‌های شماره‌دار در اولین یا حرف A است.با خارج شدن از اصول اولیه، اکنون نگاهی دقیق‌تر به عناصر مورد استفاده برای ارائه ساختار و معنا به بخش‌های مختلف طراحی خواهیم داشت. اگر کسی نمی داند، ul و li گزینه بسیار بهتری نسبت به ساده هستند متن متنزیرا وقتی متن پیچیده می شود، به خصوص در تلفن همراه، کاملا فرورفته می شود و دور نشانگر نمی پیچد.
لیست ها به عنوان یک راه عالی برای ارائه اطلاعات در صفحات در نظر گرفته می شوند، زیرا خواندن آنها آسان است و خوب به نظر می رسند. به نظر می رسد بسیاری از مردم فکر می کنند که نقاط گلوله تصاویر کوچکی هستند، اما در واقع همه آنها از طریق کد نسبتاً ساده HTML ایجاد می شوند. می توانید جاسازی کنید انواع متفاوتدر صورت تمایل به یکدیگر فهرست می شود، فقط به یاد داشته باشید که آنها را به درستی ببندید. شما می توانید با متن مورد نظر خود در تمام این دستورات لیست بازی کنید.
همچنین باید بدانید که لیست ها در ابتدا شامل چندین عنصر هستند:
1 . اطلاعات بی نظم
2 . اطلاعات سازماندهی شده
3 . تعاریفبیایید نصب را شروع کنیم:
1. گزینه:
- مورد فهرست
- لیست منحصر به فرد
- لیست های اصلی
- ZORNET.RU - مدیر وب سایت
- یه لیست دیگه
CSSکسانگلوپان (
حاشیه: 19px 0 0;
بالشتک: 0;
list-style: هیچکدام;
تنظیم مجدد: li;
}
ksangelopan li (
حاشیه: 2px جامد #3575ad;
پس زمینه: #d7dee4;
موقعیت: نسبی;
حاشیه پایین: 17 پیکسل.
بالشتک: 15px 9px;
}
ksangelopan li:hover (
z-index: 1;
}
ksangelopan li:before (
حاشیه: 2px جامد #2270b3;
موقعیت: مطلق;
بالا: -14px;
padding: 3px 9px;
اندازه فونت: 11px;
فونت-وزن: پررنگ;
رنگ: #246 eaf;
پس زمینه: #f2f4f7;
ضد افزایش: li;
محتوا: counter(li);
-webkit-transition-duration: 0.4s;
مدت زمان انتقال: 0.4 ثانیه;
}
ksangelopan li:hover:before (
پس زمینه: #2672b3;
رنگ: #f7f9fb;
-webkit-transform: translate(-11px, 0);
-ms-transform: translate(-11px, 0);
-o-transform: translate(-11px, 0);
transform: translate(-11px, 0);
}
.ksangelopan li:after (
محتوا: ""؛
موقعیت: مطلق;
مدت زمان انتقال: 0.3 ثانیه;
-webkit-transition-property: عرض.
transition-property: width;
z-index: -1;
پس زمینه: #FFF;
ارتفاع: 100%;
سمت چپ: 0;
بالا: 0;
عرض: 0;
}
ksangelopan li:hover:after (
عرض: 100%؛
}
این همه برای نصب است.2 گزینه دوم:
- مورد فهرست
- لیست منحصر به فرد
- لیست های اصلی
- ZORNET.RU - مدیر وب سایت
- یه لیست دیگه
CSSBeleduzlopamges (
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:hover (
پس زمینه: #FFF;
}
.beleduzlopamges li:before (
ارتفاع خط: 32 پیکسل؛
موقعیت: مطلق;
بالا: 4px;
سمت چپ: -39px;
عرض: 39 پیکسل؛
text-align: center;
اندازه فونت: 16px;
فونت-وزن: پررنگ;
رنگ: #f9f5f5;
پس زمینه: #275b88;
ضد افزایش: li;
محتوا: counter(li);
مدت زمان انتقال: 0.2 ثانیه;
}
.beleduzlopamges li:hover:before (
عرض: 46 پیکسل
}
.beleduzlopamges li:after (
موقعیت: مطلق;
سمت چپ: 0;
بالا: 4px;
محتوا: ""؛
ارتفاع: 0;
عرض: 0;
حاشیه: 16 پیکسل جامد شفاف.
حاشیه-چپ-رنگ: #275b88;
-webkit-transition-duration: 0.2s;
مدت زمان انتقال: 0.2 ثانیه;
}
.beleduzlopamges li:hover:after (
حاشیه-چپ: 6px;
}
شما می توانید به طور مستقل گامای مرکزی را برای مطابقت با سبک اصلی سایت تنظیم کنید.3 گزینه سوم:
- اسکریپت برای uCoz
- الگوهای uCoz
- طراحی سایت
- سبک های وب سایت
- استایل دهی با CSS
CSSNizualisanelag (
بالشتک: 0;
list-style: هیچکدام;
تنظیم مجدد: li;
}
nizualisanelag li (
موقعیت: نسبی;
padding: 9px 17px 17px 25px;
حاشیه سمت چپ: 39 پیکسل؛
مدت زمان انتقال: 0.2 ثانیه;
مکان نما: اشاره گر
فونت-وزن: پررنگ;
رنگ: #343638;
}
nizualisanelag li:before (
حاشیه: 3px جامد شفاف.
ارتفاع خط: 35 پیکسل؛
موقعیت: مطلق;
بالا: 0;
سمت چپ:-29px;
عرض: 41 پیکسل
text-align:center;
اندازه فونت: 14px;
فونت-وزن: پررنگ;
رنگ: #619dce;
ضد افزایش: li;
محتوا: counter(li);
مدت زمان انتقال: 0.3 ثانیه;
box-sizing: border-box;
}
nizualisanelag li:hover:before (
رنگ: #337AB7;
}
.nizualisanelag li:after (
موقعیت: مطلق;
بالا: 0;
سمت چپ: -29px;
عرض: 41 پیکسل؛
ارتفاع: 41px;
حاشیه: 5px جامد #468bd0;
شعاع مرزی: 50%;
محتوا: ""؛
Opacity: 0.5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
nizualisanelag li:hover:after (
انیمیشن: 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، .9);
}
60% {
کدورت: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, 0.97, 0.97);
}
به(
کدورت: 1;
تبدیل: scale3d(1, 1, 1);
}
}
همراه با انیمیشن زیبا4 گزینه چهارم:
- اولین عنصر برای سایت
- عنصر دوم برای سایت
- عنصر سوم برای سایت
- عنصر چهارم برای سایت
- عنصر پنجم برای سایت
CSSبالشتک: 0;
list-style: هیچکدام;
}
.kudezamuden li(
padding: 6px;
}
.kudezamuden li:before (
padding-right: 11px;
فونت-وزن: پررنگ;
رنگ: #4979a0;
محتوا: "\2606";
مدت زمان انتقال: 0.4 ثانیه;
}
.kudezamuden li:hover:before (
رنگ: #235e90;
محتوا: "\2605";
}
مشابه نسخه های قبلی، فقط خود آیکون تغییر کرده است.به طور کلی، این مجموعه کوچکی از لیست ها است که به استاد وب اجازه می دهد تا یک لیست زیبا در پورتال ایجاد کند، جایی که می تواند آن را بیشتر طراحی کند، همانطور که خودش می خواهد آن را ببیند.
اگر بخواهید موارد را به جای لیست گلوله‌دار در یک لیست شماره‌دار قرار دهید، از HTML مرتب شده استفاده می‌شود. این لیست با استفاده از تگ ol ایجاد شده است. شماره گذاری از یک شروع می شود و برای هر عنصر لیست مرتب شده بعدی با تگ li یک افزایش می یابد.
در اینجا نمونه ای از یک سند HTML است که از لیستی از تعاریف استفاده می کند:
مثال لیست تعریف طبقه بندی خلق و خوی معمولی انسان،
مستقردر مورد دیدگاه بقراط
نمایش سند HTML داده شده در مرورگر در شکل نشان داده شده است. 2.5.
برنج. 2.5.فهرست تعاریف (شبیه به گروهی از مدخل ها در فرهنگ لغت)
نوع لیست ها
و - .
این نوع لیست ها در ابتدا به گونه ای طراحی شده بودند که فشرده تر از لیست های گلوله ای معمولی باشند. طبق قوانین نوشتن عناصر این لیست ها، استفاده از عناصر بلوک در آنها مجاز نبود، به این معنی که اجرای تودرتو لیست هایی از این نوع غیرممکن بود. هر عنصر لیست یک خط متن بود.
برای لیست هایی مانند
برنامه ریزی شده بود که محدودیتی در "طول متن یک عنصر لیست (24 کاراکتر) ایجاد شود. چنین محدودیتی به ما امکان می دهد که نتیجه بگیریم لیست هایی مانند
به شکلی شبیه به فهرست کردن دایرکتوری ها در سیستم های عامل UNIX و MS-DOS هنگام استفاده از سوئیچ /W (چند ستون). علاوه بر این، نشانگرها برای موارد فهرست از این نوع نمایش داده نمی‌شوند. در حال حاضر، همه این طرح ها اجرا نشده اند، زیرا استفاده بیشتر از لیست های این نوع توصیه نمی شود. نسخه‌های مدرن مرورگرها، فهرست‌هایی از این نوع را دقیقاً مانند فهرست‌هایی نمایش می‌دهند
- .
لیست های تو در تو
مواقعی وجود دارد که لازم است یک لیست کامل از همان نوع یا دیگری را در یک عنصر لیست از یک نوع قرار دهید. با این کار لیست های چند سطحی یا تودرتو ایجاد می شود. HTML امکان تودرتوی دلخواه انواع مختلف لیست ها را می دهد، اما هنگام سازماندهی آنها باید دقت شود.
در زیر کد HTML برای یک سند با لیست های تودرتو آمده است که نمایش آن در شکل نشان داده شده است. 2.6. در این مثال، هر آیتم در لیست گلوله‌دار حاوی فهرست شماره‌دار خاص خود است.
مثال لیست تو در تو ماهواره های برخی از سیارات
- ، عناصر سطح بلوک را می توان قرار داد. به‌ویژه از این نتیجه می‌آید که فهرست‌هایی از تعاریف را می‌توان تودرتو کرد.
-
پورودی نمونه:
- .
- .
این ورودی شماره گذاری لیستی را که با حرف لاتین بزرگ "E" شروع می شود تعیین می کند. برای سایر انواع شماره گذاری، ورودی START=5 شماره گذاری را به ترتیب از روی عدد "5"، عدد رومی "V" و غیره تنظیم می کند.
تغییر نوع شماره گذاری لیست و مقادیر عددی را می توان برای هر عنصر لیست انجام داد. برچسب بزنید
- برای لیست های شماره گذاری شده، امکان استفاده از پارامترهای TYPE و VALUE را فراهم می کند. پارامتر TYPE می تواند همان مقادیری را که برای تگ دریافت می کند، داشته باشد
پارامتر COMPACT همان معنای لیست های گلوله ای را دارد. پارامتر TYPE برای تعیین نوع شماره گذاری لیست استفاده می شود. می تواند مقادیر زیر را بگیرد:
TYPE = A - نشانگرها را به شکل حروف لاتین بزرگ تنظیم می کند.
TYPE = a - نشانگرها را به شکل حروف لاتین کوچک تنظیم می کند.
TYPE = I - نشانگرها را به شکل اعداد رومی بزرگ تنظیم می کند.
TYPE = i - نشانگرها را به شکل اعداد رومی کوچک تنظیم می کند.
TYPE = 1 - نشانگرها را به شکل اعداد عربی تنظیم می کند.
مقدار پیش فرض همیشه TYPE = 1 است، یعنی شماره گذاری با استفاده از اعداد عربی. این همچنین در مورد لیست های شماره گذاری تو در تو صدق می کند. در اینجا، بر خلاف لیست های گلوله ای، مرورگرها به طور پیش فرض شماره گذاری را در سطوح مختلف تودرتوی لیست ها متفاوت نمی کنند. توجه داشته باشید که بعد از شماره عنصر لیست همیشه یک علامت "نقطه" اضافی وجود دارد.
پارامتر TYPE با مقادیر یکسان می تواند برای تعیین سبک شماره گذاری برای عناصر لیست جداگانه استفاده شود. برای انجام این کار، پارامتر TYPE با مقدار مربوطه مجاز است در تگ عنصر لیست مشخص شود.
فهرست‌های این نوع معمولاً دنباله‌ای مرتب از عناصر منفرد هستند. تفاوت با لیست های گلوله ای این است که در لیست شماره گذاری شده، قبل از هر عنصر به طور خودکار یک شماره سریال قرار می گیرد. نوع شماره گذاری بستگی به مرورگر دارد و با پارامترهای تگ لیست قابل تنظیم است. در غیر این صورت، اجرای لیست های شماره گذاری شده بسیار شبیه به اجرای لیست های گلوله ای است.
برچسب ها
- و
برای ایجاد یک لیست شماره دار، باید از یک تگ کانتینری استفاده کنید که تمام عناصر لیست در داخل آن قرار دارند. تگ های لیست باز و بسته شدن یک خط قبل و بعد از لیست را ایجاد می کنند و در نتیجه لیست را از محتوای اصلی سند جدا می کنند.
مانند لیست گلوله‌ای، هر مورد در فهرست شماره‌دار باید با تگ شروع شود
- ، که به موارد منفرد لیست اشاره می کنند، نشانگرهای استاندارد آیتم لیست را ارائه می دهند.
پارامتر COMPACT بدون مقدار نوشته شده است و برای نشان دادن آن به مرورگر استفاده می شود این لیستباید به صورت فشرده ارائه شود. به عنوان مثال، فونت یا فاصله بین خطوط لیست و غیره ممکن است کاهش یابد.
توجه داشته باشید
در حال حاضر وجود پارامتر COMPACT در تگ
- به هیچ وجه بر نمایش لیست ها در مرورگرهای پیشرو تأثیر نمی گذارد. بنابراین برنامه این پارامتربی معنی است، به خصوص که استفاده از آن توسط مشخصات HTML 4.0 توصیه نمی شود.
پارامتر TYPE می تواند مقادیر زیر را بگیرد: دیسک، دایره و مربع. این پارامتر برای اجبار ظاهر گلوله های لیست استفاده می شود. نوع دقیق نشانگر به مرورگری که استفاده می کنید بستگی دارد. گزینه های نمایش معمولی به شرح زیر است:
TYPE = دیسک - نشانگرها به صورت دایره های پر نمایش داده می شوند. TYPE = دایره - نشانگرها به صورت دایره های باز نمایش داده می شوند. TYPE = مربع - نشانگرها به صورت مربع های پر نمایش داده می شوند. ورودی نمونه:
-
.
مقدار پیش فرض TYPE = دیسک است. برای لیست های گلوله ای تو در تو، مقدار پیش فرض دیسک در سطح اول، دایره در سطح دوم، مربع در سطح سوم و بالاتر است. این دقیقاً همان کاری است که در آن انجام می شود آخرین نسخه هامرورگرهای نت اسکیپ و اینترنت اکسپلورر. لطفاً توجه داشته باشید که سایر مرورگرها ممکن است نشانگرها را متفاوت نشان دهند. به عنوان مثال، در مشخصات HTML 4.0، نوع نشانگر نمایش داده شده زمانی که TYPE = مربع به صورت طرح کلی مربعی مشخص می شود.
پارامتر TYPE با مقادیر یکسان را می توان برای تعیین نوع نشانگرها برای عناصر لیست استفاده کرد. برای انجام این کار، پارامتر TYPE با مقدار مربوطه مجاز است در تگ عنصر لیست مشخص شود.
- .
- ,
- ,
- ، با کمک آن لیست هایی از این نوع در اسناد HTML سازماندهی می شوند (UL - Unordered List, unordered list).
در یک لیست گلوله‌ای، از کاراکترهای خاصی به نام نشانگرهای فهرست برای برجسته کردن عناصر آن استفاده می‌شود (اغلب به آنها bullets می‌گویند که تلفظ رسمی اصطلاح انگلیسی bullet است). ظاهر نشانگرهای لیست توسط مرورگر تعیین می شود و هنگام ایجاد لیست های تو در تو، مرورگرها به طور خودکار ظاهر نشانگرها را در سطوح مختلف تودرتو متنوع می کنند.
برچسب ها و<LI >
برای ایجاد یک لیست گلوله ای، باید از یک ظرف برچسب استفاده کنید که تمام عناصر لیست در داخل آن قرار دارند. تگ‌های فهرست باز و بسته شدن، قبل و بعد از فهرست، یک خط شکستگی ایجاد می‌کنند، بنابراین فهرست را از محتوای اصلی سند جدا می‌کند، بنابراین نیازی به استفاده از تگ‌های پاراگراف در اینجا نیست.
.
هر عنصر لیست باید با یک تگ شروع شود
