浅谈框架页与登录页的布局问题

作为一个小前端，不能离开的经典问题就是页面样式的调试，对于普通页面的样式当然大部分人都没问题，但是一遇到框架页，登录这样的有一点分量的页面，想要做的有水准，做的漂亮，代码还能简洁，其实还是需要有一个清晰地思路的。

当然，无论是登录页还是框架页，掌握了思路，知道它的难点和问题，其实所有的bug就能迎刃而解了。主要讲三点：

     一.登录页要注意的问题

     二.框架页要注意的问题

     三.登录页和框架页的code和思路有没有什么共通之处

首先来说一下登录页面，说到登录页面，大家有没有什么逻辑上的思路呢。我所遇到的登录，主要分为两种类型，一种是登录是水平垂直都居中的，然后加个背景，底部加个logo；另一种登录是类似于京东，蘑菇街这样的，分为上中下结构的，登录内容放在中间这一块，并在左侧加一个广告图片。
这两种登录里面验证的逻辑实在是不想多说，今天主要讲的是布局，那么重点其实是在前面一种。水平与垂直居中可以说成是一个点，窗口改变大小也可以说成是一个点。水平与垂直居中的思路是给中间的登录框设置宽高，然后让其绝对定位，上左都距50%，然后再用负的一半margin就可以了。窗口改变大小可能会有很多人不在意，他们觉得再刷新一下页面不是就好了吗，但是用户发现改变窗口奇丑无比的时候，内心绝对是拒绝的，然后就再也没有然后了。所以，$(window).resize(function(){});窗口改变大小的方法一定要写好。而我的思路是当越缩越小的时候，高度小于768就让页面的高度为768px,这样它就会出现滚动条，选择768的高度是因为1024*768是小屏需要兼容的。有人会问既然高度的极限考虑到了，为什么宽度的极限不考虑，我只能说没必要。

其次再来说一下框架页，也许每个公司的需求不一样，类似于后台管理系统的页面要求也不一样。但是我经历的项目，大部分都是一开始页面风格很漂亮，左右居中，各种宽高设置，但是一到最后客户确认的时候，全部都改成了一致的上左右这样的形式，有的当然会加一个tab栏，但是也有的公司是不需要加tab栏的，就直接像更改链接一样。总之，无论是哪一种方法都要保持页面的布局能够满屏，并且子页面如果高度超出屏幕就让它在右下角的那个位置滚动。我见过比较笨拙的方法是使用了iframe去做，其实前端性能优化是不建议使用iframe的，只会加重页面的负担。其他的就是自己手写，那就没有tab栏；如果是引用插件，打个比方，用ligurUI,就有tab栏。不论需求是什么，不论我们选择哪一种方法，同样是上面登录的问题，窗口改变的时候你的页面能不能也完美地显示。这里的框架页和登录有些许不同的是左右的宽高都是根据屏幕窗口的大小去改变的，所以也就要求我们去调整侧边栏和内容的高度和宽度，依照我的思维，刚开始的时候我是把左侧固定死宽度，然后右下内容的宽度就是屏幕的宽度减去左侧边栏的宽度减去间距，但是刷新的时候右边的内容总是跳下来又跳上出的，感觉不是很好，后面找出的原因是每次都去计算右边的宽度，但是刚开始没有计算的时候自然默认是100%，所以才会出现刚开始加载的时候右边高度不够被挤下来，加载完，计算出高度又把右边的内容提上去。

但是无论哪一个，都必须得注意要考虑到兼容性的问题，包括改变窗口的大小以及大小屏的样子,当然还有浏览器的兼容问题，这个主要是针对360的ie7内核，好的，就这样