Sublime Text
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> body{ margin:0px; font-family:Arial; } #header{ background-color:#39e4c2; border:1px solid #39e4c2; padding:20px; text-align:center; } #header > div:nth-child(1){ font-size:30px; margin-bottom:10px; } #menu ul{ background-color:black; padding:0px; margin:0px; } #menu ul::after{ display:block; content:""; clear:both; } #menu ul li{ float:left; list-style-type:none; } #menu ul li a{ display:inline-block; text-decoration:none; padding:12px 20px; color:white; } #menu ul li a:hover{ background-color:#ddd; color:black; } #main::after{ display:block; content:""; clear:both; } #main #side{ box-sizing:border-box; padding:10px; float:left; width:30%; } #main #side img{ width:100%; } #main #content{ box-sizing:border-box; padding:10px; float:left; width:70%; } #main #content p:last-child{ text-align:right; } #footer{ background-color:#ddd; padding:15px; text-align:center; } </style> </head> <body> <div id="header"> <div>WEB CƠ BẢN</div> <div>(giới thiệu sơ qua trang web)</div> </div> <div id="menu"> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> </ul> </div> <div id="main"> <div id="side"> <p>Thông tin tác giả</p> <p>- Họ tên: . . . . . .</p> <p>- Ngày sinh: . . . . . .</p> <p>- Giới tính: . . . . . .</p> <p>- Địa chỉ: . . . . . .</p> <p><img src="../image/hugo2.jpg"></p> </div> <div id="content"> <h2>Tiêu đề bài viết</h2> <p>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .</p> <p>Ngày đăng: 02/03/2019</p> </div> </div> <div id="footer">Thông tin bản quyền</div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> body{ margin:0px; font-family:Arial; } #header{ background-color:#39e4c2; border:1px solid #39e4c2; padding:20px; text-align:center; } #header > div:nth-child(1){ font-size:30px; margin-bottom:10px; } #menu ul{ background-color:black; padding:0px; margin:0px; } #menu ul::after{ display:block; content:""; clear:both; } #menu ul li{ float:left; list-style-type:none; } #menu ul li a{ display:inline-block; text-decoration:none; padding:12px 20px; color:white; } #menu ul li a:hover{ background-color:#ddd; color:black; } #main::after{ display:block; content:""; clear:both; } #main #side{ box-sizing:border-box; padding:10px; float:left; width:30%; } #main #side img{ width:100%; } #main #content{ box-sizing:border-box; padding:10px; float:left; width:70%; } #main #content p:last-child{ text-align:right; } #footer{ background-color:#ddd; padding:15px; text-align:center; } </style> </head> <body> <div id="header"> <div>WEB CƠ BẢN</div> <div>(giới thiệu sơ qua trang web)</div> </div> <div id="menu"> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> </ul> </div> <div id="main"> <div id="side"> <p>Thông tin tác giả</p> <p>- Họ tên: . . . . . .</p> <p>- Ngày sinh: . . . . . .</p> <p>- Giới tính: . . . . . .</p> <p>- Địa chỉ: . . . . . .</p> <p><img src="../image/hugo2.jpg"></p> </div> <div id="content"> <h2>Tiêu đề bài viết</h2> <p>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .</p> <p>Ngày đăng: 02/03/2019</p> </div> </div> <div id="footer">Thông tin bản quyền</div> </body> </html>