در این جلسه طراحی سایت شما را با لیست ها در CSS آشنا می کنیم:
نوشته شده توسط : طراحی سایت

در این جلسه  طراحی سایت شما را با  لیست ها در CSS  آشنا می کنیم:

 

در این جلسه  طراحی سایت شما را با  لیست ها در CSS  آشنا می کنیم:

خاصیت image style list

این خاصیت یک عکس را برای استفاده به عنوان نشانه bullet در کنار عنصر لیست تعریف می کند. این عکس با نشانه
ی تعریف شده در خاصیت type-style-list جایگزین می شود.

مثال :

ul li { list-style-image: url(' images/green-bullet. png' ) ; }
 ul ol. html li { list-style-image: url(' images/blue-bullet. png' ) ; }
 ul ol. css li { list-style-image: url(' images/brown-bullet. png' ) ; }
 list-style-position
 ا

این خاصیت موقعیت و نحوه ی قرار گرفتن bullet در کنار آیتم ھای لیست را مشخص می کند. و یکی از دو مقدار زیر ر
می گیرد :
Inside : مشخص می کند که bullet لیست باید در داخل آیتم ھای لیست قرار گیرد.
Outside : مشخص که bullet لیست باید در خارج از آیتم ھای لیست قرار گیرد.
مثال :

ul li { list-style-image: url(' images/arrow. png' ) ; }
 ul ol. html li {
 list-style-image: url(' images/arrow1. png' ) ;
 list-style-position: inside;
 background: #09f;
 }u
 l ol. css li {
 list-style-image: url(' images/arrow2. png' ) ;
 list-style-position: outside;
 background: #ff9;
 }

می بینید که bullet زیر مجموعه ی گزینه ی HTML که به آن مقدار inside داده ایم در کنار داخل کادر قرار گرفته، اما
bullet زیر مجموعه CSS که مقدار outside دارد، خارج از کادر قرار گرفته است.

کوتاه نویسی خاصیت style list

برای کوتاه نویسی خاصیت style-list از قاعده زیر استفاده می شود.

 

list-style: type position url(' ImageAddress' ) ;

مثال :

li { list-style: square inside url(' bullet1. png' ) ; }

بسیار خب، تا اینجا به خصوصیات مربوط به استایل دھی به list ھا آشنا شدیم، در جلسه بعد به positioning یا ھمان
موقعیت عناصر در صفحه می پردازیم

طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در  طراحی سایت دارد  در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT   در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP  در شرکت اسپیناس مشتری مداری حرف اول را می زند

 

 
 




:: بازدید از این مطلب : 57
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : شنبه 20 خرداد 1396 | نظرات ()
مطالب مرتبط با این پست
لیست
می توانید دیدگاه خود را بنویسید


نام
آدرس ایمیل
وب سایت/بلاگ
:) :( ;) :D
;)) :X :? :P
:* =(( :O };-
:B /:) =DD :S
-) :-(( :-| :-))
نظر خصوصی

 کد را وارد نمایید:

آپلود عکس دلخواه: