HTML5设计基本网页-basic frameset - Joanna Qian

效果如图

其中HTML部分代码如下：

<!doctype html>
<html lang="en">
   <header>
      <meta charset="utf-8"/>
      <title>Html5 test website!</title>
      <link rel="stylesheet" href="main.css">
   </header>
 
   <body> 
     <div id="big_wrapper">
        <header id="top_header">
            <h1> Welcome to the new HTML5 web site!</h1>
        </header>
        <nav id="top_menu" >
          <ul>
            <li>Home</li>
            <li>Tutorials</li>
            <li>Podcast</li>
          </ul>
        </nav>     
     
       <section id="main_section">
         <article>
            <header>
                <hgroup>
                <h1>Title of Article 1!</h1>
                <h2>Subtitle for Article!</h2>
                </hgroup>
            </header>
                <p>This is the best article eva!</p>
            <footer>
                <p>-written by Joanna Qian-</p>
            </footer>
         </article>
         <article>
            <header>
                <hgroup>
                <h1>Title of Article 2!</h1>
                <h2>Subtitle for Article!</h2>
                </hgroup>
            </header>
                <p>This is the best article eva!</p>
            <footer>
                <p>-written by Joanna Qian-</p>
            </footer>
         </article>
      </section>    
      
     <aside id="side_news">
        <h4>News</h4>
        Bucky has a new dog!
     </aside>
     
     <footer id="the_footer">
        Copyright thenewbostons 2012!
     </footer>   
    </div> 
   </body>
</html>

其中CSS部分如下

*{
    margin:0px;
    padding:0px;
}
header,section,footer,aside,nav,article,hgroup{
    display:block;
}

h1{
    font: bolid 20px Tahoma;
}
h2{
    font: bolid 14px Tahoma;
}
body{
    text-align:center;
}

#big_wrapper{
    border:1px solid black;
    width:1000px;
    margin:20px auto;
    text-align:left;
}
#top_header{
    background:yellow;
    border:1px solid blue;
    padding:20px;
}
#top_menu{
    background:blue;
    color:white;
}
#top_menu li{
    display:inline-block;
    list-style:none;
    padding:5px;
    font:bold 14px Tahoma;
}
#main_section{
    float:left;
    width:660px;
    margin:30px;  /*720px, 280px left */
}
#side_news{
    float:left;
    width:220px;
    margin:20px 0px;
    padding:30px;
    background:#66CCCC;
}
#the_footer{
    clear:both;
    text-align:center;
    padding:20px;
    border-top:2px solid green;
}
article{
    background:#FFFBCC;
    border: 1px solid red;
    padding:20px;
    margin-bottom:15px;
}
article footer{
    text-align:right;
}

posted on 2012-08-28 05:07 Joanna Qian 阅读(748) 评论(0) 收藏举报

刷新页面返回顶部