تابلو اعلانات

saharrahin

در این بخش از آموزش css ، تنظیم لیست ها را آموزش میدهیم.

ویژگی هایی که برای یک لیست در css وجود دارد به ما این امکان را میدهد که List را در 3 حالت زیر نمایش دهیم.

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

در 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\");
}

nesbo

با سلام
من این کد دوم را توی قالبم گذاشتم ولی کار نکرد
البته عکسشم من عوض کردمن یعنی از سیتسم خود قرار دادم
حالا اصلا نمی آد
چرا؟

novin1

ممنون از مطلبی گذاشتید
ثبت شرکت

تابلو اعلانات
	قوانین جدید - تالار گفتمان سایت ساز رزبلاگ درخواست تغيير نام کاربري اطلاع رساني از مشکل قالب هاي داخل پنل اطلاع رساني از مشکل امکانات سايت ها پيشنهادات خود را براي امکانات سايت ها و رزآپ اينجا بيان کنيد! پيشنهادات خود را براي امکانات انجمن ها اينجا بيان کنيد! آموزش جامع بهينه سازي سايت براي موتورهاي جستجوگر طراحي بنر ، لوگو ، هدر و ... ( با هزينه ) درخواست ويرايش قالب فقط در اين تاپيک ! تاپیک جامع اخطار ها و کاربران اخراج شده دلیل

تعداد بازدید 260 لیست UL و LI در سی اس اس
نویسنده	پیام