HTML Жагсаалт /Lists/
Дугаарласан болон дугаарлаагүй жагсаалт.
An Unordered List:
- Item
- Item
- Item
- Item
An Ordered List:
- Item
- Item
- Item
- Item
HTML Дугаарлаагүй жагсаалт /Unordered List/
Дугаарлаагүй жагсаалт нь ul tag эхлүүлдэг. Харин жагсаалтын item-г li tag эхлүүлдэг.
Item-н урд байрлах тэмдэглэгээний анхны утга нь жижиг бөөрөнхий хар дүрс байдаг.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>Алим</li>
<li>Лийр</li>
<li>Банана</li>
</ul>
</body>
</html>
HTML Дугаарлаагүй жагсаалтын тэмдэглэгээг сонгох
CSS-н list-style-type шинж чанарт item-н өмнөх тэмдэглэгээг зааж өгч болно.
| Утга | Тайлбар |
|---|---|
| disc | Анхны утга, жижиг бөөрөнхий хар |
| Circle | Дундаа нүхтэй бөөрөнхий |
| Square | Жижиг дөрвөлжин хар |
| none | Тэмдэглэгээ байхгүй |
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<ul style="list-style-type:disc;">
<li>Алим</li>
<li>Лийр</li>
<li>Банана</li>
</ul>
<ul style="list-style-type:circle;">
<li>Алим</li>
<li>Лийр</li>
<li>Банана</li>
</ul>
<ul style="list-style-type:square;">
<li>Алим</li>
<li>Лийр</li>
<li>Банана</li>
</ul>
<ul style="list-style-type:none;">
<li>Алим</li>
<li>Лийр</li>
<li>Банана</li>
</ul>
</body>
</html>
HTML Дугаарласан жагсаалт-Type атрибут
<ol> tag-н type атрибутад жагсаалтын тэмдэглэгээний төрлийг тодорхойлно.
| Утга | Тайлбар |
|---|---|
| type="1" | Жагсаалтын item-г тоогоор дугаарлана |
| type="A" | Жагсаалтын item-г Цагаан толгойн том үсгээр дугаарлана |
| type="a" | Жагсаалтын item-г Цагаан толгойн жижиг үсгээр дугаарлана |
| type="I" | Жагсаалтын item-г том Ромбо тоогоор дугаарлана |
| type="i" | Жагсаалтын item-г жижиг Ромбо тоогоор дугаарлана |
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<ol type="1">
<li>Алим</li>
<li>Лийр</li>
<li>Банана</li>
</ol>
<ol type="A">
<li>Алим</li>
<li>Лийр</li>
<li>Банана</li>
</ol>
<ol type="a">
<li>Алим</li>
<li>Лийр</li>
<li>Банана</li>
</ol>
<ol type="I">
<li>Алим</li>
<li>Лийр</li>
<li>Банана</li>
</ol>
<ol type="i">
<li>Алим</li>
<li>Лийр</li>
<li>Банана</li>
</ol>
</body>
</html>
HTML Description жагсаалт
HTML нь Description жагсаалтыг дэмждэг. Description нь жагсаалтын item бүрийн ерөнхийн утгыг агуулдаг. Өөрөөр хэлбэр тухайн багцын төрөл гэж ойлгож болно. Discription жагсаалтыг <dl> tag эхлүүлнэ. <dt> tag-д багцыг агуулсан нэр байх бөгөөд <dd> tag-д жагсаалтын item-ууд байрлах болно.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<dl>
<dt>Жимс</dt>
<dd>Лийр</dd>
<dd>Банана</dd>
<dt>Хүнсний ногоо</dt>
<dd>Төмс</dd>
<dd>Байцаа</dd>
</dl>
</body>
</html>
HTML Үүрэлсэн жагсаалт /Nested List/
Жагсаалт дотор жагсаалт агуулахыг үүрэлсэн жагсаалт гэнэ.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li>Архи</li>
<li>Шар айраг
<ul>
<li>Нийслэл</li>
<li>Боргио</li>
</ul>
</li>
<li>Вино</li>
</ul>
</body>
</html>
Тэмдэглэл: Жагсаалт нь жагсаалтыг агуулах боломжтойгоос гадна бусад HTML элементүүдийг ч агуулж чадна, Зураг, Холсоос, ... гэх мэт
Control List Counting
Дугаарласан жагсаалтын анхны утга нь 1 байдаг. Тэгвэл бид start атрибутыг ашиглан өөрчлөх боломжтой.
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
</head>
<body>
<ol start="20">
<li>Архи</li>
<li>Шар айраг</li>
<li>Вино</li>
</ol>
<ol type="I" start="100">
<li>Архи</li>
<li>Шар айраг</li>
<li>Вино</li>
</ol>
</body>
</html>
CSS ашиглан жагсаалтыг хэвтээ тэнхлэгт урсгаж болно
HTML жагсаалтыг CSS ашиглан олон янзаар загварчлах боломжтой. Түгээмэл хэрэглэгддэг аргуудын нэг болох жагсаалтыг хэвтээ тэнхлэгт урсгаж цэс үүсгэж үзье
Жишээлбэл:
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML -хичээл</title>
<meta charset="utf-8">
<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 start="20">
<li><a href="#">Эхлэл</a></li>
<li><a href="#">Мэдээ</a></li>
<li><a href="#">Холбоо барих</a></li>
<li><a href="#">Бидний тухай</a></li>
</ul>
</body>
</html>
Сэтгэгдэлүүд
