به کمک نیاز دارید؟

خدمات تخصصی

جستجو
این کادر جستجو را ببندید.
آموزش CSS

آموزش CSS | تنظیم لیست ها CSS Styling List

لیست UL و LI در CSSدر این بخش از آموزش css ، تنظیم لیست ها را آموزش میدهیم. ویژگی هایی که برای یک لیست در css وجود دارد به ما این امکان را میدهد که  List را در 3 حالت زیر نمایش دهیم.

  • تنظیم لیست یه صورت مرتب
  • تنظیم لیست به صورت نامرتب
  • تنظیم تصویر برای نشانگر لیست

اعضای شبکه مشاوران در حوزه «برنامه‌نویسی، وب و امنیت سایبری»

طاهره حسن زاده

تحلیل‌گر داده و مشاور یادگیری‌ماشین و دیپ لرنینگ

اگر به مهارت های یک تحلیلگر داده با تجربه در...

فرید تشیعی

متخصص، استراتژیست و مشاور سئو (SEO)

اگر در پیاده سازی، تعیین استراتژی، بوت کمپ یا مدیریت...

سپیده گونجی

مشاور SEO ،UI/UX و بازاریابی دیجیتال

اگر قصد دارید در دنیای دیجیتال فعالیت کرده و در...

ویدا رضایی

مشاور برنامه نویسی و طراحی وردپرس

اگر برای طراحی سایت وردپرسی خود به تجربیات و دانش...

نگار جنابی

مدیر پروژه، مشاور و مالک محصول پروژه‌های ICT

اگر در توسعه UI/UX و مدیریت پروژه‌های ICT خود به...

احسان مهدوی

مشاور شبکه، نرم افزار و هوش مصنوعی

اگر به دنبال رفع چالشهای شبکه، نرم‌افزار و امنیت فضای...

فاطمه مدیحی

مشاور برنامه نویسی جاوا اسکریپت، CSS و HTML

اگر به کمک شخصی با تجربه در برنامه نویسی Front-End...

غزل شفیعی

مشاور برنامه نویسی PHP و توسعه لاراول

اگر به متخصصی باتجربه PHP و فریم ورک لاراول برای...

نیکا تهرانی

متخصص و مشاور سئو تکنیکال

اگر به استراتژی‌های حرفه‌ای سئو در موتور جستجوی گوگل از...

بنفشه سیدکباری

مشاور تحقیقات بازار، بازاریابی و فروش

اگر علاقمندید در تراز شرکتهای بزرگ و صاحب‌نام، بخش بازاریابی...

فاطمه پورمحمد

مشاور برنامه نویسی، پایگاههای داده‌ای و دیتاساینس

اگر به یک تحلیل‌گر حرفه‌ای داده، برنامه‌نویس مسلط به پایگاههای...

فاطمه جعفری

مشاور توسعه جاوا و اپلیکیشن

اگر به یک رهبر توانمند برای تیم توسعه نرم افزار...

در HTML  دو نوع ار انواع لیست وجود دارد

  • unordered lists     آیتم های لیست با یک نشانگرد گرد شکل مشکی ، نمایش داده میشوند
  • ordered lists     آیتم های لیست با اعداد یا حروف ، نشانه گذاری میشوند.

Css  این انعطاف پپذیری را به شما میدهد که نشانگر آیتم های لیست خود را به یک تصویر مدل دهید،که برای زیبایی طراحی سایت شما موثر میباشد.
با ویژگی list-style-type  شما میتوانید marker  لیست خود را به شکل مورد نظر خود تغییر دهید، این ویژگی شامل مقادیر زیر میباشد.

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

با ویژگی   list-style-image  شما میتوانید تصویر مورد نظر خود را برای  نشانگر لیست تنظیم نمایید.

ul
{
list-style-image: url(‘sqpurple.gif’);
}

این ویژگی ممکن است در تمام مرورگرها پشتیبانی نشود . در مثال زیر راه حل قطعی برای پشتیبانی تمام مرورگرها را میبینید.

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

برای اینکه تمام این ویژگی ها را در یک خط اعمال کنید از مثال زیر میتوانید استفاده کنید ، که به ترتیب 1 list-style-image -3   list-style-position -2 list-style-type  مقداردهی میشوند.

ul
{
list-style: square url(“sqpurple.gif”);
}

دکتر علی قوامی
دکتر علی قوامی
دانش‌آموخته دکترای تخصصی (PhD) کارآفرینی فناوری، بنیانگذار و مدیر گروه بین‌المللی کسب و کار ساکوراد با بیش از ۲۰ سال تجربه بعنوان کوچ، مدرس، مشاور و منتور در حوزه‌های مختلف راه‌اندازی و توسعه کسب‌وکار در ۱۵ کشور جهان هستم. در تلاشم تا تجربیات ذی‌قیمت خود را با شما دوستان عزیزم به اشتراک گذارم.
پیشنهاد بر اساس سلیقه شما

مسیریابی تحصیلی - شغلی (آنلاین)

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

سئوالات و نظرات ارزشمند خود را با ما مطرح کنید

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

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

گام اول

انتخاب حوزه تخصصی مدنظر

گام دوم

بررسی رزومه مشاوران مرتبط

گام سوم

انتخاب مشاور با تخصص مدنظر

گام چهارم

تکمیل فرم و ثبت درخواست

گام پنجم

پرداخت حق‌الزحمه مشاور

گام ششم

تماس با شما برای تعیین وقت

گام هفتم

برقراری ارتباط شما با مشاور