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> <title>Mẫu W3.CSS</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, first- scale=1"> <link rel="stylesheet" href="https://www.example.com.vn/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts. googleapis.com/css?family=Montserrat"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min .css"> <style> body,h1 {font-family: "Montserrat", sans-serif} img {margin-bottom: -7px} .w3-row-padding img {margin-bottom: 12px} </style> </head> <body> <!-- Thanh bên --> <nav class="w3-sidebar w3-black w3-animate-top w3-xxlarge" style="display:none;padding-top:150px" id= "mySidebar"> <a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-black w3-xxlarge w3-padding w3-display-topright" style="padding:6px 24px"> <i class="fa fa-remove"></i> </a> <div class="w3-bar-block w3-center"> <a href="#" class="w3-bar -item w3-button w3-text-grey w3-hover-black">Giới thiệu</a> <a href="#" class="w3-bar-item w3-button w3-text-grey w3-hover-black ">Ảnh</a> <a href="#" class="w3-bar-item w3-button w3-text-grey w3-hover-black">Mua sắm</a> <a href="#" lớp ="w3-bar-item w3-button w3-text-grey w3-hover-black">Liên hệ</a> </div> </nav> <!-- !NỘI DUNG TRANG! --> <div class="w3-content" style="max-width:1500px"> <!-- Tiêu đề --> <div class="w3-opacity"> <span class="w3-button w3- xxlarge w3-white w3-right" onclick="w3_open()"><i class="fa fa-bars"></i></span> <div class="w3-clear"></div> < header class="w3-center w3-margin-bottom"> <h1><b>PHOTOLIO</b></h1> <p><b>Một mẫu được tạo bởi w3.css dành cho các nhiếp ảnh gia.</b>< /p> <p class="w3-padding-16"><button class="w3-button w3-black" onclick="myFunction()">Chuyển đổi phần đệm lưới</button></p> </header> </div> <!-- Lưới ảnh --> <div class="w3-row" id="myGrid" style="margin-bottom:128px"> <div class="w3-third"> <img src ="/w3images/rocks.jpg" style="width:100%"> <img src="/w3images/sound.jpg" style="width:100%"> <img src="/w3images/woods.jpg " style="width:100%"> <img src="/w3images/rock.jpg" style="width:100%"> <img src="/w3images/nature.jpg" style="width:100% "> <img src="/w3images/mist.jpg" style="width:100%"> </div> <div class="w3-third"> <img src="/w3images/coffee.jpg" phong cách ="width:100%"> <img src="/w3images/bridge.jpg" style="width:100%"> <img src="/w3images/notebook.jpg" style="width:100%"> <img src="/w3images/london.jpg" style="width:100%"> <img src="/w3images/rocks.jpg" style="width:100%"> <img src="/w3images/ avatar_g.jpg" style="width:100%"> </div> <div class="w3-third"> <img src="/w3images/mist.jpg" style="width:100%"> <img src="/w3images/workbench.jpg" style="width:100%"> <img src="/w3images/gondol.jpg" style="width:100%"> <img src="/w3images/skies. jpg" style="width:100%"> <img src="/w3images/lights.jpg" style="width:100%"> <img src="/w3images/workshop.jpg" style="width:100 %"> </div> </div> <!-- Nội dung trang cuối --> </div> <!-- Footer --> <footer class="w3-container w3-padding-64 w3-light- màu xám w3-center w3-opacity w3-xlarge" style="margin-top:128px"> <i class="fa fa-facebook-official w3-hover-opacity"></i> <i class="fa fa -instagram w3-hover-opacity"></i> <i class="fa fa-snapchat w3-hover-opacity"></i> <i class="fa fa-pinterest-p w3-hover-opacity" ></i> <i class="fa fa-twitter w3-hover-opacity"></i> <i class="fa fa-linkedin w3-hover-opacity"></i> <p class=" w3-medium">Được cung cấp bởi <a href="https://www.example.com.vn/w3css/default.asp" target="_blank" class="w3-hover-text-green">w3.css</ a></p> </footer> <script> // Chuyển đổi chức năng đệm lưới myFunction() { var x = document.getElementById("myGrid"); if (x.className === "w3-row") { x.className = "w3-row-padding"; } else { x.className = x.className.replace("w3-row-padding", "w3-row"); } } // Mở và đóng sidebar function w3_open() { document.getElementById("mySidebar").style.width = "100%"; document.getElementById("mySidebar").style.display = "chặn"; } hàm w3_close() { document.getElementById("mySidebar").style.display = "none"; } </script> </body> </html>