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>

简单的网页结构出来了

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。