آموزش گام به گام و تصویری HTML قسمت سیزدهم (ایران گستر)
HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"]
HTML[/caption]
لیست های غیر ترتیبی
<ul> مشخص شده و سپس درون این تگ از تگ های <li> برای مشخص کردن هر گزینه استفاده می کنیم. (ایران گستر)در لیست های غیر ترتیبی (همانطور که از نامشان مشخص است) ترتیب گزینه ها اهمیتی ندارد. به مثال زیر توجه کنید:(ایران گستر)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
|
دایره های سیاه کنار هر مورد را به سادگی می توان دید. همچنین به راحتی متوجه می شویم که بین Coffee (قهوه)، Tea (چای) و Milk (شیر) ترتیبی وجود ندارد؛ چه شیر را اول بیاوریم و چه قهوه را، هیچ تفاوتی به حال ما و یا بحث اصلی ندارد (قبل از نتیجه گیری، قسمت لیست های ترتیبی را نیز ببینید).(ایران گستر)
سوال: چطور می توانیم شکل bullet ها را تغییر دهیم؟(ایران گستر)
پاسخ: همانطور که دیگر اجزای HTML را تغییر می دهیم! با استفاده از CSS. به جدول زیر نگاه کنید:(ایران گستر)
| مقدار | توضیحات |
| disc | این حالت همان bullet های پیش فرض و سیاه رنگ است |
| circle | این حالت دایره ها را به صورت توخالی نمایش می دهد |
| square | این حالت به جای دایره از مربع استفاده می کند |
| none | در این حالت، موارد یک لیست بدون شکل خواهند بود |
بیایید تک تک این موارد را بررسی کنیم.
حالت اول: تنظیم روی مقدار disc (ایران گستر)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
|
حالت دوم: تنظیم روی مقدار Circle (ایران گستر)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
|
حالت سوم: تنظیم روی مقدار Square (ایران گستر)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Square Bullets</h2>
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
|