加载层页面

最新推荐文章于 2021-07-19 15:41:52 发布

懒惰的睿智

最新推荐文章于 2021-07-19 15:41:52 发布

阅读量613

点赞数

文章标签：加载层 html

本文链接：https://blog.csdn.net/weixin_44540195/article/details/92760792

版权

本文介绍了在项目中创建自定义加载层的需求，通过仿照南方航空的加载页面设计了一个正在加载的页面。内容包括HTML结构布局，如设置一个包含三个小div的大div，分别放置图片和文字提示信息。样式设计上，使用居中显示和绝对定位，以及通过修改div的大小和位置来达到理想效果。最后总结了HTML布局的基本原则：大盒子包含小盒子，根据需求设置样式和内容。

摘要由CSDN通过智能技术生成

在项目中，有的时候需要发送请求，在进行信息查询的时候，考虑到或因网络问题可能会出现页面无响应的情况下，需要长时间等待的情况，那便需要一个加载层，而使用插件开启开载层，样式少，没有想要的效果，刚好看到南航的加载层觉得挺好看的，就自己动手仿了一个正在加载层的页面。（该加载层的所用的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;这样他就可以居中显示了，绝对定位，上下左右设置为零，，背景色设置为