ข้ามไปที่เนื้อหาหลัก
ตัวอย่างโค้ดรายการ HTML แบบไม่มีหัวข้อ Nested List HTML
โค้ด
<![CDATA[
<!--DOCTYPE html-->
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
}
ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 10px;
}
ul li {
list-style-type: none;
border-left: 5px solid red;
background: #cce5ff;
color: darkblue;
margin: 5px;
padding-left: 15px;
width: 200px;
font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<ul>
<li style="font-weight: bold;">บทที่ 1</li>
<ul>
<li style="width: 161px;">จับเวลา 1 นาที</li>
<li style="width: 161px;">จับเวลา 5 นาที</li>
</ul>
<li style="font-weight: bold;">บทที่ 2</li>
<ul>
<li style="width: 161px;">จับเวลา 1 นาที</li>
<li style="width: 161px;">จับเวลา 5 นาที</li>
</ul>
<li style="font-weight: bold;">บทที่ 3</li>
<ul>
<li style="width: 161px;">จับเวลา 1 นาที</li>
<li style="width: 161px;">จับเวลา 5 นาที</li>
</ul>
<li style="font-weight: bold;">บทที่ 4</li>
<ul>
<li style="width: 161px;">จับเวลา 1 นาที</li>
<li style="width: 161px;">จับเวลา 5 นาที</li>
</ul>
<li style="font-weight: bold;">บทที่ 5</li>
<ul>
<li style="width: 161px;">จับเวลา 1 นาที</li>
<li style="width: 161px;">จับเวลา 5 นาที</li>
</ul>
</ul>
</body>
</html>
]]>
ตัวอย่างหน้าเว็บจากโค้ด
- บทที่ 1
- จับเวลา 1 นาที
- จับเวลา 5 นาที
- บทที่ 2
- จับเวลา 1 นาที
- จับเวลา 5 นาที
- บทที่ 3
- จับเวลา 1 นาที
- จับเวลา 5 นาที
- บทที่ 4
- จับเวลา 1 นาที
- จับเวลา 5 นาที
- บทที่ 5
- จับเวลา 1 นาที
- จับเวลา 5 นาที