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 lang="vi"> <head> <title>Mẫu W3.CSS</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device -width,initial-scale=1"> <link rel="stylesheet" href="https://www.example.com.vn/w3css/4/w3.css"> <link href='https://fonts. googleapis.com/css?family=RobotoDraft' rel='stylesheet' type='text/css'> <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: "RobotoDraft", "Roboto", sans-serif} . w3-bar-block .w3-bar-item {padding: 16px} </style> </head> <body> <!-- Điều hướng bên --> <nav class="w3-sidebar w3-bar-block w3 -collapse w3-white w3-animate-left w3-card" style="z-index:3;width:320px;" id="mySidebar"> <a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom w3-large"><img src="https://www. example.com.vn/images/w3schools.png" style="width:60%;"></a> <a href="javascript:void(0)" onclick="w3_close()" title="Đóng Sidemenu" lớp ="w3-bar-item w3-button w3-hide-large w3-large">Đóng <i class="fa fa-remove"></i></a> <a href="javascript:void(0 )" class="w3-bar-item w3-button w3-dark-grey w3-button w3-hover-black w3-left-align" onclick="document.getElementById('id01').style.display='block '">Tin nhắn mới <i class="w3-padding fa fa-pencil"></i></a> <a id="myBtn" onclick="myFunc('Demo1')" href="javascript:void (0)" class="w3-bar-item w3-button"><i class="fa fa-inbox w3-margin-right"></i>Hộp thư đến (3)<i class="fa fa-caret -down w3-margin-left"></i></a> <div id="Demo1" class="w3-hide w3-animate-left"> <a href="javascript:void(0)" lớp ="w3-bar-item w3-button w3-border-bottom thử nghiệm w3-hover-light-grey" onclick="openMail('Borge');w3_close();" id="firstTab"> <div class="w3-container"> <img class="w3-round w3-margin-right" src="/w3images/avatar3.png" style="width:15%;"> <span class="w3-opacity w3-large">Borge Refsnes</span> <h6>Chủ đề: Hãy nhớ tôi</h6> <p>Xin chào, tôi chỉ muốn cho bạn biết rằng tôi sẽ ở nhà. ..</p> </div> </a> <a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom thử nghiệm w3-hover-light-grey " onclick="openMail('Jane');w3_close();"> <div class="w3-container"> <img class="w3-round w3-margin-right" src="/w3images/avatar5.png " style="width:15%;"><span class="w3-opacity w3-large">Jane Doe</span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> < /div> </a> <a href="javascript:void(0)" class="w3-bar-item w3-button w3-border-bottom test w3-hover-light-grey" onclick="openMail(' John');w3_close();"> <div class="w3-container"> <img class="w3-round w3-margin-right" src="/w3images/avatar2.png" style="width:15 %;"><span class="w3-opacity w3-large">John Doe</span> <p>Chào mừng!</p> </div> </a> </div> <a href="# " class="w3-bar-item w3-button"><i class="fa fa-paper-plane w3-margin-right"></i>Đã gửi</a> <a href="#" class= "w3-bar-item w3-button"><i class="fa fa-hourglass-end w3-margin-right"></i>Bản nháp</a> <a href="#" class="w3- bar-item w3-button"><i class="fa fa-trash w3-margin-right"></i>Trash</a> </nav> <!-- Phương thức bật lên khi bạn nhấp vào " Tin nhắn mới" --> <div id="id01" class="w3-modal" style="z-index:4"> <div class="w3-modal-content w3-animate-zoom"> <div class ="w3-container w3-padding w3-red"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-red w3-right w3-xxlarge "><i class="fa fa-remove"></i></span> <h2>Gửi thư</h2> </div> <div class="w3-panel"> <label>Tới</ nhãn> <input class="w3-input w3-border w3-margin-bottom" type="text"> <label>Từ</label> <input class="w3-input w3-border w3-margin-bottom" type="text"> <label>Chủ đề</label> <input class="w3-input w3-border w3-margin-bottom" type="text"> <input class="w3-input w3-border w3- Margin-bottom" style="height:150px" placeholder="Bạn đang nghĩ gì vậy?"> <div class="w3-section"> <a class="w3-button w3-red" onclick="document.getElementById( 'id01').style.display='none'">Hủy <i class="fa fa-remove"></i></a> <a class="w3-button w3-light-grey w3-right " onclick="document.getElementById('id01').style.display='none'">Gửi <i class="fa fa-paper-plane"></i></a> </div> </ div> </div> </div> <!-- Hiệu ứng lớp phủ khi mở điều hướng bên trên màn hình nhỏ --> <div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close ()" style="cursor:pointer" title="Đóng Sidemenu" id="myOverlay"></div> <!-- Nội dung trang --> <div class="w3-main" style="margin-left :320px;"> <i class="fa fa-bars w3-button w3-white w3-hide-large w3-xlarge w3-margin-left w3-margin-top" onclick="w3_open()"></i > <a href="javascript:void(0)" class="w3-hide-large w3-red w3-button w3-right w3-margin-top w3-margin-right" onclick="document.getElementById('id01 ').style.display='block'"><i class="fa fa-pencil"></i></a> <div id="Borge" class="w3-container user"> <br> <img class="w3-round w3-animate-top" src="/w3images/avatar3.png" style="width:20%;"> <h5 class="w3-opacity">Chủ đề: Hãy nhớ tôi</ h5> <h4><i class="fa fa-clock-o"></i> Từ Borge Refsnes, ngày 27 tháng 9 năm 2015.</h4> <a class="w3-button w3-light-grey" href ="#">Trả lời<i class="w3-margin-left fa fa-mail-reply"></i></a> <a class="w3-button w3-light-grey" href="# ">Chuyển tiếp<i class="w3-margin-left fa fa-arrow-right"></i></a> <hr> <p>Xin chào, tôi chỉ muốn báo cho bạn biết rằng tôi sẽ về nhà at lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với một mục tiêu tối thiểu là có thể làm được, đ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 sau mỗi giao dịch. Ngoại trừ sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exeritation ullamco labis nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Với một mục tiêu tối thiểu là có thể làm được, đ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 sau mỗi giao dịch. Ngoại trừ sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exeritation ullamco labis nisi ut aliquip ex ea commodo consequat.</p> <p>Trân trọng, <br>Borge Refsnes</p> </div> <div id="Jane" class ="w3-container Person"> <br> <img class="w3-round w3-animate-top" src="/w3images/avatar5.png" style="width:20%;"> <h5 class=" w3-opacity">Chủ đề: Không</h5> <h4><i class="fa fa-clock-o"></i> Từ Jane Doe, ngày 25 tháng 9 năm 2015.</h4> <a class=" w3-button w3-light-grey">Trả lời<i class="w3-margin-left fa fa-mail-reply"></i></a> <a class="w3-button w3-light-grey ">Chuyển tiếp<i class="w3-margin-left fa fa-arrow-right"></i></a> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lao động và dolore magna aliqua. Với một mục tiêu tối thiểu là có thể làm được, đ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 sau mỗi giao dịch. Ngoại trừ sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud gắng sức ullamco labis nisi ut aliquip ex ea commodo consequat.</p> <p>Forever yours,<br>Jane</p> </div> <div id="John" class= "w3-container Person"> <br> <img class="w3-round w3-animate-top" src="/w3images/avatar2.png" style="width:20%;"> <h5 class="w3 -opacity">Chủ đề: Không</h5> <h4><i class="fa fa-clock-o"></i> Từ John Doe, ngày 23 tháng 9 năm 2015.</h4> <a class="w3 -button w3-light-grey">Trả lời<i class="w3-margin-left fa fa-mail-reply"></i></a> <a class="w3-button w3-light-grey" >Chuyển tiếp<i class="w3-margin-left fa fa-arrow-right"></i></a> <hr> <p>Chào mừng bạn.</p> <p>Vậy thôi!</p> </div> </div> <script> var openInbox = document.getElementById("myBtn"); openInbox.click(); hàm w3_open() { document.getElementById("mySidebar").style.display = "block"; document.getElementById("myOverlay").style.display = "block"; } hàm w3_close() { document.getElementById("mySidebar").style.display = "none"; document.getElementById("myOverlay").style.display = "none"; } hàm myFunc(id) { var x = document.getElementById(id); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; x.previousSibling.className += " w3-red"; } else { x.className = x.className.replace(" w3-show", ""); x.previousSibling.className = x.previousElementSibling.className.replace(" w3-red", ""); } } hàm openMail("Borge") openMail(personName) { var i; var x = document.getElementsByClassName("người"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x = document.getElementsByClassName("test"); for (i = 0; i < x.length; i++) { x[i].className = x[i].className.replace(" w3-light-grey", ""); } document.getElementById(personName).style.display = "chặn"; event.currentTarget.className += " w3-light-grey"; } </script> <script> var openTab = document.getElementById("firstTab"); openTab.click(); </script> </body> </html>