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

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

基础知识

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

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

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

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

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

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

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

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

难定位元素的控制方法

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

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

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

所以选择器的写法是.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的原因竟然是一行注释….