这周一直在修改我写的新浪微博应用的网页布局，这东西挺难搞，我没用模板，每改动一个，就得把所有的网页都修改一遍，多亏网页比较少，要不得累死。PHP模板还没用过，之前看wordpress中将各个部分单独作为网页（header.php、footer.php等），直接包含这些页面就可以生成完整的网页，也用到类似wp_footer()的函数，添加内容（具体什么内容还没搞懂）。这种似乎接把网页结构定死了？我也不清楚是不是这样。

我不知道怎样用footer函数比较好：或者在主页中调用footer函数？或者像wp中包含footer.php文件？在这两者间摇摆不定。
这周粗略看了下Twitter的网页布局，得到不少启示，Twitter的布局挺简洁的，正是我喜欢的类型。照着Twitter的结构修改了我的网页，简单的处理花了好几个晚上，这效率。。
共有两种类型的布局：单页和多页。

单页布局

网页只有一个页面大小，登录窗口用个就是这个。
Twitter实际主页：

<p>
  <!-- screen-->
  
  <br /> [/html]<br /> CSS代码如下：<br /> [css]<br /> /* 网页布局 */<br /> #screen{<br /> height:100%;<br /> min-height:500px;<br /> }<br /> /* 背景颜色，字体颜色*/<br /> #header,.footer,#footer{<br /> color: #CCC;<br /> background-color: #000;<br /> font-size: 14px;<br /> line-height: 18px;<br /> z-index: 1000;<br /> }<br /> #header{<br /> position: fixed;<br /> width:100%;<br /> top: 0px;<br /> left: 0px;<br /> right: 0px;<br /> }<br /> #footer,.footer{<br /> bottom:30px;<br /> width:100%;<br /> text-align:center;<br /> margin:0;<br /> position:absolute;<br /> }<br /> /* 导航 */<br /> .global-nav{<br /> height:40px;<br /> padding-left:40px;<br /> width:900px;<br /> padding:0;<br /> margin:0 auto;<br /> }<br /> /* 单个页面 */<br /> .front-container{<br /> height:100%;<br /> position: absolute;<br /> left: 0px;<br /> top: 0px;<br /> right: 0px;<br /> bottom: 0px;<br /> min-height:500px;<br /> }<br /> [/css]<br /> 定位中间主要内容的CSS代码：<br /> [css]<br /> .front-card{<br /> top:50%;<br /> left:50%;<br /> position: absolute;<br /> height: 350px;<br /> width: 850px;<br /> margin-top: -175px;<br /> margin-right: 0px;<br /> margin-bottom: 0px;<br /> margin-left: -425px;<br /> }<br /> [/css]<br /> 按中心点定位。
</p>

<h1>
  多页布局
</h1>

<p>
  Twitter登录后的首页<br /> <figure style="width: 600px" class="wp-caption alignnone"><a href="http://ww1.sinaimg.cn/large/4afdac38jw1dtk0djsl6gj.jpg"><img title="Twitter首页" src="//ww1.sinaimg.cn/mw600/4afdac38jw1dtk0djsl6gj.jpg" alt="" width="600" height="427" /></a><figcaption class="wp-caption-text">Twitter登录后的首页</figcaption></figure><br /> 大致布局结构如下<br /> <figure style="width: 600px" class="wp-caption alignnone"><a href="//ww3.sinaimg.cn/large/4afdac38jw1dtjvtdaigtj.jpg"><img title="仿Twitter网页布局的多页结构" src="//ww3.sinaimg.cn/mw600/4afdac38jw1dtjvtdaigtj.jpg" alt="" width="600" height="442" /></a><figcaption class="wp-caption-text">仿Twitter网页布局的多页结构</figcaption></figure><br /> 页眉与单页结构相同，但随后不用front-container和是用page-container。page-container分成四个部分，top、footer、dashboard和main区域。其中dashboard是float：right，而main是float：right，成为两栏结构。<br /> Twitter的page中没有footer（Twitter的footer放在dashboard的一个module中），我加上footer时遇到个小问题，footer位置始终在dashboard的右边，只好在footer前面加上个空的有clear:both属性的div标签。具体原因我也不太清楚，这css布局我还没理解透彻。<br /> 我做的网页的布局效果<br /> <figure style="width: 600px" class="wp-caption alignnone"><a href="//ww2.sinaimg.cn/large/4afdac38jw1dtk0azw5gxj.jpg"><img title="我的微博应用首页" src="//ww2.sinaimg.cn/mw600/4afdac38jw1dtk0azw5gxj.jpg" alt="" width="600" height="354" /></a><figcaption class="wp-caption-text">我的微博应用首页，参照Twitter的多页结构</figcaption></figure><br /> 多页布局HTML代码<br /> [html]
</p>

<div id="screen">
  <div id="header">
    <div class="global-nav">
      <div class="site-title">
        紫苏远志的小屋
      </div>
    </div>
  </div>
  
  <p>
    <!-- header -->
  </p>
  
  <div id="page-container" class="wrapper">
    <div class="content-top">
    </div>
    
    <p>
      <!-- content-top -->
    </p>
    
    <div class="dashboard">
    </div>
    
    <div class="content-mian">
    </div>
    
    <p>
      <!-- content-mian -->
    </p>
    
    <div class="content-footer">
    </div>
    
    <p>
      <!-- content-footer --></div> 
      
      <p>
        <!-- page-container --></div> 
        
        <p>
          <!-- screen-->
          
          <br /> [/html]<br /> CSS代码，与单页布局通用的就直接省略了，只写下不同的部分。<br /> [css]<br /> /* 以上为未登录时*/<br /> #page-container,.pate-container{<br /> min-height:500px;<br /> }<br /> .wrapper,#wrapper{<br /> width:900px;<br /> margin:0 auto;<br /> padding-top: 55px;<br /> padding-right: 15px;<br /> padding-bottom: 14px;<br /> padding-left: 15px;<br /> }<br /> /* 主要内容 */<br /> .dashboard{<br /> float:left;<br /> width:340px;<br /> }<br /> .content-top,.content-over{<br /> width:100%:<br /> }<br /> .content-main,.content-right{<br /> float:right;<br /> width:550px;<br /> }<br /> .content-footer{<br /> margin-top:20px;<br /> }<br /> [/css]<br /> 一周的晚上都在做这个网页布局，我感觉做得挺费劲的，简单的布局我就力不从心，还是功力不深啊。css布局这玩意我还是玩不转，只能想别人学习下，直接使用人家的结构和代码。没有创意，就搞不出来好东西。
        </p>