*{ 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:; -moz-box-flex:;}
#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:; -moz-box-flex:; 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 属性。
简单的网页结构出来了