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> <title>W3.CSS</title> <meta name="viewport" content="width=device-width,init-scale=1"> <link rel="stylesheet" href= "https://www.example.com.vn/w3css/4/w3.css"> <body> <div class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left" style= "chiều rộng: 200px;" id="mySidebar"> <button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Đóng &time;</button> <a class="w3- bar-item w3-button" href="#">Liên kết 1</a> <a class="w3-bar-item w3-button" href="#">Liên kết 2</a> <a class=" w3-bar-item w3-button" href="#">Liên kết 3</a> </div> <div class="w3-main" style="margin-left:200px"> <div class="w3 -teal"> <button class="w3-button w3-teal w3-xlarge w3-hide-large" onclick="w3_open()">☰</button> <div class="w3-container"> <h1>Trang của tôi</h1> </div> </div> <div class="w3-container"> <h3>Thanh bên đáp ứng</h3> <p>Thanh bên trong ví dụ này sẽ luôn được hiển thị trên màn hình rộng hơn 992px và ẩn trên máy tính bảng hoặc điện thoại di động (màn hình rộng dưới 993px).</p> <p>Trên máy tính bảng và điện thoại di động, thanh bên được thay thế bằng biểu tượng menu để mở thanh bên.</p> <p >Thanh bên sẽ che phủ nội dung trang.</p> <p><b>Thay đổi kích thước cửa sổ trình duyệt để xem nó hoạt động như thế nào.</b></p> </div> </div> <script> function w3_open() { document.getElementById("mySidebar").style.display = "block"; } hàm w3_close() { document.getElementById("mySidebar").style.display = "none"; } </script> </body> </html>