Trang chủ
CSS
Ví dụ CSS MQ
Dùng thử: Ví dụ về sử dụng truy vấn phương tiện
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 lang="vi"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> < style> * { kích thước hộp: hộp viền; } /* Tạo kiểu cho thanh điều hướng trên cùng */ .topnav { tràn: ẩn; màu nền: #333; } /* Tạo kiểu cho các liên kết topnav */ .topnav a { float: left; hiển thị: khối; màu: #f2f2f2; căn chỉnh văn bản: giữa; phần đệm: 14px 16px; trang trí văn bản: không có; } /* Thay đổi màu khi di chuột */ .topnav a:hover { Background-color: #ddd; màu đen; } /* Trên màn hình rộng 600px trở xuống, đặt các liên kết menu xếp chồng lên nhau thay vì cạnh nhau */ @media screen và (max-width: 600px) { .topnav a { float: none; chiều rộng: 100%; } } </style> </head> <body> <h2>Menu điều hướng đáp ứng</h2> <p>Resize cửa sổ trình duyệt để xem hiệu ứng: Khi màn hình nhỏ hơn 600px, menu điều hướng sẽ hiển thị theo chiều dọc thay vì theo chiều ngang.</p> <div class="topnav"> <a href="#">Liên kết</a> <a href="#">Liên kết</a> <a href="#"> Liên kết</a> </div> </body> </html>