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=Oswald"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans"> <link rel="stylesheet" href="https ://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> h1,h2,h3,h4,h5,h6 {font-family : "Oswald"} body {font-family: "Open Sans"} </style> </head> <body class="w3-light-grey"> <!-- Thanh điều hướng với các biểu tượng mạng xã hội --> < div class="w3-bar w3-black w3-hide-small"> <a href="#" class="w3-bar-item w3-button"><i class="fa fa-facebook-official"> </i></a> <a href="#" class="w3-bar-item w3-button"><i class="fa fa-instagram"></i></a> <a href ="#" class="w3-bar-item w3-button"><i class="fa fa-snapchat"></i></a> <a href="#" class="w3-bar- item w3-button"><i class="fa fa-flickr"></i></a> <a href="#" class="w3-bar-item w3-button"><i class=" fa fa-twitter"></i></a> <a href="#" class="w3-bar-item w3-button"><i class="fa fa-linkedin"></i>< /a> <a href="#" class="w3-bar-item w3-button w3-right"><i class="fa fa-search"></i></a> </div> < !-- w3-content xác định vùng chứa cho nội dung tập trung vào kích thước cố định 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: 1600px"> <!-- Header --> <header class="w3-container w3-center w3-padding-48 w3-white"> <h1 class="w3-xxxlarge"><b>JANE BLOGLIFE</b ></h1> <h6>Chào mừng đến với blog của <span class="w3-tag">thế giới của Jane</span></h6> </header> <!-- Image header --> <header class= "w3-display-container w3-wide" id="home"> <img class="w3-image" src="/w3images/jane.jpg" alt="Blog thời trang" width="1600" Height="1060 "> <div class="w3-display-left w3-padding-large"> <h1 class="w3-text-white">của Jane</h1> <h1 class="w3-jumbo w3-text-white w3 -hide-small"><b>BLOG THỜI TRANG</b></h1> <h6><button class="w3-button w3-white w3-padding-large w3-large w3-opacity w3-hover-opacity- off" onclick="document.getElementById('subscribe').style.display='block'">ĐĂNG KÝ</button></h6> </div> </header> <!-- Grid --> <div class="w3-row w3-padding w3-border"> <!-- Mục blog --> <div class="w3-col l8 s12"> <!-- Mục blog --> <div class="w3 -container w3-white w3-margin w3-padding-large"> <div class="w3-center"> <h3>TIÊU ĐỀ TIÊU ĐỀ</h3> <h5>Mô tả tiêu đề, <span class="w3-opacity"> Ngày 2 tháng 5 năm 2016</span></h5> </div> <div class="w3-justify"> <img src="/w3images/girl_hat.jpg" alt="Girl Hat" style="width:100 %" class="w3-padding-16"> <p><strong>Thêm nhiều mũ hơn!</strong> Gần đây tôi rất mê mũ. Một số văn bản về mục blog này. Thời trang thời trang và 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 sedtellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gradida diam non fringilla.</p> <p>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 kích thích ullamco.</p> <p class="w3-left"><button class="w3-button w3-white w3-border" onclick="likeFunction(this)">< b><i class="fa fa-thumbs-up"></i> Thích</b></button></p> <p class="w3-right"><button class="w3-button w3-black" onclick="myFunction('demo1')" id="myBtn"><b>Trả lời </b> <span class="w3-tag w3-white">1</span></button> </p> <p class="w3-clear"></p> <div class="w3-row w3-margin-bottom" id="demo1" style="display:none"> <hr> <div class="w3-col l2 m3"> <img src="/w3images/avatar_smoke.jpg" style="width:90px;"> </div> <div class="w3-col l10 m9"> <h4> George <span class="w3-opacity w3-medium">6:32 chiều ngày 3 tháng 5 năm 2015</span></h4> <p>Bài đăng blog tuyệt vời! Đang theo dõi</p> </div> </div> </div> </div> <hr> <!-- Mục blog --> <div class="w3-container w3-white w3-margin w3-padding -large"> <div class="w3-center"> <h3>TIÊU ĐỀ TIÊU ĐỀ</h3> <h5>Mô tả tiêu đề, <span class="w3-opacity">Ngày 23 tháng 4 năm 2016</span></h5 > </div> <div class="w3-justify"> <img src="/w3images/man_hat.jpg" alt="Đàn ông đội mũ" style="width:100%" class="w3-padding-16 "> <p><strong>Mũ!</strong> Xu hướng mùa hè năm nay là mũ dành cho nam giới!</p> <p>Một số nội dung về mục blog này. Thời trang thời trang và 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 sedtellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue graida diam non fringilla.</p> <p class="w3-left"><button class="w3-button w3-white w3-border" onclick="likeFunction( this)"><b><i class="fa fa-thumbs-up"></i> Thích</b></button></p> <p class="w3-right"><button class ="w3-button w3-black" onclick="myFunction('demo2')"><b>Trả lời </b> <span class="w3-tag w3-white">2</span></button> </p> <p class="w3-clear"></p> <!-- Ví dụ về trường nhận xét --> <div id="demo2" style="display:none"> <div class="w3 -row"> <hr> <div class="w3-col l2 m3"> <img src="/w3images/girl_train.jpg" style="width:90px;"> </div> <div class="w3 -col l10 m9"> <h4>Amber <span class="w3-opacity w3-medium">26 tháng 4 năm 2015, 22:52</span></h4> <p>Yêu trang blog của bạn! Đơn giản là tốt nhất! 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 w3-margin-bottom "> <div class="w3-col l2 m3"> <img src="/w3images/girl.jpg" style="width:90px;"> </div> <div class="w3-col l10 m9" > <h4>Angie <span class="w3-opacity w3-medium">23:12 ngày 23 tháng 4 năm 2015</span></h4> <p>Mũ tình yêu!!</p> </div> </div> </div> </div> </div> <!-- Mục blog --> <div class="w3-container w3-white w3-margin w3-padding-large"> <div class= "w3-center"> <h3>TIÊU ĐỀ TITLE</h3> <h5>Mô tả tiêu đề, <span class="w3-opacity">Ngày 7 tháng 4 năm 2016</span></h5> </div> <div class ="w3-justify"> <img src="/w3images/runway.jpg" alt="Runway" style="width:100%" class="w3-padding-16"> <p><strong>Đừng bỏ lỡ !</strong> Sàn diễn ở Thành phố New York cuối tuần này sẽ trở thành huyền thoại!</p> <p>Một số nội dung về mục blog này. Thời trang thời trang và 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 sedtellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue graida diam non fringilla.</p> <p class="w3-left"><button class="w3-button w3-white w3-border" onclick="likeFunction( this)"><b><i class="fa fa-thumbs-up"></i> Thích</b></button></p> <p class="w3-right"><button class ="w3-button w3-black" onclick="myFunction('demo3')"><b>Trả lời </b> <span class="w3-tag w3-white">3</span></button> </p> <p class="w3-clear"></p> <!-- Ví dụ về trường nhận xét --> <div id="demo3" style="display:none"> <hr> <div class ="w3-row w3-margin-bottom"> <div class="w3-col l2 m3"> <img src="/w3images/girl_mountain.jpg" style="width:90px;"> </div> < div class="w3-col l10 m9"> <h4>Jane <span class="w3-opacity w3-medium">10 tháng 4 năm 2015, 7:22 tối</span></h4> <p>Đó là một buổi diễn tuyệt vời! Cảm ơn vì tất cả mọi thứ.</p> </div> </div> <div class="w3-row w3-margin-bottom"> <div class="w3-col l2 m3"> <img src="/w3images /boy.jpg" style="width:90px;"> </div> <div class="w3-col l10 m9"> <h4>John <span class="w3-opacity w3-medium">Ngày 8 tháng 4, 10:32 tối năm 2015</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.</p> </div> </div> <div class="w3-row w3-margin-bottom"> <div class="w3- col l2 m3"> <img src="/w3images/girl_hood.jpg" style="width:90px;"> </div> <div class="w3-col l10 m9"> <h4>Anja <span class= "w3-opacity w3-medium">9:12 tối ngày 7 tháng 4 năm 2015</span></h4> <p>Nóng lòng chờ đường băng bắt đầu!</p> </div> </div> < /div> </div> </div> <!-- KẾT THÚC MỤC BLOG --> </div> <!-- Menu Giới thiệu/Thông tin --> <div class="w3-col l4"> <!- - Giới thiệu về Thẻ --> <div class="w3-white w3-margin"> <img src="/w3images/avatar_girl2.jpg" alt="Jane" style="width:100%" class="w3-grayscale "> <div class="w3-container w3-black"> <h4>Tên tôi</h4> <p>Chỉ có tôi, 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-white w3-margin"> <div class=" w3-container w3-padding w3-black"> <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/avatar_smoke.jpg" alt="Image" class="w3-left w3-margin-right" style="width:50px"> <span class="w3-large">Denim </span> <br> <span>Sed mattis Nunc</span> </li> <li class="w3-padding-16"> <img src="/w3images/bandmember.jpg" alt="Image" class="w3-left w3-margin-right" style="width:50px"> <span class="w3-large">Áo len</span> <br> <span>Praes tinci sed</span> </ li> <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">Hội thảo</span> <br> <span>Ultricies mâu thuẫn</span> </li> <li class="w3-padding-16"> <img src="/ w3images/avatar_smoke.jpg" alt="Image" class="w3-left w3-margin-right w3-sepia" style="width:50px"> <span class="w3-large">Xu hướng</span> < br> <span>Lorem ipsum dimsum</span> </li> </ul> </div> <hr> <!-- Quảng cáo --> <div class="w3-white w3-margin"> <div class="w3-container w3-padding w3-black"> <h4>Quảng cáo</h4> </div> <div class="w3-container w3-white"> <div class="w3-container w3-display -container w3-light-grey w3-section" style="height:200px"> <span class="w3-display-middle">Quảng cáo của bạn tại đây</span> </div> </div> </div> <hr> <!-- Thẻ --> <div class="w3-white w3-margin"> <div class="w3-container w3-padding w3-black"> <h4>Thẻ</h4> </ div> <div class="w3-container w3-white"> <p> <span class="w3-tag w3-black w3-margin-bottom">Thời trang</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">Mũ</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">Áo len</span> <span class="w3-tag w3-light-grey w3-small w3- lề-bottom">Ý tưởng</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Ưu đãi</span> <span class="w3-tag w3-light- grey w3-small w3-margin-bottom">Phụ kiện</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">Quần jean</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom" >Xu hướng</span> </p> </div> </div> <hr> <!-- Cảm hứng --> <div class="w3-white w3-margin"> <div class="w3-container w3-padding w3-black"> <h4>Cảm hứng</h4> </div> <div class="w3-row-padding w3-white"> <div class="w3-col s6"> <p>< img src="/w3images/jeans.jpg" alt="Jeans" style="width:100%"></p> <p><img src="/w3images/team1.jpg" alt="Jeans" phong cách ="width:100%"></p> </div> <div class="w3-col s6"> <p><img src="/w3images/avatar_hat.jpg" alt="Đàn ông đội mũ" phong cách ="width:100%" class="w3-grayscale"></p> <p><img src="/w3images/team4.jpg" alt="Jeans" style="width:100%"></ p> </div> </div> </div> <hr> <div class="w3-white w3-margin"> <div class="w3-container w3-padding w3-black"> <h4>Theo dõi Tôi</h4> </div> <div class="w3-container w3-xlarge w3-padding"> <i class="fa fa-facebook-official w3-hover-opacity"></i> <i class ="fa fa-instagram w3-hover-opacity"></i> <i class="fa fa-snapchat w3-hover-opacity"></i> <i class="fa fa-pinterest-p w3- di chuột-opacity"></i> <i class="fa fa-twitter w3-hover-opacity"></i> <i class="fa fa-linkedin w3-hover-opacity"></i> < /div> </div> <hr> <!-- Đăng ký --> <div class="w3-white w3-margin"> <div class="w3-container w3-padding w3-black"> <h4> Đăng ký</h4> </div> <div class="w3-container w3-white"> <p>Nhập e-mail của bạn bên dưới và nhận thông báo về các bài đăng blog mới nhất.</p> <p><input class ="w3-input w3-border" type="text" placeholder="Nhập e-mail" style="width:100%"></p> <p><button type="button" onclick="document. getElementById('subscribe').style.display='block'" class="w3-button w3-block w3-red">Đăng ký</button></p> </div> </div> <!-- KẾT THÚC Menu Giới thiệu/Giới thiệu --> </div> <!-- KẾT THÚC LƯỚI --> </div> <!-- KẾT THÚC w3-content --> </div> <!-- Đăng ký Phương thức --> < div id="subscribe" class="w3-modal w3-animate-opacity"> <div class="w3-modal-content" style="padding:32px"> <div class="w3-container w3-white" > <i onclick="document.getElementById('subscribe').style.display='none'" class="fa fa-remove w3-transparent w3-button w3-xlarge w3-right"></i> <h2 class="w3-wide">ĐĂNG KÝ</h2> <p>Tham gia danh sách gửi thư của tôi để nhận thông tin cập nhật về các bài đăng blog mới nhất và những thứ khác.</p> <p><input class="w3-input w3-border " type="text" placeholder="Nhập e-mail"></p> <button type="button" class="w3-button w3-block w3-padding-large w3-red w3-margin-bottom" onclick ="document.getElementById('subscribe').style.display='none'">Đăng ký</button> </div> </div> </div> <!-- Footer --> <footer class=" w3-container w3-dark-grey" style="padding:32px"> <a href="#" class="w3-button w3-black w3-padding-large w3-margin-bottom"><i class=" fa fa-arrow-up w3-margin-right"></i>Lên đầu</a> <p>Được cung cấp bởi <a href="https://www.example.com.vn/w3css/default.asp" target="_blank">w3.css</a></p> </footer> <script> // Chuyển đổi giữa ẩn và hiển thị trả lời/nhận xét blog document.getElementById("myBtn").click(); hàm myFunction(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", ""); } } hàm likeFunction(x) { x.style.fontWeight = "in đậm"; x.innerHTML = " ✓ Đã thích"; } </script> </body> </html>