HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5 Layout</title> <link href="styles.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> </head> <body> <div id="prefix_wrapper"> <header id="prefix_header"> <h1>Header</h1> </header> <nav id="prefix_mainNav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">About Me</a></li> </ul> </nav> <div id="prefix_main"> <section> <article class="prefix_mainArticle"> <header> <hgroup> <h2>Article 1</h2> <h3>Summary 1</h3> </hgroup> </header> <p>Content 1</p> <footer>Author 1</footer> </article> <article class="prefix_mainArticle"> <header> <hgroup> <h2>Article 2</h2> <h3>Summary 2</h3> </hgroup> </header> <p>Content 2</p> <footer>Author 2</footer> </article> </section><!--end section--> <aside> <h4>Hot News</h4> <p>Hot News Today</p> </aside> <div class="clear"></div> </div><!--end #prefix_main--> <footer id="prefix_footer"> <p>Copyright 2011. All rights reserved.</p> </footer> </div><!--end #prefix_wrapper--> </body> </html>
Css:
@charset "utf-8";
/* CSS Document */
/*Reset Css*/
body,html,div,blockquote,img,label,p,h1,h2,h3,h4,h5,h6,pre,ul,ol,li,dl,dt,dd,form,a,fieldset,th {margin:0;padding:0;border:0;outline:none}
a{text-decoration:none}
h1,h2,h3,h4,h5,h6{font-size:14px}
body
{
font-family: Helvetica, Tahoma, Arial;
line-height:1.4;
font-size:12px;
}
ul,ol{list-style:none}
img{border:none}
a img {border:none}
header,article,footer,section,aside{display:block}
.clear{clear:both;
height:0;
width:100%;
margin:0;
padding:0;
line-height:0;
overflow: hidden;
font-size:0px;
}
/*End Reset Css*/
/*Dinh dang bo cuc*/
#prefix_wrapper{
width:960px;
min-height:1000px;
background-color:#CCC;
margin-left:auto;
margin-right:auto;
display:block;
}
#prefix_header{
width:960px;
height:100px;
background-color:#06F;
display:block;
}
#prefix_mainNav{
width:960px;
height:50px;
background-color:#F90;
display:block;
}
#prefix_main{
width:960px;
min-height:800px;
background-color:#3C3;
display:block;
}
#prefix_footer{
width:960px;
height:200px;
background-color:#933;
display:block;
}
/*End Dinh dang bo cuc*/
/*prefix_header*/
#prefix_header{
text-align:center;
line-height:100px;
font-size:36px;
}
/*end prefix_header*/
/*prefix_mainNav*/
#prefix_mainNav ul li{
float:left;
}
#prefix_mainNav ul li a:link, #prefix_mainNav ul li a:visited{
display:block;
width:100px;
height:50px;
background-color:#0C9;
color:#FFF;
font-weight:bold;
text-align:center;
line-height:50px;
}
#prefix_mainNav ul li a:hover{
background-color:#FFF;
color:#009;
}
/*end prefix_mainNav*/
#prefix_main section{
width:660px;
min-height:800px;
background-color:#F6F;
float:left;
}
#prefix_main aside{
width:300px;
min-height:800px;
background-color:#69C;
float:left;
}
.prefix_mainArticle{
display:block;
width:600px;
height:300px;
background-color:#0C0;
margin-left:30px;
margin-top:30px;
}
.prefix_mainArticle header{
width:600px;
height:40px;
background-color:#F93;
}
.prefix_mainArticle p{
width:600px;
height:200px;
background-color:#06C;
}
.prefix_mainArticle footer{
width:600px;
height:60px;
background-color:#939;
}
/*prefix_main*/
/*end prefix_main*/
/*prefix_footer*/
/*end prefix_footer*/
Kết quả:
Thẻ <section>: tạo một vùng trong document như chapter, header, footer hay bất kỳ vùng nào của document.Nó giống như thẻ DIV vậy.
Thẻ <article>: Định nghĩa một bài báo hay nội dung chính trên một trang.
Thẻ <section> và thẻ <article> có thể chứa các header (tiêu đề), các footer (chân trang), hoặc bất kỳ các thành phần nào khác cần thiết để hoàn thành phần này.
Thẻ <aside>: Dùng đặt nội dung riêng từ nội dung mà nó được đặt bên trong. Nội dung riêng này nên liên quan tới nội dung được bao quanh. Hãy sử dụng thẻ này khi bạn muốn tạo nội dung bổ sung mà không còn chỗ nào để thêm vào bài viết
<p>My family and I visited Euro Disney last year.</p> <aside> <h4>Disney in France</h4> <p>Besides Euro Disney, there is a Disneyland in California.</p> </aside>
a
Không có nhận xét nào:
Đăng nhận xét