效果如图
其中HTML部分代码如下：
<!doctype html> <html lang="en"> <header> <meta charset="utf-8"/> <title>Html5 test website!</title> <link rel="stylesheet" href="main.css"> </header> <body> <div id="big_wrapper"> <header id="top_header"> <h1> Welcome to the new HTML5 web site!</h1> </header> <nav id="top_menu" > <ul> <li>Home</li> <li>Tutorials</li> <li>Podcast</li> </ul> </nav> <section id="main_section"> <article> <header> <hgroup> <h1>Title of Article 1!</h1> <h2>Subtitle for Article!</h2> </hgroup> </header> <p>This is the best article eva!</p> <footer> <p>-written by Joanna Qian-</p> </footer> </article> <article> <header> <hgroup> <h1>Title of Article 2!</h1> <h2>Subtitle for Article!</h2> </hgroup> </header> <p>This is the best article eva!</p> <footer> <p>-written by Joanna Qian-</p> </footer> </article> </section> <aside id="side_news"> <h4>News</h4> Bucky has a new dog! </aside> <footer id="the_footer"> Copyright thenewbostons 2012! </footer> </div> </body> </html>
其中CSS部分如下
*{ margin:0px; padding:0px; } header,section,footer,aside,nav,article,hgroup{ display:block; } h1{ font: bolid 20px Tahoma; } h2{ font: bolid 14px Tahoma; } body{ text-align:center; } #big_wrapper{ border:1px solid black; width:1000px; margin:20px auto; text-align:left; } #top_header{ background:yellow; border:1px solid blue; padding:20px; } #top_menu{ background:blue; color:white; } #top_menu li{ display:inline-block; list-style:none; padding:5px; font:bold 14px Tahoma; } #main_section{ float:left; width:660px; margin:30px; /*720px, 280px left */ } #side_news{ float:left; width:220px; margin:20px 0px; padding:30px; background:#66CCCC; } #the_footer{ clear:both; text-align:center; padding:20px; border-top:2px solid green; } article{ background:#FFFBCC; border: 1px solid red; padding:20px; margin-bottom:15px; } article footer{ text-align:right; }