ป้ายกำกับ: css list

Lv.28 CSS Lists

Posted on by alsoon

CSS Lists จะเป็นการกำหนดคุณสมบัติให้กับ HTML List

Unordered Lists:

  • ส้ม
  • มะม่วง
  • กล้วย

Ordered Lists:

  1. ส้ม
  2. มะม่วง
  3. กล้วย

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Lists</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			ul.a {
				list-style-type: circle;
			}

			ul.b {
				list-style-type: square;
			}
			
			ol.c {
				list-style-type: upper-roman;
			}

			ol.d {
				list-style-type: lower-alpha;
			}
		</style>
	</head>
	<body>
		Ordered Lists:
		<p>ตัวอย่าง  unordered lists:</p>
		<ul class="a">
			<li>ส้ม</li>
			<li>มะม่วง</li>
			<li>กล้วย</li>
		</ul>

		<ul class="b">
			<li>ส้ม</li>
			<li>มะม่วง</li>
			<li>กล้วย</li>
		</ul>
		
		<p>ตัวอย่าง ordered lists:</p>
		<ol class="c">
			<li>ส้ม</li>
			<li>มะม่วง</li>
			<li>กล้วย</li>
		</ol>

		<ol class="d">
			<li>ส้ม</li>
			<li>มะม่วง</li>
			<li>กล้วย</li>
		</ol>
		
	</body>
</html>
Top