برای ایجاد لیست های گلوله ای و شماره دار می توانید از CSS استفاده کنید و از یک تصویر مناسب به عنوان گلوله استفاده کنید.
جدول 1 مشخصات عناصر در نظر گرفته شده برای ایجاد و اصلاح لیست ها را لیست می کند.
| ویژگی | مقدار | شرح | مثال |
|---|---|---|---|
| به سبک لیست | دیسک دایره مربع اعشاری رومی سفلی رومی فوقانی پایین آلفا آلفای فوقانی هیچ یک |
نوع نشانگر سه مورد اول برای ایجاد لیست گلوله دار و بقیه برای ایجاد یک لیست شماره دار استفاده می شود. | LI (نوع سبک لیست: دایره) LI (نوع سبک لیست: آلفای فوقانی) |
| سبک-لیست-تصویر | هیچ یک آدرس اینترنتی |
علامت نشانگر را برای هر عکس تنظیم می کند. | LI (سبک به سبک تصویر: url (check.gif)) |
| سبک به سبک موقعیت | خارج از داخل |
انتخاب موقعیت نشانگر نسبت به مجموعه خطوط متن. | LI (موقعیت به سبک لیست: داخل) |
| به سبک لیست | یک خاصیت جهانی که همزمان همه خصوصیات فوق را شامل می شود. |
از آنجا که برچسب
- یا
- عنوان باید کوتاهتر از سه خط باشد.
- هنگام نامگذاری بخش ها ، از اصطلاحات کاملاً ثابت شده مانند کتاب مهمان ، چت ، پیوند ، صفحه اصلی و سایر موارد استفاده کنید.
- قبل از استفاده از یک اصطلاح یا کلمه خاص ، تصمیم بگیرید که آیا خواننده آن را درک می کند.
- عملکرد همه پیوندها
- پشتیبانی از مرورگرهای مختلف
- خوانایی متن
- عملکرد همه پیوندها
- پشتیبانی از مرورگرهای مختلف
- خوانایی متن
- عملکرد همه پیوندها
- پشتیبانی از مرورگرهای مختلف
- خوانایی متن
- اولین
- دومین
- سومین
- اولین
- دومین
- سومین
- اولین
- دومین
- سومین
- اولین
- دومین
- سومین
- اولین
- دومین
- سومین
- لیست نامرتب
- لیست نامرتب
- لیست نامرتب
- لیست نامرتب
- هیچ یک - نشانگرها را از لیست حذف می کند
- دایره - نشانگر به صورت دایره
- دیسک " - نشانگر به شکل یک دایره پر شده است. مقدار پیش فرض
- مربع - نشانگر به صورت مربع
- ارمنی - شماره گذاری ارمنی
- اعشاری - نشانگر به شکل یک عدد
- اعشاری - صفر - اعداد با "0" قبل از شروع (01 ، 02 ، 03 ، و غیره)
- گرجی - شماره گذاری گرجی
- پایین آلفا - (a ، b ، c ، d ، e ، و غیره)
- یونانی سفلی - (آلفا ، بتا ، گاما و غیره)
- پایین لاتین - (a ، b ، c ، d ، e ، و غیره)
- Iower-Roman - (i ، ii ، iii ، iv ، v ، و غیره)
- آلفای فوقانی - (A ، B ، C ، D ، E ، و غیره)
- لاتین فوقانی - (A ، B ، C ، D ، E ، و غیره)
- رومی فوقانی - (I ، II ، III ، IV ، V و غیره)
- به ارث می برند - مقدار باید از عنصر والد به ارث برسد
- .
- مورد لیست
- لیست منحصر به فرد
- لیست های اصلی
- ZORNET.RU - برای مدیر وب سایت
- لیست دیگری
- مورد لیست
- لیست منحصر به فرد
- لیست های اصلی
- ZORNET.RU - برای مدیر وب سایت
- لیست دیگری
- اسکریپت های uCoz
- الگوهای uCoz
- طراحی وب سایت
- سبک های سایت
- یک ظاهر طراحی شده CSS
- اولین عنصر برای سایت
- عنصر دوم برای سایت
- سومین عنصر برای سایت
- چهارمین عنصر برای سایت
- پنجمین عنصر برای سایت
- که به عنوان والدین آن عمل می کند ، می توانید سبک را برای انتخابگرهای UL و LI تنظیم کنید. بنابراین ، در مثال 1 ، از انتخابگر UL استفاده شده و پارامترهای سبک برای آن تنظیم شده اند.
مثال 1. ایجاد لیست گلوله ای
نتیجه این مثال در شکل نشان داده شده است. 1. از نشانگرهای مربع و محل قرارگیری خارجی آنها نسبت به متن استفاده می کند.
شکل: 1. نمای لیست با سبک تغییر کرد
برای تنظیم تصویر خود به عنوان نشانگر ، از ویژگی فهرست به سبک تصویر استفاده کنید ، همانطور که در مثال 2 نشان داده شده است.
مثال 2. استفاده از تصاویر به عنوان نشانگر
نتیجه این مثال در شکل نشان داده شده است. 2. از یک تصویر کوچک به عنوان نشانگر استفاده می شود.
شکل: 2. تصاویر به عنوان نشانگر
چند مثال از ایجاد لیست های مختلف در جدول آورده شده است. 2
| کد HTML | مثال |
|---|---|
| |
|
| مواردی که باید هنگام آزمایش یک سایت در نظر بگیرید: |
|
| مواردی که باید هنگام آزمایش یک سایت در نظر بگیرید: |
|
|
لیست شماره دار با اعداد عربی: |
|
|
یک لیست شماره دار با اعداد کوچک رومی: |
|
|
یک لیست شماره دار با اعداد رومی بزرگ: |
|
|
یک لیست شماره دار با حروف کوچک لاتین: |
|
|
یک لیست شماره دار با حروف بزرگ الفبای لاتین: |
ما به مطالعه ادامه می دهیم CSS خواص عناصر مختلف و در این درس در مورد طراحی لیست صحبت خواهیم کرد. در عمل ، لیست ها اغلب استفاده می شوند ، بنابراین این ویژگی ها باید به خاطر سپرده شوند.
نمای علامت گذاری مشترک
و اولین تنظیم ظاهر مارکرها است. لیست ها نشانگرهای مختلفی دارند. در درسها HTML لیست های شماره گذاری شده نحوه تغییر نشانگرها با استفاده از ویژگی را نشان می دهد نوع ... اما دانستن CSS این ویژگی دیگر لازم نیست ، زیرا همه این کارها به لطف صفحه سبک بسیار راحت تر انجام می شود CSS.
برای نمایش ، بیایید لیستی را با استفاده از ایجاد کنیم CSS... در واقع مهم نیست کدام یک لیست شماره دار یا لیست نامرتب، از آنجا که از این ملک استفاده می کنید به سبک لیست ما می توانیم نشانگرها را اضافه کنیم یا آنها را حذف کنیم.
HTML
بنابراین ، یک لیست منظم ایجاد شد و به طور پیش فرض نشانگرهایی به صورت حلقه های پرشده ایجاد شدند. و خیلی اوقات این سوال پیش می آید ، چگونه نقاط گلوله را حذف کنیم?
حذف نشانگر از لیست با استفاده از ویژگی به سبک لیست و اختصاص دادن مقداری به آن هیچ یک ... این محبوب ترین گزینه برای حذف گلوله ها از لیست است. و برای لیست ، اجازه دهید همان ویژگی را تنظیم کنیم.
Ul (نوع سبک لیست: هیچ؛)
حال ، اگر صفحه را تازه کنیم ، خواهیم دید که این ویژگی نشانگرها را از لیست حذف کرده است.
اینها همه نوع گلوله برای لیست ها هستند. چهار نوع اول معمول ترین هستند ، بقیه به ندرت استفاده می شوند.
خوب ، برای مثال ، بیایید یک مارکر را به شکل اعداد بزرگ رومی انتخاب و تنظیم کنیم. این کار به سادگی انجام می شود: در مقام معنا هیچ یک نام مارکر ما را قرار دهید رومی فوقانی .
Ul (نوع سبک-نوع: بالا-رومی ؛)
تازه کردن صفحه اعداد بزرگ رومی را در لیست های گلوله ای نشان می دهد. به این ترتیب می توانید با تنظیم ظاهر دلخواه از طریق خاصیت ، نشانگرهای لیست را تغییر دهید به سبک لیست .
نشانگر تصویر
دومین نکته نسبتاً مهم و یک نشانگر که اغلب استفاده می شود ، تصویری به شکل یک نشانگر است. غالباً باید از نشانگر به شکل یک عکس زیبا و گزینه های معمول برای نشانگرهای ارائه شده استفاده کنید CSS نامناسب برای این ، از تصاویر استفاده می شود. و این با استفاده از یک خاصیت خاص به نام انجام می شود سبک-لیست-تصویر ... این به مرورگر نشان می دهد که ما یک عکس به عنوان نشانگر خواهیم داشت.
از هر اندازه در اینترنت عکس بگیرید (15 پیکسل x 15 پیکسل)که قصد دارید از آن به عنوان نشانگر استفاده کنید و آن را در پوشه ای که قبلاً با تصاویر ایجاد شده قرار دهید تصاویر... پس از آن ، مالکیت باقی می ماند سبک-لیست-تصویر مسیر را به تصویر مشخص کنید و مرورگر به جای نشانگر ، تصویر را جایگزین می کند.
که در CSS مسیر با استفاده از کلمه کلیدی نشان داده شده است آدرس () ... مسیر را به تصویر در پرانتز مشخص کنید ../images/ Image name.jpg ، نسبت به صفحه سبک.
یعنی چه در رابطه با صفحه سبک به چه معناست؟ شیوه نامه ما یک پرونده است style.css ، در فهرست قرار دارد CSS، و تصویر در فهرست است تصاویر... این بدان معنی است که مرورگر باید به مرورگر بگوید که ابتدا از فهرست خارج شود. CSS، این کار به این صورت انجام می شود: ../ ، و سپس به فهرست همراه با تصویر بروید تصاویر و فقط پس از آن عکس مورد نظر را پیدا کنید.
Ul (سبک-سبک-تصویر: url (../ images / نام نشانگر image.jpg) ؛)
اگر مسیر صحیحی را برای تصویر مشخص کرده باشید ، مرورگر عکس شما را به جای نشانگرهای معمول بارگیری می کند.
هنگام استفاده از یک عکس به عنوان نشانگر ، شما باید یک ویژگی دیگر را نیز بدانید که مسئول موقعیت نشانگر تصویر است. برای دیدن نحوه کار این ویژگی ، ما هستیم بیایید یک قاب درست کنیم قرمز برای همه عناصر
Ul li (حاشیه: 2 پیکسل جامد # ff0000 ؛)
اکنون ، اگر نگاه کنید ، نشانگر عکس شما خارج از مورد لیست است ، همان قاب که در بالا ایجاد کردیم. بنابراین ، مواقعی پیش می آید که شما نیاز دارید که نشانگر درون آیتم لیست باشد. برای این ، یک خاصیت وجود دارد سبک به سبک موقعیت که در ابتدا تنظیم شده است خارج از ، یعنی مارکرهای خارج از عنصر را تنظیم کنید.
برای تعبیه نشانگر در داخل عنصر ، از مقدار استفاده کنید داخل ... حال اگر این ویژگی را روی مقدار تنظیم کنید داخل ، سپس نشانگر در داخل عنصر لیست قرار می گیرد و قاب قرمز به وضوح این را به ما نشان می دهد.
ul (لیست سبک-تصویر: url (../ images / نام نشانگر image.jpg) ؛ لیست سبک-موقعیت: داخل ؛) ul li (حاشیه: 2px solid # ff0000؛)
این سه ویژگی به این ترتیب کار می کنند. همچنین یک علامت اختصاری وجود دارد که تمام این خصوصیات را با هم ترکیب می کند.
یعنی ملک مشخص شده است به سبک لیست و سپس ، به ترتیب ، مقادیر نوع نشانگر ، موقعیت نشانگر و در صورت لزوم ، مسیر به تصویر ، که نشانگر خواهد بود. و ، تصویر زیر را دریافت می کنیم:
Ul (به سبک لیست: داخل url (../ images / Marker image name.jpg)؛)
به این ترتیب است که یک نسخه کوتاه از قوانین مربوط به شکل ظاهری لیست ها نوشته می شود. این ورودی می گوید که نشانگر باید در داخل عنصر باشد ، و نشانگر همان تصویر خواهد بود
همه اینها با لیست است ، اما کمی بیشتر با لیست وقت بگذارید ، اما با نصب نشانگرهای مختلف خودتان را تمرین کنید ، احساس کنید همه کار می کند. که در نسخه ی نمایشی گزینه های تنظیمات نشانگر نشان داده می شود ، جایی که می توانید در مقایسه با کار ، صحت کار خود را بررسی کنید.
لیست های CSS - مجموعه ای از خصوصیات مسئول طراحی لیست ها. هنگام ایجاد میله های ناوبری سایت ، استفاده از لیست های HTML بسیار معمول است. موارد لیست مجموعه ای از موارد بلوک را نشان می دهد.
با ویژگی های استاندارد CSS می توانید تغییر شکل نشانگر لیست, اضافه کردن تصویر برای نشانگر، و تغییر مکان نشانگر... ارتفاع بلوک مارکر را می توان با ویژگی line-height تنظیم کرد.
لیست های سبک بندی با سبک های CSS
1. نوع نشانگر لیست از نوع سبک به نوع
ویژگی نوع مارکر یا نشانگر را حذف می کند برای لیست های گلوله ای و شماره گذاری شده. به ارث برده.
| به سبک لیست | |
|---|---|
| ارزش های: | |
| دیسک | مقدار پیش فرض. دایره پر شده به عنوان نشانگر موارد لیست استفاده می شود. |
| ارمنی | شماره گذاری سنتی ارمنی. |
| دایره | از یک دایره باز به عنوان نشانگر استفاده می شود. |
| cjk-ایدئوگرافیک | شماره گذاری ایدئوگرافیک. |
| اعشاری | 1, 2, 3, 4, 5, … |
| اعشاری - صفر | 01, 02, 03, 04, 05, … |
| گرجی | شماره گذاری سنتی گرجی. |
| عبری | شماره گذاری سنتی یهودیان. |
| هیراگانا | شماره گذاری ژاپنی: a، i، u، e، o، |
| hiragana-iroha | شماره گذاری ژاپنی: i ، ro ، ha ، ni ، ho ، ... |
| کاتاکانا | شماره گذاری ژاپنی: A ، I ، U ، E ، O ، ... |
| کاتاکانا-ایروها | شماره گذاری ژاپنی: I، RO، HA، NI، HO، ... |
| پایین آلفا | a ، b ، c ، d ، e ، ... |
| یونانی سفلی | نمادهای کوچک حروف الفبا یونانی. |
| پایین لاتین | a ، b ، c ، d ، e ، ... |
| رومی سفلی | من ، ii ، iii ، IV ، V ، ... |
| هیچ یک | نشانگر موجود نیست. |
| مربع | مربع پر یا رنگ نشده به عنوان نشانگر استفاده می شود. |
| آلفای فوقانی | A ، B ، C ، D ، E ، ... |
| لاتین فوقانی | A ، B ، C ، D ، E ، ... |
| رومی فوقانی | I ، II ، III ، IV ، V ، ... |
| اولیه | مقدار خاصیت را به مقدار پیش فرض آن تنظیم می کند. |
| به ارث می برند | مقدار ویژگی را از عنصر اصلی به ارث می برد. |
نحو
ul (سبک سبک نوع: هیچ؛) ul (سبک سبک نوع: مربع ؛) ol (سبک سبک نوع: هیچ؛) ol (نوع سبک سبک: پایین آلفا ؛) 
شکل: 1. نمونه ای از طراحی لیست های گلوله ای و شماره دار
2. تصاویر برای موارد لیست به سبک سبک
شما می توانید از تصاویر و شیب های شیب به عنوان نشانگر موارد لیست استفاده کنید. به ارث برده.
نحو
ul (فهرست-سبک-تصویر: url ("images / romb.png")؛) ul (لیست-سبک-تصویر: خطی-شیب دار (# FF7A2F 0 ، # FF7A2F 50٪ ، # FFB214 50٪)؛) 
شکل: 2. با استفاده از تصویر یک لیست گلوله ای طراحی کنید 
شکل: 3. سبک کردن لیست گلوله ای با یک شیب
3. مکان نشانگر لیست به سبک سبک موقعیت
این ویژگی توانایی قرار دادن نشانگر را در خارج یا داخل محتویات مورد لیست فراهم می کند. به ارث برده.
به وبلاگ من خوش آمدید. امروز می خواهم به این موضوع بپردازم که چگونه مارکرها را از لیست های پرگلوله (ul li) از طریق css حذف کنیم ، زیرا آنها اغلب مورد نیاز نیستند و فقط در طراحی سایت اختلال ایجاد می کنند.
حذف نشانگرهای پیش فرض
بعضی اوقات فقط باید آنها را حذف کنید. به عنوان مثال ، هنگام طراحی یک منو یا چیز دیگری. خاصیت نوع سبک یا سبک مختصر فهرست فهرست وظیفه نمایش مارکرها را بر عهده دارد. مقدار پیش فرض دایره است که یک دایره پر از سیاه است. برای حذف آن ، فقط باید اینگونه بنویسید:
Ul (
نوع سبک-نوع: هیچ؛
}
Ul (
سبک لیست: هیچ؛
}
توجه داشته باشید که این خاصیت به طور کلی در کل لیست نوشته شده است ، و نه روی موارد منفرد آن. این خیلی مهمه. ورودی بالا گلوله ها را از همه لیست های سایت شما پاک می کند ، اما ممکن است شما چندین طرح لیست داشته باشید.
در این حالت ، کلاس ها کمک می کنند تا با یک ظاهر طراحی شده خود کنار بیایند. شما فقط کلاس سبک را برای لیست های لازم قطع کرده و آنها را طراحی می کنید.
چگونه تصویر نشانگر خود را قرار دهیم
بله ، بله ، css به شما امکان می دهد یک مارکر بسیار جذاب تر ایجاد کنید. همچنین می توان آن را با استفاده از خاصیت list-style-image یا به عبارت ساده تر با استفاده از list-style تنظیم کرد. مقدار داخل پرانتز شامل مسیر پرونده است و در مقابل آن باید کلمه کلیدی url را قرار دهید.
اگر تصمیم دارید لیست های استاندارد ul و li را تغییر دهید ، این موضوع برای شما جالب خواهد بود. از آنجا که در اینجا چندین راه حل اصلی پیدا خواهید کرد. که مطمئناً به شما کمک می کند تا نمای استاندارد را برای طراحی لیست ها به یک حالت منحصر به فرد تغییر دهید. نکته مثبت این است که ما فقط از یک کلاس در همه موارد استفاده خواهیم کرد ، که ظاهر را کاملاً تغییر می دهد. علاوه بر این پارامترها ، می توانید مشخص کنید لیست از چه شماره ای شروع شود ، در اینجا می توانید همه کارها را خودتان انجام دهید. پیش فرض اولیه لیست های شماره گذاری شده روی حرف اول یا حرف A است.بر اساس اصول ، اکنون نگاه دقیق تری به عناصر استفاده شده برای ساخت ساختار و معنی بخشهای مختلف طراحی خواهیم داشت. اگر کسی نمی داند ، ul و li گزینه های بهتری نسبت به متن ساده هستند ، زیرا وقتی متن پیچیده می شود ، مخصوصاً در تلفن همراه ، کاملاً فرورفتگی دارد و به دور نشانگر نمی پیچد.
لیست ها به عنوان یک روش عالی برای ارائه اطلاعات در صفحات در نظر گرفته می شوند زیرا خواندن آنها آسان و خوب به نظر می رسد. به نظر می رسد بسیاری از مردم تصور می کنند که نقاط گلوله تصاویر کوچکی هستند ، اما در واقع همه آنها از طریق کد HTML نسبتاً ساده ایجاد می شوند. در صورت تمایل می توانید انواع مختلف لیست ها را درون یکدیگر قرار دهید ، فقط بخاطر داشته باشید که آنها را به درستی ببندید. در تمام این دستورات لیست می توانید با متن مورد نظر خود بازی کنید.
همچنین باید بدانید که لیست ها در ابتدا چندین عنصر دارند:
1
... اطلاعات بی نظم.
2
... اطلاعات سفارش داده شده
3
... تعاریف
شروع با نصب:
1. گزینه:
CSS
Ksangelopan (
حاشیه: 19 پیکسل 0 0؛
بالشتک: 0؛
سبک لیست: هیچ؛
ضد تنظیم مجدد: li؛
}
.ksangelopan li (
حاشیه: 2px solid # 3575ad؛
پس زمینه: # d7dee4؛
موقعیت: نسبی؛
margin-bottom: 17px؛
بالشتک: 15px 9px؛
}
.ksangelopan li: شناور (
z-index: 1؛
}
.ksangelopan li: قبل (
حاشیه: 2px solid # 2270b3؛
موقعیت: مطلق؛
بالا: -14 پیکسل؛
بالشتک: 3px 9px؛
اندازه قلم: 11px؛
font-weight: پررنگ؛
رنگ: # 246eaf؛
پس زمینه: # f2f4f7؛
counter-increment: li؛
محتوا: شمارنده (li)؛
-webkit-انتقال-مدت زمان: 0.4 ثانیه
مدت زمان انتقال: 0.4 ثانیه
}
.ksangelopan li: شناور: قبل (
پس زمینه: # 2672b3؛
رنگ: # f7f9fb؛
-webkit-transform: ترجمه (-11px ، 0) ؛
-ms-transform: ترجمه (-11px ، 0) ؛
-o-transform: ترجمه (-11px ، 0) ؛
تبدیل: ترجمه (-11px ، 0) ؛
}
.ksangelopan li: بعد از (
محتوا: ""؛
موقعیت: مطلق؛
مدت زمان انتقال: 0.3 ثانیه
-vebkit-transfer-property: عرض؛
ویژگی انتقال: عرض؛
z-index: -1؛
زمینه: #FFF؛
قد: 100٪
سمت چپ: 0؛
بالا: 0؛
عرض: 0؛
}
.ksangelopan li: شناور: بعد از (
عرض: 100٪
}
این کل نصب است.
2 گزینه دوم:
CSS
Beleduzlopamges (
margin-bottom: 8px؛
بالشتک: 0؛
سبک لیست: هیچ؛
ضد تنظیم مجدد: li؛
}
.beleduzlopamges li (
موقعیت: نسبی؛
حاشیه: 2px solid # 195588؛
پس زمینه: # eff3f7؛
بالشتک: 15px 19px 15px 27px؛
حاشیه: 12px 0 12px 40px؛
-webkit-انتقال-مدت زمان: 0.3 ثانیه
مدت زمان انتقال: 0.3 ثانیه
}
.beleduzlopamges li: شناور (
زمینه: #FFF؛
}
.beleduzlopamges li: قبل (
ارتفاع خط: 32 پیکسل
موقعیت: مطلق؛
بالا: 4px؛
سمت چپ: -39 پیکسل؛
عرض: 39 پیکسل؛
text-align: مرکز؛
اندازه قلم: 16px؛
font-weight: پررنگ؛
رنگ: # f9f5f5؛
پس زمینه: # 275b88؛
counter-increment: li؛
محتوا: شمارنده (li)؛
مدت زمان انتقال: 0.2 ثانیه
}
.beleduzlopamges li: شناور: قبل (
عرض: 46 پیکسل؛
}
.beleduzlopamges li: بعد از (
موقعیت: مطلق؛
سمت چپ: 0؛
بالا: 4px؛
محتوا: ""؛
قد: 0؛
عرض: 0؛
حاشیه: 16px جامد شفاف ؛
حاشیه-چپ-رنگ: # 275b88؛
-webkit-انتقال-مدت زمان: 0.2 ثانیه
مدت زمان انتقال: 0.2 ثانیه
}
.beleduzlopamges li: شناور: بعد از (
margin-left: 6px؛
}
مقیاس مرکز را می توان به طور مستقل متناسب با سبک اصلی سایت تنظیم کرد.
3 گزینه سوم:
CSS
Nizualisanelag (
بالشتک: 0؛
سبک لیست: هیچ؛
ضد تنظیم مجدد: li؛
}
.nizualisanelag li (
موقعیت: نسبی؛
بالشتک: 9px 17px 17px 25px؛
حاشیه چپ: 39 پیکسل؛
مدت زمان انتقال: 0.2 ثانیه
مکان نما: اشاره گر؛
font-weight: پررنگ؛
رنگ: # 343638؛
}
.nizualisanelag li: قبل (
مرز: 3px جامد شفاف؛
ارتفاع خط: 35 پیکسل
موقعیت: مطلق؛
بالا: 0؛
سمت چپ: -29 پیکسل؛
عرض: 41 پیکسل
text-align: مرکز؛
اندازه قلم: 14px؛
font-weight: پررنگ؛
رنگ: # 619dce؛
counter-increment: li؛
محتوا: شمارنده (li)؛
مدت زمان انتقال: 0.3 ثانیه
جعبه اندازه: حاشیه جعبه؛
}
.nizualisanelag li: شناور: قبل (
رنگ: # 337AB7؛
}
.nizualisanelag li: بعد از (
موقعیت: مطلق؛
بالا: 0؛
سمت چپ: -29 پیکسل؛
عرض: 41 پیکسل
ارتفاع: 41 پیکسل؛
حاشیه: 5 پیکسل جامد # 468bd0؛
شعاع مرز: 50٪ ؛
محتوا: ""؛
تیرگی: 0.5؛
-webkit-box-sizing: حاشیه-جعبه؛
-moz-box-sizing: حاشیه-جعبه؛
جعبه اندازه: حاشیه جعبه؛
}
.nizualisanelag li: شناور: بعد از (
انیمیشن: 500 میلی ثانیه بازگشت به راحتی 0 ثانیه؛
تیرگی: 1؛
}
keyframes bounceIn (
0% {
تیرگی: 0؛
تبدیل: scale3d (.3 ، .3 ، .3) ؛
}
20% {
تبدیل: scale3d (1.3 ، 1.3 ، 1.3) ؛
}
40% {
تبدیل: scale3d (.9 ، .9 ، .9) ؛
}
60% {
تیرگی: 1؛
تبدیل: scale3d (1.03 ، 1.03 ، 1.03) ؛
}
80% {
تبدیل: scale3d (.97 ، .97 ، .97) ؛
}
به (
تیرگی: 1؛
تبدیل: scale3d (1 ، 1 ، 1) ؛
}
}
همراه با انیمیشن زیبا.
4 گزینه چهارم:
CSS
بالشتک: 0؛
سبک لیست: هیچ؛
}
.kudezamuden li (
بالشتک: 6px؛
}
.kudezamuden li: قبل (
padding-right: 11px؛
font-weight: پررنگ؛
رنگ: # 4979a0؛
محتوای: "\\ 2606"؛
مدت زمان انتقال: 0.4 ثانیه
}
.kudezamuden li: شناور: قبل (
رنگ: # 235e90؛
محتوای: "\\ 2605"؛
}
مشابه نسخه های قبلی ، فقط نماد خود تغییر کرده است.
به طور کلی ، این یک لیست کوچک از لیست ها است ، به مدیر وب سایت یک لیست زیبا در پورتال می دهد ، جایی که او خودش می تواند آن را بیشتر مرتب کند ، همانطور که می خواهد آن را ببیند.
اگر لازم است موارد را به جای لیست گلوله ای در یک لیست شماره گذاری کنید ، از HTML سفارش داده شده در اینجا استفاده می شود. این لیست با استفاده از برچسب ol ایجاد می شود. شماره گذاری از یک شروع می شود و برای هر مورد فهرست شده بعدی با برچسب li یکی افزایش می یابد.
