Hướng dẫn xây dựng chức năng sắp xếp dữ liệu - Thêm CSS
RUN
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .container { width: 500px; margin: auto; } #sort { width: 100px; height: 30px; margin-bottom: 10px; } #id01 { list-style-type: none; padding: 0; margin: 0; } #id01 li { border: 1px solid #ddd; margin-top: -1px; background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block } </style> </head> <body> <div class="container"> <h2>Freetuts.net hướng dẫn xây dựng chức năng sắp xếp dữ liệu</h2> <button onclick="sortListDir()" id="sort">Sắp xếp</button> <ul id="id01"> <li>Barcelona</li> <li>Madrid</li> <li>Manchester</li> <li>Berlin</li> <li>Rome</li> <li>Liverpool</li> <li>Milan</li> <li>Turin</li> <li>Paris</li> <li>LonDon</li> <li>Munich</li> <li>Ha Noi</li> <li>Ho Chi Minh City</li> </ul> </div> </body> </html>
PHÓNG TO