WebPlus网站群平台往期bug整理+零碎知识

整理一下最近在工作中遇到的一些问题和解决办法。

基础知识

下方示意图可以囊括大部分站群主页的结构。

QQ图片20200515145643 (2)

头图需要考虑加载速度,需要默认头图时请使用群文件的qluheader.zip,注意考虑加载速度,尽量不要使用200k以上的图片,如果需要请进行压缩。压缩图片的方式:

  1. PS 另存为jpg,选择画质时可以预览大小,但压缩很厉害时画质损失严重
  2. https://tinyjpg.com/ 上传的图片最大为5M,可以在画质损失基本看不出来的情况下压缩大小,压缩程度有限
  3. 把图片尺寸改小点,画图就行,重新调整大小

全屏头图参考尺寸1920×700 留白头图参考尺寸1200×500,尺寸仅供参考并不固定

主体调宽的做法与盒模型原理

遇到主体调宽需求时,实质上是调整页面的有效区域范围。一般的范围是1000px~1400px(1000px那种的已经算很小了,旧板式一般才会这么窄),对应的CSS在成熟的模板里都有设置,修改相关属性值即可。首先调整父元素的大小为需求大小,此时子元素由于外层变宽将会偏离,考虑好子元素的布局方式,简单试试应该要加多宽,反复调试,最终成型。当子元素显示错行,说明子元素的宽度之和超过了父元素,此时检查全部子元素的左右内外边距之和+内容宽度是否超过父级元素长度,将过长的部分改短。

QQ图片20200515145651 (2)

https://www.runoob.com/htmldom/htmldom-tutorial.html
拓展阅读:HTML页面的DOM树 有助于理解子级元素和父级元素

小提示:在遇到修改header,footer的结构需求时,需要同时将一二三级页面都修改,因为HTML不如CSS那样通用,改CSS可以做到三个页面都适用,但牵扯到HTML或者站群设置的修改,记得把一二三级页面都改掉

难定位元素的控制方法

这里使用到了后代选择器,这个选择器在网站组讲课时没有讲到,给大家科普一下。后代选择器用于选取某元素的后代元素,当需要修改一个难以添加class的元素时,可以在它的父级元素添加class后,通过后代选择器一层一层的找到要修改的元素。

QQ图片20200515150022

这里会发现要显示的东西在窗口内容处生成,在修改时无法定位到这个位置,所以我在窗口99的div加了一个class“sjgd”,在审查中定位到修改div,

QQ图片20200515150025

可以发现他的路径是这样:

QQ图片20200515150027

所以选择器的写法是.sjgd div div .focus-pagination

如何生成静态页面、加入紧急队列

用于解决站群预览显示为新页面而使用qlu域名访问显示旧页面的问题。简单来讲就是部署的网站没有及时更新。可以提高该网站生成的优先级从而解决此问题。

官方教程:http://www.sudytech.com/_s80/2016/1108/c1238a22705/page.psp

排版

当需要设置标题居中,或者靠左靠右显示时,不能使用相对定位,绝对定位更不可以,一个潜在问题就是这样会导致文档流混乱,在复杂的div结构中使用定位可能会出现后期维护难处理的显示bug。定位适用于一些小点缀元素或者小按钮,比如轮播图切换按钮,有一些特殊的吸顶导航栏也会需要,目前咱还没遇到过这么高级的模板,但是标题不适用。另外非常不建议使用空格进行对齐,这种做法相当不professional,而且以后如果大家接触了要求手机端也会正常显示的模板的话,空格这种根本无法做到在多端下对齐。正常做法是在块级元素的CSS中设置text-align: center/left/right,强调块级元素,因为诸如span这种行内元素其宽度是等于内容宽度+padding(L,R)的,所以text-align会无效,但是h1,h2,p这种就可以,其宽度默认是继承父级元素的宽度的100%,也就是撑满整一行。如果是行内元素进行居中,先加一条display: block;就可以将行内元素转化为块级元素。

模块设置拖动无效的bug的解决方法

模块设置拖不动的时候,一般是模板内引入了某个奇怪的js,表现为鼠标浮动到模块上不显示操作框,拖动无法执行。此时开检查会报这种错误:

解决方法是使用ctrl+f搜索script,可以找到全部的script标签,尝试删掉一些,几次尝试之后就可以找出造成问题的script标签。这个问题在环境学院更换模板和机械学院更换模板时均出现过,曾经我以为是错误的引入的jQuery,但是环境学院这个模板造成此bug的原因竟然是一行注释….

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2018-2020 Shawn Zhou
  • Powered by Hexo Theme Ayer
  • PV: UV:

感谢打赏~

支付宝
微信