Trang chủ
CSS
Thanh điều hướng CSS
Thanh điều hướng ngang
Dùng thử: Ví dụ về topnav đáp ứng
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> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> body {margin: 0;} ul.topnav { list- kiểu kiểu: không có; lề: 0; phần đệm: 0; tràn: ẩn; màu nền: #333; } ul.topnav li {float: left;} ul.topnav 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ó; } ul.topnav li a:hover:not(.active) {background-color: #111;} ul.topnav li a.active {background-color: #04AA6D;} ul.topnav li.right {float: right; } @media screen và (max-width: 600px) { ul.topnav li.right, ul.topnav li {float: none;} } </style> </head> <body> <ul class="topnav"> <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> <li class="right"><a href="#about">Giới thiệu về</a></li> </ul> <div style="padding:0 16px;"> <h2>Ví dụ về Topnav đáp ứng</h2> <p>Ví dụ này sử dụng truy vấn phương tiện để xếp chồng topnav theo chiều dọc khi kích thước màn hình là 600px trở xuống.</p> <p>Bạn sẽ tìm hiểu thêm về truy vấn phương tiện và thiết kế web đáp ứng sau trong Hướng dẫn CSS của chúng tôi.</p> <h4>Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng.</h4> </div> </body> </html>