*{ margin:0px; padding:0px;} h1{ font:bold 20px verdana,sans-serif;} h1{ font:bold 14px verdana,sans-serif;} header,section,footer,aside,nav,article,figure,figcaption,hgroup{ display:block;} body{ text-align:center;} #wrapper{ width:960px; margin:15px auto; text-align:left; } #main_header{ background:#FFFBB9; border:1px solid #999999; padding:20px;} #main_menu{ background:#ccccc; padding:5px 15px;} #main_menu li{ display:inline-block; list-style:none; padding:5px; font:bold 14jpx verdana,sans-serif;} #main_section{ float:left; width:660px; margin:20px;} #main_aside{ float:left; width:220px; margin:20px 0px; padding:20px; background:#cccccc;} #main_footer{ clear:both; text-align:center; padding:20px; border-top:2px solid #999999;}
article{ background:#fffbcc; border:1px solid #999999; padding:20px; margin-bottom:15px;} article footer{ text-align:right;} time{color:#999999;} figcaption{ font:italic 14px verdana,sans-serif;}
/* p:nth-child(odd) { background:#999999; } p:nth-child(even) { background:#CCCCCC; } p:nth-child(3) { background:#999999; } :not(p) { background:#990000; }*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="This is an HTML5 example"> <meta name="keywords" content="HTML5, CSS3, JavaScript"> <title>This text is the title of the document</title> <link href="../CSS/mysheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <header id="main_header"> <h1>This is the main title of the website</h1> </header> <nav id="main_menu"> <ul> <li>home</li> <li>photos</li> <li>videos</li> <li>contact</li> </ul> </nav> <section id="main_section"> <article> <header> <hgroup> <h1>Title of post One</h1> <h2>subtitle of the post One</h2> </hgroup> <time datetime="2011-12-10" pubdate>posted 12-10-2011</time> </header> This is the text of my first post <figure> <img src="../Images/QQ截图20141204125827.png" /> <figcaption> this is the image of the first post </figcaption> </figure> <footer> <p>comments (0)</p> </footer> </article> <article> <header> <hgroup> <h1>Title of post Two</h1> <h2>subtitle of the post Two</h2> </hgroup> <time datetime="2011-12-15" pubdate>posted 12-15-2011</time> </header> This is the text of my second post <footer> <p>comments (0)</p> </footer> </article> </section> <aside id="main_aside"> <blockquote>Article number one</blockquote> <blockquote>Article number two</blockquote> </aside> <!-- 文档正文结尾--> <footer id="main_footer"> Copyright © 2010-2011 </footer> </div> </body> </html>
/*弹性框模型*/ *{ margin:0px; padding:0px;} h1{ font:bold 20px verdana,sans-serif;} h1{ font:bold 14px verdana,sans-serif;} header,section,footer,aside,nav,article,figure,figcaption,hgroup{ display:block;} body{ width:100%; display:-moz-box; display:-webkit-box; -moz-box-pack:center;-webkit-box-pack:center;} #wrapper{ width:960px; margin:15px auto; display:-moz-box; display:-webkit-box; -moz-box-orient:vertical;-webkit-box-orient:vertical; -moz-box-flex:1; -moz-box-flex:1;} #main_header{ background:#FFFBB9; border:1px solid #999999; padding:20px;} #main_menu{ background:#ccccc; padding:5px 15px;} #main_menu li{ display:inline-block; list-style:none; padding:5px; font:bold 14jpx verdana,sans-serif;} #container{ display:-moz-box; display:-webkit-box; -moz-box-orient:horizontal;-webkit-box-orient:horizontal;} #main_section{ -moz-box-flex:1; -moz-box-flex:1; margin:20px;} #main_aside{ width:220px; margin:20px 0px; padding:20px; background:#cccccc;} #main_footer{ clear:both; text-align:center; padding:20px; border-top:2px solid #999999;} article{ background:#fffbcc; border:1px solid #999999; padding:20px; margin-bottom:15px;} article footer{ text-align:right;} time{color:#999999;} figcaption{ font:italic 14px verdana,sans-serif;}
目前没有浏览器支持 box-flex 属性。
Firefox 支持替代的 -moz-box-flex 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。
简单的网页结构出来了