如何优化老网站wordpress机械展示的？

以前老网站,wordpress机械展示,南京房产网站建设,长沙网址seo需求 要做一个仪表盘系统#xff0c;要求有#xff1a; ① 设计功能#xff08;包括布局、大小、排列#xff09; ② 预览功能 ③ 运行功能 布局选择 做编辑器#xff0c;肯定要先选择布局。 前端有几种常用布局。 静态布局 也叫文档布局。默认的网页形式…需求 要做一个仪表盘系统要求有 ① 设计功能包括布局、大小、排列         ② 预览功能         ③ 运行功能 布局选择 做编辑器肯定要先选择布局。 前端有几种常用布局。 静态布局 也叫文档布局。默认的网页形式是文档流的形式一个网页就像是一条条从左流向右的河流。在文档中有两种元素内联元素display:inline和块级元素display:block。内联元素默认从左到右流遇到阻碍或者宽度不够自动换行继续按照从左到右的方式布局。而块级元素则会独占一行按照从上往下的方式布局。内联元素的宽度和高度默认都被内容撑开。 这肯定不适合用来做编辑器。 浮动布局 浮动元素会脱离文档流并浮动到左侧或右侧。这时候其他的周围内容就会在这个被设置浮动 (float) 的元素周围环绕。 这种肯定也不行。因为元素只能向左向右浮动。并且周围元素会围绕浮动元素旋转并不会脱离文档流也就是无法自定义其位置。 定位布局 通过调整position这个CSS属性的值来实现absolute/relative/fixed/static(绝对/相对/固定/静态(默认))四个值。 static为静态布局遵循默认文档流。这没什么好说的。 absolute绝对定位元素会脱离文档流通过TBLR top,bottom,left,right 定位会选取最近的一个有定位设置的父级对象非static进行绝对定位如果没有设置定位属性的父级对象则将以body坐标原点进行定位。绝对定位的元素不会占有空间也不会影响别的元素。 relative相对定位对象不可层叠、不脱离文档流参考自身静态位置通过 TBLR定位。设置了TBLR之后元素位置会发生偏移但仍然占有原来的位置且不会影响别的元素而是覆盖在上方。相对定位与绝对定位的区别就是相对定位是只占有原来的空间而绝对定位不占有空间。 fixed固定定位顾名思义固定定位就是固定在一个位置不会随着页面滚动而改变位置的定位方式像常见的页面上的小广告或者右下角的返回页面顶部等等。 如果要做编辑器fixed只有单页了和static肯定不行。relative不脱离文档流也不行。那么只能以页面为定位的absolute绝对定位了。这么做有几个缺点 第一每个元素都需要精准的TBLR值。这是很麻烦的。甚至需要去计算。 第二拖拽放大缩小元素的时候会改变其自身的TBLR值。并且可能会盖到其他元素上面去。我们需要的效果是像果冻一样挤压其他元素。使其挪到后面或下面。 瀑布布局 视觉表现为参差不齐的多栏布局随着页面滚动条向下滚动这种布局还会不断加载数据块并附加至当前尾部。 瀑布流的实现方法决定了它的元素排序具体请看我这篇推文。 瀑布流布局的实现_AI3D_WebEngineer的博客-CSDN博客瀑布流布局视觉表现为参差不齐的多栏布局随着页面滚动条向下滚动这种布局还会不断加载数据块并附加至当前尾部​​ 瀑布流的实现方法决定了它的元素排序具体请看我这篇推文。https://blog.csdn.net/weixin_42274805/article/details/132981042 flex布局 弹性盒模型。也是纯CSS布局。具体可以看廖雪峰的Flex 布局教程语法篇 - 阮一峰的网络日志https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 但是做编辑器是不能选择flex布局的为什么请看下面Grid布局的介绍  Grid布局 网络布局目前唯一一种 CSS 二维布局。擅长将一个页面划分为几个主要区域以及定义这些区域的大小、位置、层次等关系。 与flex布局的区别flex 布局是一维布局Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局一行或者一列。Grid 布局是将容器划分成了“行”和“列”产生了一个个的网格我们可以将网格元素放在与这些行和列相关的位置上从而达到我们布局的目的。