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> <title>Mẫu W3.CSS</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device -width,initial-scale=1"> <link rel="stylesheet" href="https://www.example.com.vn/w3css/4/w3.css"> <link rel="stylesheet" href="https ://www.example.com.vn/lib/w3-theme-black.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> <link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> html,body,h1,h2 ,h3,h4,h5,h6 {font-family: "Roboto", sans-serif;} .w3-sidebar { z-index: 3; chiều rộng: 250px; trên cùng: 43px; đáy: 0; chiều cao: kế thừa; } </style> </head> <body> <!-- Thanh điều hướng --> <div class="w3-top"> <div class="w3-bar w3-theme w3-top w3-left-align w3 -large"> <a class="w3-bar-item w3-button w3-right w3-hide-large w3-hover-white w3-large w3-theme-l1" href="javascript:void(0)" onclick ="w3_open()"><i class="fa fa-bars"></i></a> <a href="#" class="w3-bar-item w3-button w3-theme-l1" >Biểu tượng</a> <a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Giới thiệu về</a> <a href="#" class= "w3-bar-item w3-button w3-hide-small w3-hover-white">Giá trị</a> <a href="#" class="w3-bar-item w3-button w3-hide-small w3 -hover-white">Tin tức</a> <a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Liên hệ</a> <a href= "#" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Khách hàng</a> <a href="#" class="w3-bar- item w3-button w3-hide-small w3-hide-medium w3-hover-white">Đối tác</a> </div> </div> <!-- Sidebar --> <nav class="w3-sidebar w3-bar-block w3-collapse w3-large w3-theme-l5 w3-animate-left" id="mySidebar"> <a href="javascript:void(0)" onclick="w3_close()" class=" w3-right w3-xlarge w3-padding-large w3-hover-black w3-hide-large" title="Đóng Menu"> <i class="fa fa-remove"></i> </a> <h4 class="w3-bar-item"><b>Menu</b></h4> <a class="w3-bar-item w3-button w3-hover-black" href="#">Liên kết</ a> <a class="w3-bar-item w3-button w3-hover-black" href="#">Liên kết</a> <a class="w3-bar-item w3-button w3-hover-black " href="#">Liên kết</a> <a class="w3-bar-item w3-button w3-hover-black" href="#">Liên kết</a> </nav> <!-- Hiệu ứng lớp phủ khi mở thanh bên trên màn hình nhỏ --> <div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay "></div> <!-- Nội dung chính: dịch chuyển sang phải 250 pixel khi hiển thị thanh bên --> <div class="w3-main" style="margin-left:250px"> <div class="w3-row w3-padding-64"> <div class="w3-twothird w3-container"> <h1 class="w3-text-teal">Tiêu đề</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với một mục tiêu tối thiểu là có thể làm được, điều này sẽ không xảy ra khi bạn phải làm việc quá sức để có được một giải pháp sau mỗi giao dịch. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với mục đích tối thiểu hóa lợi ích, điều này sẽ không xảy ra khi bạn phải tập thể dục sau một thời gian dài làm việc.</p> </div> <div class="w3-third w3-container"> <p class="w3-border w3- đệm-large w3-padding-32 w3-center">AD</p> <p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p> </div> </div> <div class="w3-row"> <div class="w3-twothird w3-container"> <h1 class="w3-text-teal">Tiêu đề</h1> <p>Lorem ipsum dolor ngồi amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với một mục tiêu tối thiểu là có thể làm được, điều này sẽ không xảy ra khi bạn phải làm việc quá sức để có được một giải pháp sau mỗi giao dịch. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với mức tối thiểu tối thiểu có thể xảy ra, quis nostrud exermination ullamco labis nisi ut aliquip ex ea commodo consequat.</p> </div> <div class="w3-third w3-container"> <p class="w3-border w3- đệm-large w3-padding-32 w3-center">AD</p> <p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p> </div> </div> <div class="w3-row w3-padding-64"> <div class="w3-twothird w3-container"> <h1 class="w3-text-teal">Tiêu đề</h1> < p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với một mục tiêu tối thiểu là có thể làm được, điều này sẽ không xảy ra khi bạn phải làm việc quá sức để có được một giải pháp sau mỗi giao dịch. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với mục đích tối thiểu hóa lợi ích, điều này sẽ không xảy ra khi bạn phải tập thể dục sau một thời gian dài làm việc.</p> </div> <div class="w3-third w3-container"> <p class="w3-border w3- đệm-large w3-padding-32 w3-center">AD</p> <p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p> </div> </div> <!-- Phân trang --> <div class="w3-center w3-padding-32"> <div class="w3-bar"> <a class="w3-button w3-black" href ="#">1</a> <a class="w3-button w3-hover-black" href="#">2</a> <a class="w3-button w3-hover-black" href ="#">3</a> <a class="w3-button w3-hover-black" href="#">4</a> <a class="w3-button w3-hover-black" href ="#">5</a> <a class="w3-button w3-hover-black" href="#">»</a> </div> </div> <footer id="myFooter" > <div class="w3-container w3-theme-l2 w3-padding-32"> <h4>Chân trang</h4> </div> <div class="w3-container w3-theme-l1"> <p >Được cung cấp bởi <a href="https://www.example.com.vn/w3css/default.asp" target="_blank">w3.css</a></p> </div> </footer> < !-- END MAIN --> </div> <script> // Lấy Sidebar var mySidebar = document.getElementById("mySidebar"); // Lấy DIV với hiệu ứng lớp phủ var OverlayBg = document.getElementById("myOverlay"); // Chuyển đổi giữa hiển thị và ẩn thanh bên, đồng thời thêm hiệu ứng lớp phủ function w3_open() { if (mySidebar.style.display === 'block') { mySidebar.style.display = 'none'; OverlayBg.style.display = "không có"; } else { mySidebar.style.display = 'block'; OverlayBg.style.display = "chặn"; } } // Đóng thanh bên bằng nút đóng chức năng w3_close() { mySidebar.style.display = "none"; OverlayBg.style.display = "không có"; } </script> </body> </html>