简单学习Twitter网页布局的笔记

目录

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

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

单页布局

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

Twitter首页

结构大体如下:
仿Twitter的单页结构

上图中可以看到,页面由三个部分组成:页眉、页脚和中间的内容。使这三者填充整个浏览器页面即可。
我的网页:
我的微博应用首页,参照Twitter首页修改,效果还是挺简单的。

说明:
最有特点的就属网页中间内容的定位,把定位原点设在页面中心点处,把margin-top和margin-left设为宽度和长度一半的相反数,实现将内容的中心对齐。
页眉和页脚都用绝对距离,固定在相应位置。
网页大体结构HTML代码如下:
[html]

<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>