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://www. example.com.vn/lib/w3-theme-black.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font -awesome.min.css"> </head> <body> <!-- Điều hướng bên --> <nav class="w3-sidebar w3-bar-block w3-card w3-animate-left w3-center" style ="display:none" id="mySidebar"> <h1 class="w3-xxxlarge w3-text-theme">Điều hướng bên</h1> <button class="w3-bar-item w3-button" onclick=" w3_close()">Đóng <i class="fa fa-remove"></i></button> <a href="#" class="w3-bar-item w3-button">Liên kết 1</a > <a href="#" class="w3-bar-item w3-button">Liên kết 2</a> <a href="#" class="w3-bar-item w3-button">Liên kết 3< /a> <a href="#" class="w3-bar-item w3-button">Liên kết 4</a> </nav> <!-- Tiêu đề --> <header class="w3-container w3 -theme w3-padding" id="myHeader"> <i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-button w3-theme"></i> <div class="w3- center"> <h4>TRANG WEB PHẢN HỒI ĐẸP</h4> <h1 class="w3-xxxlarge w3-animate-bottom">Được xây dựng bằng W3.CSS</h1> <div class="w3-padding-32"> <button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" onclick="document.getElementById('id01').style.display='block'" style="font-weight :900;">TÌM HIỂU W3.CSS</button> </div> </div> </header> <!-- Modal --> <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-card-4 w3-animate-top"> <header class="w3-container w3-theme-l1"> <span onclick="document.getElementById('id01').style .display='none'" class="w3-button w3-display-topright">×</span> <h4>Ôi trời! Chúng tôi vừa cho bạn xem một phương thức..</h4> <h5>Bởi vì chúng tôi có thể <i class="fa fa-smile-o"></i></h5> </header> <div class="w3- đệm"> <p>Tuyệt nhỉ? Ok, đùa thế đủ rồi..</p> <p>Hãy truy cập <a class="w3-btn" href="/w3css/default.asp">Hướng dẫn W3.CSS</a> của chúng tôi để tìm hiểu thêm!< /p> </div> <footer class="w3-container w3-theme-l1"> <p>Chân trang phương thức</p> </footer> </div> </div> <div class="w3- đệm hàng w3-center w3-margin-top"> <div class="w3-third"> <div class="w3-card w3-container" style="min-height:460px"> <h3>Đáp ứng< /h3><br> <i class="fa fa-desktop w3-margin-bottom w3-text-theme" style="font-size:120px"></i> <p>Khả năng phản hồi tích hợp</p > <p>Lưới chất lỏng đầu tiên trên thiết bị di động</p> <p>Vừa với mọi kích thước màn hình</p> <p>Máy tính bảng và thiết bị di động PC</p> </div> </div> <div class="w3-third "> <div class="w3-card w3-container" style="min-height:460px"> <h3>CSS tiêu chuẩn</h3><br> <i class="fa fa-css3 w3-margin-bottom w3-text-theme" style="font-size:120px"></i> <p>Chỉ CSS tiêu chuẩn</p> <p>Dễ học</p> <p>Không cần jQuery</p > <p>Không có thư viện JavaScript</p> </div> </div> <div class="w3-third"> <div class="w3-card w3-container" style="min-height:460px" > <h3>Thiết kế</h3><br> <i class="fa fa-diamond w3-margin-bottom w3-text-theme" style="font-size:120px"></i> <p>Giấy thích thiết kế</p> <p>Màu sắc đậm và bóng</p> <p>Bình đẳng trên các nền tảng</p> <p>Bình đẳng trên các thiết bị</p> </div> </div> </div> < div class="w3-container"> <hr> <div class="w3-center"> <h2>Các lớp màu</h2> </div> <div class="w3-row"> <div class=" w3-col w3-container m2 w3-red"><p>Đỏ</p></div> <div class="w3-col w3-container m2 w3-blue"><p>Xanh lam</p>< /div> <div class="w3-col w3-container m2 w3-blue-grey"><p>Xám xanh</p></div> <div class="w3-col w3-container m2 w3-teal "><p>Màu xanh mòng két</p></div> <div class="w3-col w3-container m2 w3- yellow"><p>Vàng</p></div> <div class="w3- col w3-container m2 w3-orange"><p>Cam</p></div> </div> <hr> <div class="w3-center"> <h2>Khả năng phản hồi tích hợp</h2> <p class="w3-large">Thay đổi kích thước trang để xem hiệu ứng!</p> </div> <br> <div class="w3-row w3-border"> <div class="w3-half w3-container w3-blue w3-border"> <h5>w3-half</h5> <p>Lớp w3-half sử dụng một nửa (50%) cửa sổ màn hình.</p> <p>Trên màn hình nhỏ (tối đa 600 pixel), nó tự động thay đổi kích thước thành chiều rộng toàn màn hình.</p> </div> <div class="w3-half w3-container"> <h5>w3-half</h5> </div> </ div> <br> <div class="w3-row w3-border"> <div class="w3-third w3-container w3-green"> <h5>w3-third</h5> <p>W3- hạng thứ ba sử dụng một phần ba (33,33%) màn hình góa.</p> <p>Trên màn hình nhỏ (tối đa 600 pixel), nó tự động thay đổi kích thước thành chiều rộng toàn màn hình.</p> </div> <div class=" w3-third w3-container"> <h5>w3-third</h5> </div> <div class="w3-third w3-container"> <h5>w3-third</h5> </div> < /div> <br> <div class="w3-row w3-border"> <div class="w3-quarter w3-container w3-red"> <h5>w3-quarter</h5> <p>W3 -quarter class sử dụng một phần tư (25%) cửa sổ màn hình.</p> <p>Trên màn hình nhỏ (tối đa 600 pixel), nó tự động thay đổi kích thước thành chiều rộng toàn màn hình.</p> </div> <div class= "w3-quarter w3-container"> <h5>w3-quarter</h5> </div> <div class="w3-quarter w3-container"> <h5>w3-quarter</h5> </div> <div class="w3-quarter w3-container"> <h5>w3-quarter</h5> </div> </div> <div class="w3-center"> <h2>Vùng chứa</h2> < p>Sử dụng vùng chứa để tạo đầu trang, phần và chân trang.</p> </div> <header class="w3-container w3-blue-grey"> <h2>Tiêu đề</h2> </header> <div class ="w3-padding w3-white w3-display-container"> <span onclick="this.parentElement.style.display='none'" class="w3-button w3-display-topright"><i class=" fa fa-remove"></i></span> <h2>London</h2> <p>London là thủ đô của nước Anh. Đâ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> <p>Nằm bên sông Thames, London là một khu định cư lớn trong hai thiên niên kỷ, lịch sử của nó bắt nguồn từ những ngày đầu thành lập. được thành lập bởi người La Mã, người đã đặt tên cho nó là Londinium.</p> <p>Nhân tiện, bạn có thể thêm biểu tượng đóng vào tất cả các vùng chứa nếu bạn muốn có khả năng ẩn chúng. Hãy nhìn sang bên phải của bạn!</p> </div> <footer class="w3-container w3-blue-grey"> <h5>Footer</h5> <p class="w3-opacity">Thông tin về chân trang ở đây </p> </footer> <hr> <div class="w3-center"> <h2>Chủ đề màu sắc</h2> <p>Các chủ đề màu sắc được thiết kế để phối hợp hài hòa với nhau.</p> </div> </div> <div class="w3-row-padding"> <div class="w3-half"> <div class="w3-card white"> <div class="w3-container w3 -indigo"> <h3>Chủ đề Indigo</h3> </div> <div class="w3-container"> <h3 class="w3-text-indigo">Phim 2014</h3> </div> < ul class="w3-ul w3-border-top"> <li> <h3>Frozen</h3> <p>Phản hồi về hoạt ảnh thật lố bịch</p> </li> <li> <h3> Fault in Our Stars</h3> <p>Cảm động, hấp dẫn và được thực hiện rất tốt</p> </li> <li> <h3>The Avengers</h3> <p>Một thành công vang dội của Marvel và Disney</p> p> </li> </ul> <div class="w3-container w3-indigo w3-large"><span class="w3-right">Tiếp theo</span></div> </div> < /div> <div class="w3-half"> <div class="w3-card white"> <div class="w3-container w3-theme"> <h3>Chủ đề</h3> </div> < div class="w3-container"> <h3 class="w3-text-theme">Phim 2014</h3> </div> <ul class="w3-ul w3-border-top"> <li> < h3>Frozen</h3> <p>Phản hồi về hình ảnh động thật lố bịch</p> </li> <li> <h3>The Fault in Our Stars</h3> <p>Cảm giác chạm, hấp dẫn và được thực hiện rất tốt </p> </li> <li> <h3>The Avengers</h3> <p>Một thành công vang dội của Marvel và Disney</p> </li> </ul> <div class="w3-container w3-theme w3-large"><span class="w3-right">Tiếp theo</span></div> </div> </div> </div> <div class="w3-container w3-center "> <hr> <h3>Thẻ giống như tờ giấy có bóng</h3> </div> <div class="w3-row-padding"> <div class="w3-third"> <div class="w3 -card"> <img src="/w3images/car.jpg" alt="Car" style="width:100%"> <div class="w3-container"> <p>w3-card</p> </div> </div> </div> <div class="w3-third"> <div class="w3-card-4"> <img src="/w3images/car.jpg" alt="Car " style="width:100%"> <div class="w3-container"> <p>w3-card-4</p> </div> </div> </div> <div class="w3 -thứ ba"> <div class="w3-card-4"> <img src="/w3images/car.jpg" alt="Car" style="width:100%"> <div class="w3-container "> <p>w3-card-4</p> </div> </div> </div> </div> <div class="w3-container"> <hr> <div class="w3- center"> <h2>Bảng</h2> <p w3-class="w3-large">Đừng lo lắng. W3.CSS chăm sóc các bảng của bạn.</p> </div> <div class="w3- responsive w3-card-4"> <table class="w3-table w3-striped w3-bordered"> <thead > <tr class="w3-theme"> <th>Tên</th> <th>Họ</th> <th>Điểm</th> </tr> </thead> <tbody> <tr > <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr class="w3-white"> <td>Eve</td> <td> Jackson</td> <td>94</td> </tr> <tr> <td>Adam</td> <td>Johnson</td> <td>67</td> </tr> </ tbody> </table> </div> <hr> <h2 class="w3-center">Biểu mẫu và danh sách</h2> </div> <div class="w3-row-padding"> <div class= "w3-half"> <form class="w3-container w3-card-4"> <h2>Biểu mẫu đầu vào</h2> <div class="w3-section"> <input class="w3-input" type ="text" bắt buộc> <label>Tên</label> </div> <div class="w3-section"> <input class="w3-input" type="text" bắt buộc> <label>Email</ nhãn> </div> <div class="w3-section"> <input class="w3-input" type="text" require> <label>Chủ đề</label> </div> <div class="w3 -row"> <div class="w3-half"> <input id="milk" class="w3-check" type="checkbox"checked="checked"> <label>Sữa</label> <br> <input id="sugar" class="w3-check" type="checkbox"> <label>Đường</label> <br> <input id="lemon" class="w3-check" type="checkbox" bị vô hiệu hóa> <label>Chanh (Đã tắt)</label> <br><br> </div> <div class="w3-half"> <input id="male" class="w3-radio" type=" radio" name="gender" value="male" đã kiểm tra> <label>Nam</label> <br> <input id="female" class="w3-radio" type="radio" name="gender" value ="female"> <label>Nữ</label> <br> <input id="unknown" class="w3-radio" type="radio" name="gender" value="" bị vô hiệu hóa> <label> Don 'không biết (Đã tắt)</label> </div> </div> </form> </div> <div class="w3-half"> <div class="w3-card-4 w3-container" > <h2>Danh sách</h2> <ul class="w3-ul w3-margin-bottom"> <li>Jill</li> <li>Eve</li> <li>Adam</li> </ ul> <br> <ul class="w3-ul w3-border w3-hoverable"> <li class="w3-theme">Jill</li> <li>Eve</li> <li>Adam</ li> <li>Steve</li> </ul> <br> </div> </div> </div> <hr> <h2 class="w3-center">Thanh tiến trình</h2> <div class="w3-container"> <div class="w3-light-gray"> <div id="myBar" class="w3-center w3-padding w3-theme" style="width:5%">5 %</div> </div><br> <button class="w3-btn w3-theme" onclick="move()">Nhấp vào tôi</button> </div> <hr> <h2 class=" w3-center">Trình chiếu</h2> <div class="w3-content" style="max-width:800px;position:relative"> <img class="mySlides w3-animate-opacity" src="/w3images /snow.jpg" style="width:100%"> <img class="mySlides w3-animate-opacity" src="/w3images/lights.jpg" style="width:100%"> <img class=" mySlides w3-animate-opacity" src="/w3images/mountains.jpg" style="width:100%"> <img class="mySlides w3-animate-opacity" src="/w3images/forest.jpg" style= "width:100%"> <a class="w3-button w3-hover-dark-grey" style="position:absolute;top:45%;left:0;" onclick="plusDivs(-1)">❮</a> <a class="w3-button w3-hover-dark-grey" style="position:absolute;top:45%;right:0;" onclick="plusDivs(+1)">❯</a> </div> <div class="w3-container"> <hr> <h2 class="w3-center">Điều hướng</h2> <div class ="w3-bar w3-theme"> <a href="#" class="w3-bar-item w3-button w3-padding-16">Trang chủ</a> <a href="#" class=" w3-bar-item w3-button w3-padding-16">Liên kết 1</a> <div class="w3-dropdown-hover"> <button class="w3-button w3-padding-16"> Thả xuống < tôi class="fa fa-caret-down"></i> </button> <div class="w3-dropdown-content w3-card-4 w3-bar-block"> <a href="javascript:void (0)" class="w3-bar-item w3-button">Liên kết 1</a> <a href="javascript:void(0)" class="w3-bar-item w3-button">Liên kết 2 </a> <a href="javascript:void(0)" class="w3-bar-item w3-button">Liên kết 3</a> </div> </div> </div> <hr> <h2 class="w3-center">Accordes</h2> <button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-theme w3-button w3-block w3-left-align" >Mở Phần 1</button> <div id="Demo1" class="w3-hide"> <div class="w3-container"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor sự cố xảy ra do lao động và 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 ngắn để giải quyết hậu quả của hàng hóa.</p> </div> </div> <button onclick="myAccFunc('Demo2')" class="w3-padding- 16 w3-theme w3-button w3-block w3-left-align">Mở phần 2</button> <div id="Demo2" class="w3-hide"> <a href="#" class="w3 -button w3-block w3-left-align">Liên kết 1</a> <a href="#" class="w3-button w3-block w3-left-align">Liên kết 2</a> <a href ="#" class="w3-button w3-block w3-left-align">Liên kết 3</a> </div> <button onclick="myAccFunc('Demo3')" class="w3-padding-16 w3-theme w3-button w3-block w3-left-align">Mở phần 3</button> <div id="Demo3" class="w3-hide w3-black"> <div class="w3-container" > <p>Accordion có hình ảnh:</p> <img src="img_snowtops.jpg" style="width:30%;" class="w3-animate-zoom"> <p>Dãy Alps thuộc Pháp</p> </div> </div> <hr> <h2 class="w3-center">Tab</h2> <div class=" w3-border"> <div class="w3-bar w3-theme"> <button class="w3-bar-item w3-button testbtn w3-padding-16" onclick="openCity(event,'London')" >Luân Đôn</button> <button class="w3-bar-item w3-button testbtn w3-padding-16" onclick="openCity(event,'Paris')">Paris</button> <button class="w3 -bar-item w3-button testbtn w3-padding-16" onclick="openCity(event,'Tokyo')">Tokyo</button> </div> <div id="London" class="w3-container city w3-animate-opacity"> <h2>London</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 diện tích đô thị hơn 13 triệu dân.</p> </div> <div id="Paris" class="w3-container city w3-animate-opacity"> <h2>Paris</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="Tokyo" class="w3-container city w3-animate-opacity"> <h2>Tokyo</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 ở world.</p> </div> </div> <hr> <h2 class="w3-center">Các nút</h2> <div class="w3-center"> <br> <a class=" w3-button w3-theme">Nút</a> <a class="w3-button w3-theme">Nút</a> <a class="w3-button w3-theme-d3 w3-disabled">Nút </a> <br><br> <a class="w3-button w3-circle w3-large w3-black"><i class="fa fa-plus"></i></a> <a class="w3-button w3-circle w3-large w3-theme"><i class="fa fa-plus"></i></a> <a class="w3-button w3-circle w3-large w3-card-4"><i class="fa fa-plus"></i></a> </div> <br> <div class="w3-center"> <div class="w3- dropdown-hover"> <button class="w3-button w3-theme">Thả xuống <i class="fa fa-caret-down"></i></button> <div class="w3-dropdown-content w3-bar-block w3-border"> <a href="#" class="w3-bar-item w3-button">Liên kết 1</a> <a href="#" class="w3-bar- item w3-button">Liên kết 2</a> <a href="#" class="w3-bar-item w3-button">Liên kết 3</a> </div> </div> </div> </div> <hr> <div class="w3-center"> <h2>Phân trang</h2> <!-- Phân trang --> <div class="w3-center w3-padding-32"> <div class="w3-bar"> <a href="#" class="w3-bar-item w3-button w3-hover-theme"></a> <a href="#" class="w3- bar-item w3-button w3-theme w3-hover-theme">1</a> <a href="#" class="w3-bar-item w3-button w3-hover-theme">2</a > <a href="#" class="w3-bar-item w3-button w3-hover-theme">3</a> <a href="#" class="w3-bar-item w3-button w3 -hover-theme">4</a> <a href="#" class="w3-bar-item w3-button w3-hover-theme">5</a> <a href="#" class= "w3-bar-item w3-button w3-hover-theme">»</a> </div> </div> </div> <br> <!-- Footer --> <footer class="w3 -container w3-theme-dark w3-padding-16"> <h3>Chân trang</h3> <p>Được cung cấp bởi <a href="https://www.example.com.vn/w3css/default.asp" target= "_blank">w3.css</a></p> <div style="position:relative;bottom:55px;" class="w3-tooltip w3-right"> <span class="w3-text w3-theme-light w3-padding">Chuyển lên đầu</span> <a class="w3-text-white" href=" #myHeader"><span class="w3-xlarge"> <i class="fa fa-chevron-circle-up"></i></span></a> </div> <p>Hãy nhớ hãy xem <a href="w3css_references.asp" class="w3-btn w3-theme-light" target="_blank">Tham khảo W3.CSS</a></p> </footer> <!-- của chúng tôi Tập lệnh cho Thanh bên, Tab, Accordions, Thanh tiến trình và trình chiếu --> <script> // Chức năng điều hướng bên w3_open() { var x = document.getElementById("mySidebar"); x.style.width = "100%"; x.style.fontSize = "40px"; x.style.paddingTop = "10%"; x.style.display = "chặn"; } hàm w3_close() { document.getElementById("mySidebar").style.display = "none"; } // Hàm tab openCity(evt, cityName) { var i; var x = document.getElementsByClassName("city"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } var activebtn = document.getElementsByClassName("testbtn"); for (i = 0; i < x.length; i++) { activebtn[i].className = activebtn[i].className.replace(" w3-dark-grey", ""); } document.getElementById(cityName).style.display = "chặn"; evt.currentTarget.className += " w3-dark-grey"; } var mybtn = document.getElementsByClassName("testbtn")[0]; mybtn.click(); // Hàm Accordions myAccFunc(id) { var x = document.getElementById(id); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } // Trình chiếu var slideIndex = 1; hàm plusDivs(n) { slideIndex = slideIndex + n; showDivs(slideIndex); } hàm showDivs(n) { var x = document.getElementsByClassName("mySlides"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} ; for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex-1].style.display = "chặn"; } showDivs(1); // Thanh tiến trình function move() { var elem = document.getElementById("myBar"); chiều rộng var = 5; var id = setInterval(frame, 10); function frame() { if (width == 100) { clearInterval(id); } khác { chiều rộng++; elem.style.width = chiều rộng + '%'; elem.innerHTML = chiều rộng * 1 + '%'; } } } </script> </body> </html>