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-black w3-card" style="width:130px" > <h5 class="w3-bar-item">Menu</h5> <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Fade')">Làm mờ</button > <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Left')">Trái</button> <button class="w3-bar-item w3-button tablink" onclick ="openLink(event, 'Right')">Phải</button> <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Top')">Top</button> <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Bottom')">Dưới cùng</button> <button class="w3-bar-item w3-button tablink" onclick= "openLink(event, 'Zoom')">Thu phóng</button> </div> <div style="margin-left:130px"> <div class="w3-padding">Sử dụng bất kỳ w3-animate- nào các lớp làm mờ, thu phóng hoặc trượt trong nội dung tab.</div> <div id="Fade" class="w3-container city w3-animate-opacity" style="display:none"> <h2>Làm mờ</h2> h2> <p>Luân Đôn là thủ đô của nước Anh.</p> <p>Đây là thành phố đông dân nhất Vương quốc Anh, với khu vực đô thị hơn 13 triệu dân.</p> </div> < div id="Left" class="w3-container city w3-animate-left" style="display:none"> <h2>Trượt vào từ bên trái</h2> <p>Paris là thủ đô của Pháp.</ p> <p>Khu vực Paris là một trong những trung tâm dân số lớn nhất châu Âu, với hơn 12 triệu dân.</p> </div> <div id="Top" class="w3-container city w3-animate -top" style="display:none"> <h2>Trượt từ trên xuống</h2> <p>Tokyo là thủ đô của Nhật Bản.</p> <p>Đây là trung tâm của Khu vực Greater Tokyo và khu vực đô thị đông dân nhất thế giới.</p> </div> <div id="Right" class="w3-container city w3-animate-right" style="display:none"> <h2>Trượt vào từ phải sang</h2> <p>London là thủ đô của nước Anh.</p> <p>Đây là thành phố đông dân nhất Vương quốc Anh, với khu vực đô thị hơn 13 triệu dân.</p> < /div> <div id="Bottom" class="w3-container city w3-animate-bottom" style="display:none"> <h2>Trượt từ dưới lên</h2> <p>Paris là thủ đô của Pháp.</p> <p>Khu vực Paris là một trong những trung tâm dân số lớn nhất ở châu Âu, với hơn 12 triệu dân.</p> </div> <div id="Zoom" class="w3-container thành phố w3-animate-zoom" style="display:none"> <h2>Phóng to</h2> <p>Tokyo là thủ đô của Nhật Bản.</p> <p>Đây là trung tâm của Khu vực Greater Tokyo , và là khu vực đô thị đông dân nhất thế giới.</p> </div> </div> <script> function openLink(evt, animName) { var i, x, tablinks; x = document.getElementsByClassName("city"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++) { tablinks[i].className = tablinks[i].className.replace(" w3-red", ""); } document.getElementById(animName).style.display = "chặn"; evt.currentTarget.className += " w3-red"; } </script> </body> </html>