Ở bài trước, tôi đã viết kỹ phần lý thuyết về các kiểu danh sách (list). Ở bài này tôi viết các bài tập nhằm giúp các bạn ôn lại cũng như nắm càng vững phần lý thuyết.
1. Bài tập 1
Thêm một danh mục với từ “Coffee” vào bên trong thẻ <ul>
<!DOCTYPE html> <html> <body> <ul> </ul> </body> </html>
Câu trả lời của bài tập 1
<!DOCTYPE html> <html> <body> <ul> <li>Coffee</li> </ul> </body> </html>
2. Bài tập 2
Thay đổi danh sách bên dưới thành một danh sách có kiểu sắp xếp (ordered list)
<!DOCTYPE html> <html> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
Câu trả lời của bài tập 2
<!DOCTYPE html> <html> <body> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
3. Bài tập 3
Thay đổi danh sách dưới đây để hiển thị các ô vuông thay vì các hình tròn.
<!DOCTYPE html> <html> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
Câu trả lời của bài tập 3
<!DOCTYPE html> <html> <body> <ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
4. Bài tập 4
Thay đổi danh sách dưới đây để hiển thị chữ cái thay vì số.
<!DOCTYPE html> <html> <body> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
Câu trả lời của bài tập 4
<!DOCTYPE html> <html> <body> <ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
5. Bài tập 5
Hoàn thành danh sách mô tả bên dưới. Mỗi tên nên có một mô tả.
<!DOCTYPE html> <html> <body> <dl> <dt>Coffee</dt> <dt>Milk</dt> </dl> </body> </html>
Câu trả lời của bài tập 5
<!DOCTYPE html> <html> <body> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </body> </html>
6. Bài tập 6
Làm cho danh sách dưới đây hiển thị theo chiều ngang.
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu li {
float:left;
}
</style>
</head>
<body>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
Câu trả lời của bài tập 6
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu li {
float:left;
}
</style>
</head>
<body>
<ul id="menu">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
7. Lời cuối bài
Qua phần bài tập này chắc các bạn cũng đã nắm chắc thêm về cách vận dụng để tạo ra các kiểu danh sách (list) một cách đẹp mắt. Qua bài sau tôi sẽ viết về Phần tử khối (Block Elements) và phần tử nội tuyến (Inline Elements) trong HTML
The post [HTML bài 22] Bài tập về các kiểu danh sách (list) appeared first on Học online.
from WordPress http://ift.tt/2wErEuX
via IFTTT
Không có nhận xét nào:
Đăng nhận xét