hi all,招聘官网项目告一段落了,下面对这对时间的开发做下总结。
一、整站的特点就是图片量巨大,所以对图片进行了大量的压缩合并和文件规整,并且多处使用了二倍图及对Retina屏做了相应的处理。
例:
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .ywj-logo { background-size: 138px 89px; background-image: url(./images/[email protected]?v),none; } .ywj-icon-share { background-image: url(./images/[email protected]); } }
二、整站的列表都是两端对齐排列。
例:
<ul class="CV"> <li class="CW"><a href="./school.html#schoolpage1" class="CY"><i class="CX"></i>技术</a></li> <li class="CW"><a href="./school.html#schoolpage2" class="CY"><i class="CX"></i>设计</a></li> <span class="BI"></span> </ul>
.CV { text-align: justify; line-height: 0; width: 1220px; margin: 0 auto; } .CW { display: inline-block; vertical-align: top; width: 123px; height: 123px; border-radius: 50%; background-image: -webkit-linear-gradient(top,#ed4621,#fa6a47); background-image: linear-gradient(to bottom,#fa6a47,#ed4621); } .BI { display: inline-block; width: 100%; height: 0; overflow: hidden; }
好处就是简单方便。只要一个简单的text-align:justify
声明,里面的元素就自动等间距两端对齐布局!根本无需计算每个列表元素间的margin间距,更不用去修改父容器的宽度。
三、整站的弹窗量很大,并且整站采用了全局委托,所以整站只有一个弹窗,弹窗的内容是根据点击的a链接的title类型来显示出其对应的内容。这样页面上想要弹出视频或图片都很方便了。(除了点击弹窗关闭按钮,按esc键也可关闭弹窗)
例1:
<a href="../../src/css/images/person/home.jpg" class="ywj-hd-play" title="video"> <video src="../../src/css/video/home-max-2.mp4" controls="controls" style="display:none;"></video> </a>
如果对应的是video视频,只需其父元素是a标签并且其title属性值为video即可。并且打开弹窗会自动开始播放视频,关闭弹窗即会暂停视频。
例2:
<a href="../../src/css/images/18-ywj-qr.jpg" class="ywjb-video-a" title="iframes"> <iframe src="https://v.qq.com/iframe/player.html?vid=g0635jsczdq&tiny=1&auto=0" allowfullscreen class="jsBoxIframe"></iframe> </a>
如果对应的是iframe视频,只需其父元素是a标签并且其title属性值为iframes即可。并且打开弹窗会插入iframe,关闭弹窗即会移除iframe。(注:将iframe hide之后视频还是会继续播放,所以只能将其移除)
例3:
<a href="../../src/css/images/yw-qrcode.png" title="阅文招聘官方微信公众号" class="ywj-icon-share ywj-icon-wx" target="_blank">阅文集团官方微信公众号</a>
如果对应的是图片,只需在将其href属性值设为图片的地址即可。
四、整站的选项卡非常多,所以将其方法封装到commonBox()函数里了,调用的时候只需要传入参数(对应的ul,点击的nav) 即可。
self.commonBox(jsSclUl,jsSclPicNav);
若该选项卡需要自动轮播,即给jsSclpicNav设置data-play='true'属性。
五、发现iframe会阻塞页面的加载,所以将iframe的加载改为放在图片加载完之后。并且给iframe设置其对应的背景图片防止留白。
每个iframe都设置其对应的背景图:
改为图片加载完之后再加载iframe
before:
after:
六、 招聘职位列表信息人工粘贴难免会遇到格式问题,前端这边也对其做了处理(处理掉了1、1.等多余字符)。
before:
after:
七、整站都将类名进行了压缩,所以不需要压缩的类名需要在config.json的classIgnore进行配置:
"compress": {
"html": true,
"className": true,
"classIgnore": ["active", "checked", "disabled", "selected", "reverse", "jpg", "png", "svg", "gif","eot","woff","ttf","prev","next","ywjs-qa-close","index","ywj-login-btn","ywj-login-btn","ywj-bar","ywj-btn-a"]
},
八、所有高亮,显示,隐藏等样式全部用类名active控制,这样在js里面只需removeClass('active')或者addClass('active')即可;
例:
.ywjb-job-msg { display: none; } .active.ywjb-job-msg { display: block; }
以上就是本次招聘项目的小总结,有问题希望大家帮忙指出,蟹蟹~