*{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><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8"> <Metaname= "description"content= "This was an HTML5 example"> <Metaname= "keywords"content= "HTML5, CSS3, JavaScript"> <title>This text is the title of the document</title> <Linkhref=".. /css/mysheet.css "rel= "stylesheet"type= "Text/css" /></Head><Body> <DivID= "wrapper"> <HeaderID= "Main_header"> <H1>This is the main title of the website</H1> </Header> <navID= "Main_Menu"> <ul> <Li>Home</Li> <Li>Photos</Li> <Li>Videos</Li> <Li>Contact</Li> </ul> </nav> < SectionID= "Main_section"> <article> <Header> <Hgroup> <H1>Title of Post One</H1> <H2>Subtitle of the Post One</H2> </Hgroup> < Timedatetime= "2011-12-10"pubdate>Posted 12-10-2011</ Time> </Header>This is the text of my first post< Figure> <imgsrc=".. /images/qq20141204125827.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</H1> <H2>Subtitle of the Post</H2> </Hgroup> < Timedatetime= "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> <asideID= "Main_aside"> <blockquote>Article number one</blockquote> <blockquote>Article number</blockquote> </aside> <!--end of document body - <FooterID= "Main_footer">Copyright©2010-2011</Footer> </Div></Body></HTML>
The simple Web page structure came out.
HTML5 (b)