آموزش HTML - ايجاد ليست هاي نامرتب با استفاده از تگ ul

براي ايجاد ليست هايي كه ترتيب آيتم هاي آنها اهميت ندارد بايد ازتگ ul كه ابتداي عبارت Unordered List است استفاده كنيد. با استفاده از اين تگ صرفا يك ليست نامرتب ايجاد كرده ايد اما هنوز هيچ گزينه اي به آن اضافه نكرده ايد . به ازاء هر گزينه بايد از يك زوج باز و بسته تگ li كه مخفف List Item است استفاده نمود . تگ ul يك خصيصه عمده دارد و آن هم type است كه چهار مقدار متفاوت مي پذيرد :
1- Disk :‌ كه باعث مي شود يك دايره سياه تو پر در كنار هر يك از آيتم ها ظاهر شود . اين گزينه مقدار پيش فرض است .
2 - Circle :‌ كه باعث مي شود يك دايره تو خالي در كنار هر يك از آيتم ها ظاهر شود .
3 - Square :‌ كه باعث مي شود يك مربع سياه تو پر در كنار هر يك از آيتم ها ظاهر شود .
4 - none : كه باعث مي شود هيچ علامتي در كنار گزينه ها قرار نگيرد .

Code:

<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<ul type="square" > <li>HTML</li> <li type="circle">PHP</li> <li>MS SQL Server</li> </ul>
</p>

بنده نوع ديگري براي گلوله گذاري ليست هاي نامرتب در مراجع نديده ام . اگر بخواهيد انواع ديگري براي گلوله گذاري انتخاب كنيد بايد در يك نرم افزار گرافيكي آنرا درست نمود و سپس ا استفاده از خصيصه هاي css آنرا به عنوان گلوله نمايش داد . قبل از اين كار بايد مقدار خصيصه type را در تگ ul با مقدار none مقدار دهي كرد . كد زير مثالي از اين نوع است

Code:

 <p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >

<ul >
< li style="background-image:url('images/M_images/arrow.png'); background-repeat:no-repeat;padding-left:10px;background-position:0px 6px" >HTML</li>
<li style="background-image:url('images/M_images/arrow.png'); background-repeat:no-repeat;padding-left:10px;background-position:0px 6px" >PHP</li>
<li style="background-image: url('/images/M_images/arrow.png'); background-repeat:no-repeat;padding-left:10px;background-position:0px 6px" >MS SQL Server</li> </ul>
</p>

براي يادگيري بهتر قطعه كد بالا به مراجع css در اينترنت يا بخش آموزش css از همين سايت مراجعه كنيد .