طراحی سایت با لیست ها در 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 در شرکت اسپیناس مشتری مداری حرف اول را می زند