仿android QQ app的移动端web布局心得

＃仿android QQ app的移动端web布局心得

##仿QQ布局，5个页面，考虑到要加特效，没想到用了整整一天。

＃＃整体布局，要做手指滑动切换两个页面 侧边栏页和主体页面效果，加父盒子，用浮动，侧边栏没有满页，用了padding-left。 设想滑动效果是由c3的transform属性配合过度来完成。

＃＃移动端 web宽高自适应。其中主页包括头部，主体内容，底部。头部，两头两个盒子宽高固定，中间自适应，有点击切换消息页面。主体比较多，下面另行分类。脚部用的列表＋浮动＋百分比。

＃＃最折腾人的中部布局: 分为消息(消息和电话两个页面，父级盒子包裹+浮动+百分比)，联系人和动态。

＃＃＃其中消息页下消息内布局用列表，电话页同消息页。

＃＃＃联系人页面是列表套列表，由于要考虑到js动态添加数据，增加，删除，改动信息，所以命名，我滴个天！命名还是很醉，太长！另外每个二级列表下也就是联系人的那个li也是浮动布局，手指滑动要做置顶，标记和删除操作，以现有学习的知识，考虑用c3中属性做。

＃＃＃最简单的就是最后介个动态页。复制粘贴加修改搞定。剩余的各大好看一点(有特效练习)的页面个人考虑全部分开写成小页面，点击可直接跳。

＃小结 整个页面除了头像图片之外，其余的主页面上图标基本全部为web字体，各尺寸均是目测。间距10，5，20，头像大小30，40(像素)，页面效果，源码，最后尽可能的在github公开(github刚接触，学习中)。希望能够一直做下去，实现基本功能。

＃＃问题(O_O)？

＃＃＃系统自带的导航条设置。命名。想到再改，太困。。。