HTML5设计自适应网页-flexible page

效果如图，页面可以自适应browser大小，但aside大小不变

其中HTML5代码如下：

<!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>     
     
       <div id="new_div">      <!--for flexible  -->
       
       <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>
     
     </div>    <!--for flexible  -->
     
     <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{
    width:100%;           /*importance for flexible*/
    display:-webkit-box;  /*flexible box*/
    -webkit-box-pack: center;
    -moz-box-pack: center;
}

#big_wrapper{
    max-width:1000px;
    margin:20px 0px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-flex:1;     /*1 flexible 0 fixed*/
}
#top_header{
    background:yellow;
    border:1px solid black;
    padding:20px;
}
#top_menu{
    background:blue;
    color:white;
    border:red;
}
#top_menu li{
    display:inline-block;
    list-style:none;
    padding:5px;
    font:bold 14px Tahoma;
}
#new_div{
    display:-webkit-box;
    -webkit-box-orient:horizontal;
}
#main_section{
    border:1px solid blue;
    -webkit-box-flex:1;   /*1 flexible 0 fixed*/
    margin:20px;
    padding:20px;
}
#side_news{
    border:1px solid red;
    width:220px;          /*fixed*/
    margin:20px 0px;
    padding:30px;
    background:#66CCCC;
}
#the_footer{
    text-align:center;  /*no need to set clear*/
    padding:20px;
    border-top:2px solid green;
}
article{
    background:#FFFBCC;
    border: 1px solid red;
    padding:20px;
    margin-bottom:15px;
}
article footer{
    text-align:right;
}

缺点：只有chrome支持，firefox，ie不支持，正想办法解决中。。。

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

HTML5设计自适应网页-flexible page

猜你喜欢