html5（二）

*{ 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 &copy 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 属性。

简单的网页结构出来了