Write with Notepad ++
<!DOCTYPE html>
<html lang="en">
<head>
<title>Trần Đức Sơn</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>body { background-image: url('img/bg.png'); color: #000305; font-size: 87.5%; font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 1.429; margin: 0; padding: 0; text-align: left; } .body { clear: both; margin: 0 auto; width: 70%; } h2 {font-size: 1.571em} h3 {font-size: 1.429em} h4 {font-size: 1.286em} h5 {font-size: 1.143em} h6 {font-size: 1em} h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.1; margin-bottom: .8em; } a { outline: 0; } a img { border: 0px; text-decoration: none; } a:link, a:visited { color: #CF5C3F; padding: 0 1px; text-decoration: none; } a:hover, a:active { background-color: #CF5C3F; color: #fff; text-decoration: none; } .mainHeader nav { background: #666; font-size: 1.143em; height: 40px; line-height: 30px; margin: 0 auto 30px auto; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .mainHeader nav ul { list-style: none; margin: 0 auto; } .mainHeader nav ul li { float: left; display: inline; } .mainHeader nav a:link, .mainHeader nav a:visited { color: #fff; display: inline-block; height: 30px; padding: 5px 23px; text-decoration: none; } .mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited { background: #CF5C3F; color: #fff; text-shadow: none !important; } .mainHeader nav li a { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .mainHeader img { width: 30%; height: auto; margin: 3% 0; } .mainContent { overflow: hidden; line-height: 25px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .topcontent { background-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 3% 5%; margin-bottom: 3%; } .bottomcontent { background-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 3% 5%; } .content { width: 68%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .post-info { font-style: italic; color: #999; font-size: 85%; } .top-sidebar { width: 24%; float: left; margin-left: 2%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; padding: 2% 3%; margin-bottom: 2%; } .middle-sidebar { width: 24%; float: left; margin-left: 2%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; padding: 2% 3%; margin-bottom: 2%; } .bottom-sidebar { width: 24%; float: left; margin-left: 2%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; padding: 2% 3%; } .mainFooter { width: 100%; float: left; margin-top: 2%; margin-bottom: 2%; padding-left: 0; background-color: #666; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #FFF; } .mainFooter p { width: 91%; margin: 2% auto; } @media only screen and (min-width : 150px) and (max-width : 780px) { .body { clear: both; margin: 0 auto; width: 90%; font-size: 90%; } .mainHeader nav { background: #666; font-size: 1.143em; height: 160px; line-height: 30px; margin-bottom: 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .mainHeader nav ul { list-style: none; margin: 0 auto; padding-left: 0; } .mainHeader nav li { margin-left: 0 auto; width: 100%; } .mainHeader nav a:link, .mainHeader nav a:visited { color: #FFF; display: block; height: 30px; padding: 5px 0; text-decoration: none; } .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited { background: #CF5C3F; color: #fff; text-shadow: none !important; } .mainHeader nav li a { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .mainHeader img { width: 100%; height: auto; margin-bottom: 3%; } .mainContent { overflow: hidden; line-height: 25px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-top: 4%; margin-bottom: 2%; } .topcontent { background-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 2% 5%; margin-bottom: 4%; } .bottomcontent { background-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 2% 5%; } .content { width: 100%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .post-info { display: none; } .top-sidebar { width: 86%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; margin-top: 4%; margin-left: 0; padding: 0 7%; margin-bottom: 0; } .top-sidebar p { width: 90%; } .middle-sidebar { width: 86%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; margin-top: 4%; margin-left: 0; padding: 0 7%; margin-bottom: 0; } .middle-sidebar p { width: 90%; } .bottom-sidebar { width: 86%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; margin-top: 4%; margin-left: 0%; padding: 0 7%; margin-bottom: 1%; } .bottom-sidebar p { width: 90%; } .mainFooter { width: 100%; float: left; margin: 2% 0; padding-left: 0; background-color: #666; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #FFF; } .mainFooter p { width: 86%; margin: 2% auto; } }</style>
</head>
<body class="body">
<header class="mainHeader">
<img src="img/logo.gif">
<nav><ul>
<li class="active"><a href="#">Trang chủ</a></li>
<li><a href="#">Thông tin</a></li>
<li><a href="#">Liên hệ</a></li>
</ul></nav>
</header>
<div class="mainContent">
<div class="content"> <article class="topcontent"> <header>
<h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">Hello, have a nice day !</a></h2>
</header>
<footer>
<p class="post-info">Bài đăng được đang vào 0:00 1/1/1991 by <span style="color:red">Trân Đức Sơn</span></p>
</footer>
<content>
<p>Sinh ra trong một gia tộc hùng mạnh giàu có nổi tiếng trong thế giới tu tiên, đời đời điều có anh hùng quật khởi, Huy Tân lại là một hài tử mười tuổi quái thai phàm nhân không có linh căn. Sau này gia tộc bị kẻ thù hãm hại, cả nhà phải chạy trối chết.
Làm sao một phàm nhân cực kỳ bình thường không có chí bảo nghịch thiên như Hàn Lập, Lâm Hiên, Vương Lâm, Tần Vũ(Khương Lan tháp). Không có linh hồn sư phụ như Lâm Lôi, Tiêu Viêm. Không trọng sinh, không linh căn mà chỉ có dòng máu Lạc Hồng của Thần Long-Lạc Long Quân chảy trong người.
Làm sao một phàm nhân Việt tộc vượt qua mọi thử thách từng bước một chinh phục thế giới?</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
</content>
</article>
<article class="bottomcontent"> <header>
<h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">Say Hello</a></h2>
</header>
<footer>
<p class="post-info">Bài đăng được đang vào 0:00 1/1/1990 by <span style="color:red">Trân Đức Sơn</span></p>
</footer>
<content>
<p>Sinh ra trong một gia tộc hùng mạnh giàu có nổi tiếng trong thế giới tu tiên, đời đời điều có anh hùng quật khởi, Huy Tân lại là một hài tử mười tuổi quái thai phàm nhân không có linh căn. Sau này gia tộc bị kẻ thù hãm hại, cả nhà phải chạy trối chết.
Làm sao một phàm nhân cực kỳ bình thường không có chí bảo nghịch thiên như Hàn Lập, Lâm Hiên, Vương Lâm, Tần Vũ(Khương Lan tháp). Không có linh hồn sư phụ như Lâm Lôi, Tiêu Viêm. Không trọng sinh, không linh căn mà chỉ có dòng máu Lạc Hồng của Thần Long-Lạc Long Quân chảy trong người.
Làm sao một phàm nhân Việt tộc vượt qua mọi thử thách từng bước một chinh phục thế giới?</p>
</content>
</article>
</div>
<aside class="top-sidebar">
<article>
<h2>Sidebar</h2>
<p>Cái này để menu hay là quảng cáo hay là cái gì đó các kiểu bla bla Cái này để menu hay là quảng cáo hay là cái gì đó các kiểu bla bla</p>
</article>
</aside>
<aside class="middle-sidebar">
<article>
<h2>Sidebar 2</h2>
<p>Cái này để menu hay là quảng cáo hay là cái gì đó các kiểu bla bla Cái này để menu hay là quảng cáo hay là cái gì đó các kiểu bla bla</p>
</article>
</aside>
<aside class="bottom-sidebar">
<article>
<h2>Sidebar 3</h2>
<p>Cái này để menu hay là quảng cáo hay là cái gì đó các kiểu bla bla Cái này để menu hay là quảng cáo hay là cái gì đó các kiểu bla bla</p>
</article>
</aside> </div>
<footer class="mainFooter">
<p>Copyright © 2013</p>
</footer>
</body>
</html>
0 nhận xét