HTML5设计基本网页-basic frameset

最新推荐文章于 2025-05-16 15:16:58 发布

转载最新推荐文章于 2025-05-16 15:16:58 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/JoannaQ/archive/2012/08/28/2659481.html

本文详细介绍了一个使用HTML5和CSS进行网页布局的实际案例，包括header、section、footer等元素的应用，以及如何通过CSS实现美观的页面样式。

效果如图

其中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;
}

转载于:https://www.cnblogs.com/JoannaQ/archive/2012/08/28/2659481.html