在项目中，有的时候需要发送请求，在进行信息查询的时候，考虑到或因网络问题可能会出现页面无响应的情况下，需要长时间等待的情况，那便需要一个加载层，而使用插件开启开载层，样式少，没有想要的效果，刚好看到南航的加载层觉得挺好看的，就自己动手仿了一个正在加载层的页面。（该加载层的所用的img都是在南方航空官网上拷下来的。）
先看看效果图吧：
Html部分如下
在html中的页面部局很简单，设置一个大的div用于包括三个小div的大盒子，在三个小div里分别放置对应的内容或图片。
三个div的第一个div里放置a标签，a标签里放img标签，并设置对应的样式
在第二个div里再放置三个小的div，里面的div，
第一个div放置img标签，img标签里放航空飞机图
第二个小的div，在img中放置小飞机的动态加载gif图。呈现正在加载的视觉效果。
第三个小的div里放置p标签，p标签设置文字正在查询中，请稍等的文字提示信息。
其对应的样式如下
最外围.jz-box由于窗口是固定那设置其显示的窗口的高度宽度，需要让其居中显示设置将margin：auto;这样他就可以居中显示了，绝对定位，上下左右设置为零，，背景色设置为白色：也可以设置为margin：0 auto;（是为了让DIV在浏览器中水平居中。布局居中、水平居中，均加入margin:0 auto即可。）
三个小div分别设置样式，在jx-box-t里设置南航的logo图片，放置位置，为了调整她所在的位置看起来更好看。（通过windows自带的3D画图功能，测出她的距离对应的距离进行设置。）再给她设置对应的参数。下面的各种样式设置同理。
总结：
Html布局大的div里放小的div，大盒子里放小盒子。小盒子里放置我们所需要的内容：放置一些标签或者元素。再设置对应的样式。Html中的所用的大盒子里放小盒子，小盒子根据所要设置样式，或在里面添加再添加div。根据需要设置她的样式，大小，所在的位置，html设置很灵活。可自由发挥
相关文章：