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=Raleway"> <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 {font-family: "Raleway", sans-serif} </style> </head> <body class="w3-light- grey"> <!-- Vùng chứa trên cùng --> <div class="w3-bar w3-top w3-black w3-large" style="z-index:4"> <button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" onclick="w3_open();"><i class="fa fa-bars"></i> Menu</i> nút> <span class="w3-bar-item w3-right">Biểu tượng</span> </div> <!-- Thanh bên/menu --> <nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br> <div class="w3-container w3-row"> <div class="w3-col s4"> <img src="/w3images/avatar2.png" class="w3- vòng tròn w3-margin-right" style="width:46px"> </div> <div class="w3-col s8 w3-bar"> <span>Chào mừng, <strong>Mike</strong></span> <br> <a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a> <a href="#" lớp ="w3-bar-item w3-button"><i class="fa fa-user"></i></a> <a href="#" class="w3-bar-item w3-button" ><i class="fa fa-cog"></i></a> </div> </div> <hr> <div class="w3-container"> <h5>Trang tổng quan</h5> < /div> <div class="w3-bar-block"> <a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3- hover-black" onclick="w3_close()" title="close menu"><i class="fa fa-remove fa-fw"></i> Đóng Menu</a> <a href="#" class ="w3-bar-item w3-button w3-padding w3-blue"><i class="fa fa-users fa-fw"></i> Tổng quan</a> <a href="#" class= "w3-bar-item w3-button w3-padding"><i class="fa fa-eye fa-fw"></i> Lượt xem</a> <a href="#" class="w3-bar -item w3-button w3-padding"><i class="fa fa-users fa-fw"></i> Lưu lượng truy cập</a> <a href="#" class="w3-bar-item w3- nút w3-padding"><i class="fa fa-bullseye fa-fw"></i> Địa lý</a> <a href="#" class="w3-bar-item w3-button w3-padding "><i class="fa fa-diamond fa-fw"></i> Đơn hàng</a> <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-bell fa-fw"></i> Tin tức</a> <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-bank fa-fw"></i> Chung</a> <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-history fa -fw"></i> Lịch sử</a> <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-cog fa-fw"> </i> Cài đặt</a><br><br> </div> </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- lớn w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="đóng menu bên" id="myOverlay"></div> <!-- !NỘI DUNG TRANG! --> <div class="w3-main" style="margin-left:300px;margin-top:43px;"> <!-- Tiêu đề --> <header class="w3-container" style="padding -top:22px"> <h5><b><i class="fa fa-dashboard"></i> Trang tổng quan của tôi</b></h5> </header> <div class="w3-row- phần đệm w3-margin-bottom"> <div class="w3-quarter"> <div class="w3-container w3-red w3-padding-16"> <div class="w3-left"><i class= "fa-comment w3-xxxlarge"></i></div> <div class="w3-right"> <h3>52</h3> </div> <div class="w3-clear"> </div> <h4>Tin nhắn</h4> </div> </div> <div class="w3-quarter"> <div class="w3-container w3-blue w3-padding-16"> <div class="w3-left"><i class="fa fa-eye w3-xxxlarge"></i></div> <div class="w3-right"> <h3>99</h3> </ div> <div class="w3-clear"></div> <h4>Lượt xem</h4> </div> </div> <div class="w3-quarter"> <div class="w3-container w3-teal w3-padding-16"> <div class="w3-left"><i class="fa fa-share-alt w3-xxxlarge"></i></div> <div class="w3 -right"> <h3>23</h3> </div> <div class="w3-clear"></div> <h4>Số lượt chia sẻ</h4> </div> </div> <div class= "w3-quarter"> <div class="w3-container w3-orange w3-text-white w3-padding-16"> <div class="w3-left"><i class="fa fa-users w3- xxxlarge"></i></div> <div class="w3-right"> <h3>50</h3> </div> <div class="w3-clear"></div> <h4> Người dùng</h4> </div> </div> </div> <div class="w3-panel"> <div class="w3-row-padding" style="margin:0 -16px"> <div class="w3-third"> <h5>Khu vực</h5> <img src="/w3images/khu vực.jpg" style="width:100%" alt="Bản đồ khu vực của Google"> </div> <div class="w3-twothird"> <h5>Nguồn cấp dữ liệu</h5> <table class="w3-table w3-striped w3-white"> <tr> <td><i class="fa fa-user w3-text -blue w3-large"></i></td> <td>Kỷ lục mới, hơn 90 lượt xem.</td> <td><i>10 phút</i></td> </tr> < tr> <td><i class="fa-bell w3-text-red w3-large"></i></td> <td>Lỗi cơ sở dữ liệu.</td> <td><i>15 phút </i></td> </tr> <tr> <td><i class="fa fa-users w3-text- yellow w3-large"></i></td> <td>Kỷ lục mới , hơn 40 người dùng.</td> <td><i>17 phút</i></td> </tr> <tr> <td><i class="fa fa-comment w3-text-red w3 -large"></i></td> <td>Nhận xét mới.</td> <td><i>25 phút</i></td> </tr> <tr> <td><i class="fa fa-bookmark w3-text-blue w3-large"></i></td> <td>Kiểm tra giao dịch.</td> <td><i>28 phút</i></td > </tr> <tr> <td><i class="fa fa-laptop w3-text-red w3-large"></i></td> <td>CPU quá tải.</td> <td ><i>35 phút</i></td> </tr> <tr> <td><i class="fa fa-share-alt w3-text-green w3-large"></i>< /td> <td>Số lượt chia sẻ mới.</td> <td><i>39 phút</i></td> </tr> </table> </div> </div> </div> < hr> <div class="w3-container"> <h5>Số liệu thống kê chung</h5> <p>Khách truy cập mới</p> <div class="w3-grey"> <div class="w3-container w3- center w3-padding w3-green" style="width:25%">+25%</div> </div> <p>Người dùng mới</p> <div class="w3-grey"> <div class ="w3-container w3-center w3-padding w3-orange" style="width:50%">50%</div> </div> <p>Tỷ lệ thoát</p> <div class="w3- grey"> <div class="w3-container w3-center w3-padding w3-red" style="width:75%">75%</div> </div> </div> <hr> <div class ="w3-container"> <h5>Các quốc gia</h5> <table class="w3-table w3-striped w3-bordered w3-border w3-hoverable w3-white"> <tr> <td>Hoa Kỳ</ td> <td>65%</td> </tr> <tr> <td>Vương quốc Anh</td> <td>15,7%</td> </tr> <tr> <td>Nga</td> <td>5,6%</td> </tr> <tr> <td>Tây Ban Nha</td> <td>2,1%</td> </tr> <tr> <td>Ấn Độ</td> <td >1,9%</td> </tr> <tr> <td>Pháp</td> <td>1,5%</td> </tr> </table><br> <button class="w3-button w3-dark-grey">Các quốc gia khác <i class="fa fa-arrow-right"></i></button> </div> <hr> <div class="w3-container"> <h5> Người dùng gần đây</h5> <ul class="w3-ul w3-card-4 w3-white"> <li class="w3-padding-16"> <img src="/w3images/avatar2.png" class= "w3-left w3-circle w3-margin-right" style="width:35px"> <span class="w3-xlarge">Mike</span><br> </li> <li class="w3- đệm-16"> <img src="/w3images/avatar5.png" class="w3-left w3-circle w3-margin-right" style="width:35px"> <span class="w3-xlarge"> Jill</span><br> </li> <li class="w3-padding-16"> <img src="/w3images/avatar6.png" class="w3-left w3-circle w3-margin-right " style="width:35px"> <span class="w3-xlarge">Jane</span><br> </li> </ul> </div> <hr> <div class="w3-container "> <h5>Nhận xét gần đây</h5> <div class="w3-row"> <div class="w3-col m2 text-center"> <img class="w3-circle" src="/w3images/ avatar3.png" style="width:96px;height:96px"> </div> <div class="w3-col m10 w3-container"> <h4>John <span class="w3-opacity w3-medium" >9:12 tối ngày 29 tháng 9 năm 2014</span></h4> <p>Hãy tiếp tục công việc TUYỆT VỜI! Tôi đang cổ vũ cho bạn!! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.</p><br> </div> </div> <div class="w3-row"> <div class ="w3-col m2 text-center"> <img class="w3-circle" src="/w3images/avatar1.png" style="width:96px;height:96px"> </div> <div class= "w3-col m10 w3-container"> <h4>Bo <span class="w3-opacity w3-medium">10:15 chiều ngày 28 tháng 9 năm 2014</span></h4> <p>Sed do eiusmod tạm thời xảy ra sự cố và dolore magna aliqua.</p><br> </div> </div> </div> <br> <div class="w3-container w3-dark-grey w3-padding-32" > <div class="w3-row"> <div class="w3-container w3-third"> <h5 class="w3-bottombar w3-border-green">Nhân khẩu học</h5> <p>Ngôn ngữ</ p> <p>Quốc gia</p> <p>Thành phố</p> </div> <div class="w3-container w3-third"> <h5 class="w3-bottombar w3-border-red"> Hệ thống</h5> <p>Trình duyệt</p> <p>OS</p> <p>Thêm</p> </div> <div class="w3-container w3-third"> <h5 class= "w3-bottombar w3-border-orange">Mục tiêu</h5> <p>Người dùng</p> <p>Hoạt động</p> <p>Địa lý</p> <p>Sở thích</p> </ div> </div> </div> <!-- Footer --> <footer class="w3-container w3-padding-16 w3-light-grey"> <h4>FOOTER</h4> <p>Được hỗ trợ bởi <a href="https://www.example.com.vn/w3css/default.asp" target="_blank">w3.css</a></p> </footer> <!-- Nội dung trang cuối --> </div> <script> // Lấy thanh bên 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>