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"> <style> body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif} </style> </head> <body class= "w3-light-grey"> <!-- w3-content xác định vùng chứa cho nội dung có kích thước cố định ở giữa và được bao quanh toàn bộ nội dung trang, ngoại trừ phần chân trang trong ví dụ này --> <div class="w3- content" style="max-width:1400px"> <!-- Header --> <header class="w3-container w3-center w3-padding-32"> <h1><b>BLOG CỦA TÔI</b> </h1> <p>Chào mừng đến với blog của <span class="w3-tag">unknown</span></p> </header> <!-- Grid --> <div class="w3- row"> <!-- Mục blog --> <div class="w3-col l8 s12"> <!-- Mục blog --> <div class="w3-card-4 w3-margin w3-white" > <img src="/w3images/woods.jpg" alt="Nature" style="width:100%"> <div class="w3-container"> <h3><b>TIÊU ĐỀ</b>< /h3> <h5>Mô tả tiêu đề, <span class="w3-opacity">Ngày 7 tháng 4 năm 2014</span></h5> </div> <div class="w3-container"> <p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis Nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac cumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed Tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue graida diam non fringilla.</p> <div class="w3-row"> <div class="w3-col m8 s12"> <p><button class=" w3-button w3-padding-large w3-white w3-border"><b>ĐỌC THÊM »</b></button></p> </div> <div class="w3-col m4 w3-hide -small"> <p><span class="w3-padding-large w3-right"><b>Nhận xét </b> <span class="w3-tag">0</span></span>< /p> </div> </div> </div> </div> <hr> <!-- Mục blog --> <div class="w3-card-4 w3-margin w3-white"> < img src="/w3images/bridge.jpg" alt="Na Uy" style="width:100%"> <div class="w3-container"> <h3><b>ĐĂNG NHẬP BLOG</b></h3 > <h5>Mô tả tiêu đề, <span class="w3-opacity">Ngày 2 tháng 4 năm 2014</span></h5> </div> <div class="w3-container"> <p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis Nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac cumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed Tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue graida diam non fringilla.</p> <div class="w3-row"> <div class="w3-col m8 s12"> <p><button class=" w3-button w3-padding-large w3-white w3-border"><b>ĐỌC THÊM »</b></button></p> </div> <div class="w3-col m4 w3-hide -small"> <p><span class="w3-padding-large w3-right"><b>Nhận xét </b> <span class="w3-badge">2</span></span>< /p> </div> </div> </div> </div> <!-- KẾT THÚC CÁC MỤC VÀO BLOG --> </div> <!-- Menu giới thiệu --> <div class="w3-col l4"> <!-- Giới thiệu về thẻ --> <div class="w3-card w3-margin w3-margin-top"> <img src="/w3images/avatar_g.jpg" style="width:100%" > <div class="w3-container w3-white"> <h4><b>Tên tôi</b></h4> <p>Chỉ có tôi, chính tôi và tôi, khám phá vũ trụ của sự không biết. Tôi có một trái tim yêu thương và quan tâm đến blog lorem ipsum và mauris neque quam. Tôi muốn chia sẻ thế giới của tôi với bạn.</p> </div> </div><hr> <!-- Bài viết --> <div class="w3-card w3-margin"> <div class=" w3-container w3-padding"> <h4>Bài viết phổ biến</h4> </div> <ul class="w3-ul w3-hoverable w3-white"> <li class="w3-padding-16"> < img src="/w3images/workshop.jpg" alt="Image" class="w3-left w3-margin-right" style="width:50px"> <span class="w3-large">Lorem</span ><br> <span>Sed mattis Nunc</span> </li> <li class="w3-padding-16"> <img src="/w3images/gondol.jpg" alt="Image" class=" w3-left w3-margin-right" style="width:50px"> <span class="w3-large">Ipsum</span><br> <span>Praes tinci sed</span> </li> < li class="w3-padding-16"> <img src="/w3images/skies.jpg" alt="Image" class="w3-left w3-margin-right" style="width:50px"> <span class="w3-large">Dorum</span><br> <span>Ultricies congue</span> </li> <li class="w3-padding-16 w3-hide-medium w3-hide-small" > <img src="/w3images/rock.jpg" alt="Image" class="w3-left w3-margin-right" style="width:50px"> <span class="w3-large">Mingsum< /span><br> <span>Lorem ipsum dimsum</span> </li> </ul> </div> <hr> <!-- Nhãn / thẻ --> <div class="w3-card w3 -margin"> <div class="w3-container w3-padding"> <h4>Thẻ</h4> </div> <div class="w3-container w3-white"> <p><span class=" w3-tag w3-black w3-margin-bottom">Du lịch</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">New York</span> <span class ="w3-tag w3-light-grey w3-small w3-margin-bottom">London</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">IKEA< /span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Na Uy</span> <span class="w3-tag w3-light-grey w3-small w3-margin -bottom">DIY</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Ý tưởng</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Em bé</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Gia đình</span> <span class="w3- tag w3-light-grey w3-small w3-margin-bottom">Tin tức</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Quần áo</span> < span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Mua sắm</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom"> Thể thao</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Trò chơi</span> </p> </div> </div> <!-- END Menu giới thiệu --> </div> <!-- END GRID --> </div><br> <!-- END w3-content --> </div> <!-- Footer --> <footer class="w3-container w3-dark-grey w3-padding-32 w3-margin-top"> <button class="w3-button w3-black w3-disabled w3-padding-large w3-margin-bottom">Trước </button> <button class="w3-button w3-black w3-padding-large w3-margin-bottom">Tiếp theo »</button> <p>Được cung cấp bởi <a href="https://www.w3schools .com/w3css/default.asp" target="_blank">w3.css</a></p> </footer> </body> </html>