Trang chủ
CSS
Thanh điều hướng CSS
Thanh điều hướng ngang
Tryit: Thanh điều hướng ngang cố định
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <style> body { font-size: 28px; } ul { kiểu danh sách: không có; lề: 0; phần đệm: 0; tràn: ẩn; màu nền: #333; vị trí: -webkit-dính; /* Safari */ vị trí: dính; trên cùng: 0; } li { float: trái; } li a { display: block; màu trắng; căn chỉnh văn bản: giữa; phần đệm: 14px 16px; trang trí văn bản: không có; } li a:hover { màu nền: #111; } .active { màu nền: #4CAF50; } </style> </head> <body> <div class="header"> <h2>Cuộn xuống</h2> <p>Cuộn xuống để xem hiệu ứng dính.</p> </div> <ul > <li><a class="active" href="#home">Trang chủ</a></li> <li><a href="#news">Tin tức</a></li> <li ><a href="#contact">Liên hệ</a></li> </ul> <h3>Ví dụ về thanh điều hướng cố định</h3> <p>Thanh điều hướng sẽ <strong>dính</strong> vào trên cùng khi bạn đến vị trí cuộn.</p> <p><strong>Lưu ý:</strong> Internet Explorer không hỗ trợ định vị cố định và Safari yêu cầu tiền tố -webkit-.</p> <p>Một số văn bản cho kích hoạt cuộn. Lorem ipsum dolor sit amet, illum định nghĩa no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert labamus Repudiandae nec et. Sự cố có hiệu quả đối với quảng cáo của anh ấy. Eum no molestiae voluptatibus.</p> <p>Một số văn bản cho phép cuộn. Lorem ipsum dolor sit amet, illum định nghĩa no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert labamus Repudiandae nec et. Sự cố có hiệu quả đối với quảng cáo của anh ấy. Eum no molestiae voluptatibus.</p> <p>Một số văn bản cho phép cuộn. Lorem ipsum dolor sit amet, illum định nghĩa no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert labamus Repudiandae nec et. Sự cố có hiệu quả đối với quảng cáo của anh ấy. Eum no molestiae voluptatibus.</p> <p>Một số văn bản cho phép cuộn. Lorem ipsum dolor sit amet, illum định nghĩa no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert labamus Repudiandae nec et. Sự cố có hiệu quả đối với quảng cáo của anh ấy. Eum no molestiae voluptatibus.</p> <p>Một số văn bản cho phép cuộn. Lorem ipsum dolor sit amet, illum định nghĩa no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert labamus Repudiandae nec et. Sự cố có hiệu quả đối với quảng cáo của anh ấy. Eum no molestiae voluptatibus.</p> <p>Một số văn bản cho phép cuộn. Lorem ipsum dolor sit amet, illum định nghĩa no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert labamus Repudiandae nec et. Sự cố có hiệu quả đối với quảng cáo của anh ấy. Eum no molestiae voluptatibus.</p> <p>Một số văn bản cho phép cuộn. Lorem ipsum dolor sit amet, illum định nghĩa no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert labamus Repudiandae nec et. Sự cố có hiệu quả đối với quảng cáo của anh ấy. Eum không có molestiae voluptatibus.</p> </body> </html>