HTML Unordered Lists
HTML <ul>
tag သည် အစီအစဥ်မထားသော (ကျည်ဆန်များ) စာရင်းကို သတ်မှတ်သည်။
အစီအစဥ်မထားသော HTML စာရင်း
<ul>
အစီအစဥ်မတင်ထားသောစာရင်းသည် တဂ် ဖြင့် စတင်သည် ။ <li>
စာရင်းအကြောင်းအရာတစ်ခုစီသည် တဂ် ဖြင့် စတင်သည်
။
စာရင်းပါ အရာများကို ပုံသေအားဖြင့် ကျည်ဆန်များ (အနက်ရောင် စက်ဝိုင်းငယ်) ဖြင့် အမှတ်အသားပြုပါမည်-
ဥပမာ
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
အစီအစဥ်မထားသော HTML စာရင်း - စာရင်းအကြောင်းအရာ အမှတ်အသားကို ရွေးချယ်ပါ။
CSS ၏ list-style-type
ပိုင်ဆိုင်မှုကို စာရင်းအကြောင်းအရာ အမှတ်အသား၏ ပုံစံကို သတ်မှတ်ရန် အသုံးပြုသည်။ ၎င်းတွင် အောက်ပါတန်ဖိုးများထဲမှ တစ်ခုရှိနိုင်သည်-
Value | Description |
---|---|
disc | Sets the list item marker to a bullet (default) |
circle | Sets the list item marker to a circle |
square | Sets the list item marker to a square |
none | The list items will not be marked |
ဥပမာ - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ဥပမာ- စက်ဝိုင်း
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ဥပမာ- ရင်ပြင်
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ဥပမာ - မရှိပါ။
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Nested HTML စာရင်းများ
စာရင်းများကို nested လုပ်ထားနိုင်သည် (စာရင်းအတွင်းရှိစာရင်း)
ဥပမာ
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
မှတ်ချက်- စာရင်းအကြောင်းအရာ ( <li>
) သည် စာရင်းအသစ်တစ်ခုနှင့် ပုံများနှင့် လင့်ခ်များကဲ့သို့ အခြားသော HTML အစိတ်အပိုင်းများ ပါဝင်နိုင်သည်။
CSS ဖြင့် အလျားလိုက်စာရင်း
HTML List များကို CSS ဖြင့် ပုံစံအမျိုးမျိုးဖြင့် ပုံစံချနိုင်သည်။
လူကြိုက်များသောနည်းလမ်းတစ်ခုမှာ စာရင်းတစ်ခုကို အလျားလိုက်ပုံစံပြုလုပ်ရန်၊ လမ်းကြောင်းပြမီနူးတစ်ခုဖန်တီးရန်ဖြစ်သည်-
ဥပမာ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
အကြံပြုချက်- ကျွန်ုပ်တို့၏ CSS Tutorial တွင် CSS အကြောင်း ပိုမိုလေ့လာနိုင်ပါသည် ။
အခန်းအကျဉ်းချုပ်
<ul>
အစီအစဥ်မထားသောစာရင်းကို သတ်မှတ်ရန် HTML အစိတ်အပိုင်းကို အသုံးပြု ပါ။list-style-type
စာရင်းအကြောင်းအရာ အမှတ်အသားကို သတ်မှတ်ရန် CSS ပိုင်ဆိုင်မှုကို အသုံးပြု ပါ။<li>
စာရင်းအကြောင်းအရာကို သတ်မှတ်ရန် HTML အစိတ်အပိုင်းကို အသုံးပြု ပါ။- စာရင်းများကို nested လုပ်နိုင်ပါသည်။
- စာရင်းတွင် အခြား HTML အစိတ်အပိုင်းများ ပါဝင်နိုင်သည်။
float:left
စာရင်းကို အလျားလိုက်ပြသရန် CSS ပိုင်ဆိုင်မှုကို အသုံးပြု ပါ။
HTML List Tags
Tag | Description |
---|---|
<ul> | Defines an unordered list |
<ol> | Defines an ordered list |
<li> | Defines a list item |
<dl> | Defines a description list |
<dt> | Defines a term in a description list |
<dd> | Describes the term in a description list |
ရရှိနိုင်သော HTML တဂ်များအားလုံး၏စာရင်းအပြည့်အစုံအတွက်၊ ကျွန်ုပ်တို့၏ HTML Tag အကိုးအကားကို ဝင်ရောက်ကြည့်ရှု ပါ။