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/w3pro.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="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)" lớp ="w3-bar-item w3-button">Liên kết 3</a> <a href="javascript:void(0)" class="w3-bar-item w3-button">Liên kết 4</a> < /nav> <!-- Tiêu đề --> <header class="w3-container w3-theme w3-padding-32" 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-button w3-xlarge w3-theme-light" 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"> <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-button w3-theme" href="/w3css/default.asp">Hướng dẫn W3.CSS</a> của chúng tôi để tìm hiểu hơn thế nữa!</p> </div> <footer class="w3-container w3-theme"> <p>Chân trang phương thức</p> </footer> </div> </div> <div class="w3 -row-padding 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</h3><br> p> <p>Lưới linh hoạt đầ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- thứ ba"> <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- dưới cùng 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> <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> Thiết kế giống như giấy</p> <p>Màu đậ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>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-theme"> <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-theme"> <h5>w3-third</h5> <p>Lớp w3-third sử dụng một phần ba (33,33%) số góa phụ màn hình.</p> < p>Trên màn hình nhỏ (tối đa 600 pixel), nó sẽ 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-theme"> <h5>w3-quarter</h5> <p>Lớp w3-quarter 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ó sẽ 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-theme"> <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-theme-dark"> <h5>Footer</h5> <p class="w3-opacity">Thông tin 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"> <div class="w3-container w3- theme"> <h3>Phim 2014</h3> </div> <ul class="w3-ul w3-theme-l5"> <li> <h3>Frozen</h3> <p>Phản ứng với hoạt hình thật nực cười</p> </li> <li> <h3>The Fault in Our Stars</h3> <p>Chạm vào, 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-bar w3-theme w3-large"><span class="w3- nút w3-right">Tiếp theo</span></div> </div> </div> <div class="w3-half"> <div class="w3-card"> <div class="w3- container w3-theme-dark"> <h3>Phim 2014</h3> </div> <ul class="w3-ul w3-theme"> <li> <h3>Frozen</h3> <p>Phản hồi đến phần hoạt hình thật lố bịch</p> </li> <li> <h3>The 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> </li> </ul> <div class="w3-bar w3-theme-dark w3-large"><span class="w3-button 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"> <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> <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> <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 nhập</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" require> <label>Email</label> </div> < div class="w3-section"> <input class="w3-input" type="text" bắt buộc> <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>Lemon ( Đã tắt)</label> <br><br> </div> <div class="w3-half"> <input id="male" class="w3-radio" type="radio" name="gender" value="male" đã chọn> <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> 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-theme-light"> <div id="myBar" class="w3-center w3-padding w3-theme" style="width:5%">5%</div> </ div><br> <button class="w3-button 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 w3-display-container" style="max-width:800px"> <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-theme w3-display-left" onclick="plusDivs(-1)">❮</a> <a class="w3-button w3-theme w3-display-right" 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="javascript:void(0)" class="w3-bar-item w3-button w3-padding-16">Trang chủ</a> <a href=" javascript:void(0)" class="w3-bar-item w3-button w3-padding-16">Liên kết 1</a> <div class="w3-dropdown-hover"> <button class="w3- nút w3-padding-16"> Thả xuống <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">Accordions</h2> <button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-theme w3- nút 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 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 làm việc quá sức để có được một giải pháp từ một giao dịch do đó.</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="javascript:void(0) " class="w3-button w3-block w3-left-align">Liên kết 1</a> <a href="javascript:void(0)" class="w3-button w3-block w3-left-align" >Liên kết 2</a> <a href="javascript:void(0)" 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- ẩn w3-black"> <div class="w3-container"> <p>Accordion có hình ảnh:</p> <img src="/w3images/snow.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-dark">Nút</a> <a class="w3-button w3-theme">Nút</a> <a class="w3-button w3-theme w3-disabled">Nút </a> <br><br> <a class="w3-button w3-circle w3-large w3-theme-dark"><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="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> </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="javascript:void(0)" class="w3-bar-item w3-button"> «</a> <a href="javascript:void(0)" class="w3-bar-item w3-button w3-theme">1</a> <a href="javascript:void(0)" class="w3-bar-item w3-button">2</a> <a href="javascript:void(0)" class="w3-bar-item w3-button">3</a> <a href="javascript:void(0)" class="w3-bar-item w3-button">4</a> <a href="javascript:void(0)" class="w3-bar-item w3- nút">5</a> <a href="javascript:void(0)" class="w3-bar-item w3-button">»</a> </div> </div> </div> <br> <!-- Chân trang --> <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">Về đầu trang</span> <a href="#myHeader"><span class=" w3-xlarge"> <i class="fa fa-chevron-circle-up"></i></span></a> </div> <p>Hãy nhớ xem <a href="w3css_references của chúng tôi .asp" class="w3-button w3-theme-light" target="_blank">Tham khảo W3.CSS</a></p> </footer> <!-- Tập lệnh cho Thanh bên, Tab, Accordions, Progress thanh và trình chiếu --> <SCRIPT_PLACEHOLDER_8/> </body> </html>