微博首页的设计

以下是我近期所完成的设计效果：

思路：该网页分三层（z-index用来分层）

    z-index:0 最底层：背景天蓝层

    z-index:1 中间层：中间显示微博内容层

    z-index:2 最上层：快速注册层（位置固定（position：fixed））

1、最底层：

    分为上中下三部分：

    （1）上：背景为一张图片

    （2）中：背景为天蓝色（通过jQuery动态设置height值）

    （3）下：背景为一张图片

2、中间层（内容显示层）

    背景为一张图片（该图片分为三栏（左菜单栏底层、中内容白色底层、右新手指引底层））

    菜单栏用ul设计

    内容栏暂时设计为一张图片

    新手栏：略

    *排版

    设置为float：left

3、最上层（用fixed来固定）

4、右上角“登录”

    

    （1）透明部分

        z-index:4 该部分包含整个文档内容（文档高度通过jQuery来获取文档高度$（document）.height）

    (2)登录注册部分（ z-index:5）

       1） 该部分的可拖动是通过easyui 的draggable实现的

       2） 登录注册的切换是通过div的切换显示实现的

       3） 注册部分的验证码是通过spring mvc 的controller来返回p_w_picpath的

    以上内容只是一些大体思路，具体的设计和实现与新浪微博大体上一致。有任何疑问或改进建议可向我提出。

    PS:该设计以新浪微博为模板，只是用于学习，并无商业盗版用意。

转载于:https://blog.51cto.com/archou/1535011