Summary of registration binding page and WeChat QR code login page development project_html/css

Le Emperor came to the new internship unit, perhaps the resume of the previous interview or in the iQiyi internship, and was soon "responsible for commitment" by the project team. Instead of the old routine of just joining the company, you should first train with the architect for two weeks and concentrate on studying the framework without asking about the specific business. Leti only had a few days to look at the framework. When he was assigned to the framework page, he still couldn't handle it easily. As his colleagues said, learning must be done step by step, writing examples and looking at the code is not enough.

At present, this company is similar to the industry of A Zhu, the author of "Out of the Software Workshop". It is a software company that provides talent management solutions to medium and large enterprises. The fashionable word is SAAS. This type of company has a higher level than outsourcing companies, but still has many characteristics of outsourcing companies. Unlike Internet companies, which have a lot of room for self-driving. Whether an industry is tired or not depends on whether the industry drives its own demand or is driven by customers to meet deadlines, always responding passively and being overwhelmed.

Due to the "outsourcing" nature of the company, it is inevitable to have an outsourcing style of doing things. The development process is much more standardized and advanced than the last internship unit, but it is also more difficult for employee mobility. high. Le Di is currently in the office, and opposite him sits the project manager, who is in charge of technology development. In addition to tracking project progress and products and fighting over construction deadlines, the rest of the daily work is interviews, interviews, interviews. Seeing the project manager complaining about the interviewer's level, he started to brush people off in various ways. Le Di had to say that his level of deception during the interview had reached a certain level.

This situation seems a bit funny. Companies that make professional talent management software will be troubled by not being able to recruit suitable people. How many software can really solve the problem?

Ledi chose this company instead of Tencent because he believed that this company could improve Ledi’s technology much better. In the past two weeks, Le Di's original speculation in his job requirements has been verified. The front-end team is divided into a business team and an architecture team. The business team is basically composed of colleagues who have been with the company for about one year, while the architecture team is crouching tiger, hidden dragon.

Being in such a professional front-end development team, we no longer just rely on Baidu to solve sporadic problems, but have a broad knowledge base or knowledge base. You can always ask for advice to solve the problem in a shorter and better way, and your own growth will be faster. Let’s talk about some dry stuff.

(1) Development of registration binding page and WeChat QR code login page

Project background: based on the prototype diagram and the format of the specified page , developed registration, binding and QR code scanning landing pages.

Please see the development renderings:

Due to registration and binding The only difference in the renderings is the text. Here Ledi only posted one picture, the rendering of the WeChat login page. Ledi adopted the style of the WeChat web version. The difference is that in order to express the content more clearly, the font of "WeChat login" has been changed. Zoomed in.

Starting from these two pages, Leti started the work of PC page development, which is also the basic skill of a front-end development engineer. This unit requires compatibility with IE8, 9, 10, chrome, and firefox. When moving to PC development, the content on the page will become more complex, and browser compatibility must also be taken into consideration. Many more advanced standards need to be avoided.

(1). The first thing to deal with is the fixed width of the centered layout. The change in computer screen size is much greater than the change in mobile size, so the first solution is to fix the width and center.

.login-outsideWrapper{	position: relative;	top:0px;	width:960px;	margin:0 auto;}

Copy after login

The class here in Ledi is a class that wraps all page content.

Set it to a fixed width of 960px

At the same time, use the margin attribute to construct a centered

Set a position attribute at the same time, but do not move it, so that the absolute displacement of the internal content is relative to the outer wrapping class, not the body element.

Through the above three points, the foundation for the construction of the entire page is laid.

(2). Let’s look at a frequently encountered problem:

<div class="login-header">      <div class="login-logo">        <img src="100003_medias_201464_beisenlogo.png">      </div>      <div class="login-rightItem">        <span><a href="#">招聘首页</a></span>        <em class="login-itemBorder">|</em>        <span><a href="#">登录</a></span>        <em class="login-itemBorder">|</em>        <span><a href="#">注册</a></span>      </div>      <div class="login-clear"></div>    </div>

Copy after login

.login-rightItem{	width: 400px;	<span style="color:#ff0000;">float: right;</span>	font-size: 12px;	line-height: 80px;	margin-right: 65px;	text-align: right;}

Copy after login

The problem here is that the outer div has no fixed width, and the inner div uses the float attribute. The content of the inner div may exceed the width of the outer div, causing display problems. The solution here, as pointed out in the link, is to add a line to the same level of the inner div. html code is enough.

<div style="clear:both;"></div>

Copy after login

In the above code, text-align: right; ensures that the form font is right-aligned.

(3). Absolute positioning

构建了以上内容，当构建如果内容靠相对定位（relative）解决，那么相对位移只是视觉上的假象，在页面上还是会占据相应区域，致使对于不同浏览器会出现不同的位移差。这里乐帝采取绝对定位（absolute）来确定构建页面。

.login-outerWrapper{	<span style="color:#ff0000;">position: absolute;</span>	top:100px;	<span style="color:#ff0000;">left:50%;	width: 513px;	margin-left:-326px;	padding: 30px 70px 30px;</span>	border: 1px solid #c5cace;	border-radius: 1px;	background-color: #fff;}

Copy after login

注册这个表单类，是通过绝对定位定位到指定位置的，同时代码中还包含了居中的问题。由于整个类是定宽的同时左右内边距也可以计算。在父级元素中居中，仅需要此外层元素右移50%（相对父元素），再相对自己宽度（内容宽+左右内边距）左移50%即可实现居中。

（3）.前景图还是后景图
让很多前端同仁纠结的在于，页面开发完还没完，兼容性测试经得起考验才会避免加班。而乐帝最开始开发注册页面时，涉及到背景图采用了css3的新属性background-size:cover。一拿给IE8检验，就露馅了。IE8根本不支持，这里同事给的建议是采用前景图构建背景，即通过绝对位移（absolute）将表单内容，移到img标签构造的前景图上，这样就能保证了很好地兼容IE8。

这里学会了兼容性测试一个非常重要的技巧，那就是看一个标签是否起作用，查看浏览器响应标签是否有显示即可，乐帝以后开发就可以尽情采取前景图来构造背景了，但从web标准上来说，这不得不说是一个委曲求全的方案。

（二）移动端图片轮播图片等比例展示处理

乐帝目前所在项目组可谓PC、移动端都要抓。而公司当初放弃原生app的原因在于原生app固有缺陷：

app过多用户信息过载，致使用户很少去用app

app更新困难，特别是HR客户很多都是科技小白

于是乎web的优势就显现出来了，轻量、服务器修改，立马可显示更新。公司战略在微信同开发移动版。而做出来的移动版页面由于手机屏幕尺寸不同，会导致图片比例失真，影响用户体验。

乐帝采取了一个短小精悍的解决方案。通过同比例拉伸图片到屏幕尺寸，多出轮播尺寸的图片部分则会被隐藏掉。当然这种方案的问题在于可能用户上传的关键内容被隐藏，不过产品会对客户上传图片进行尺寸要求，也就不会存在这些问题了。

代码如下：

$(window).load(function(){  Show();});function Show(){    var wrapWidth = ($("#wrapper").css('width'));    var wrapHeight = ($("#wrapper").css('height'));    var picHeight = ($("#bgImage").css('height'));    var picWidth = ($("#bgImage").css('width'));    var d1 = parseFloat(wrapWidth)/parseFloat(picWidth);    var d2 = parseFloat(wrapHeight)/parseFloat(picHeight);    if(d1<d2){      with(document.documentElement) //为语句设置默认对象    {      $("#bgImage").css('width',parseInt(d2*parseInt(picWidth))+"px");      $("#bgImage").css('height',wrapHeight);    };    }else{      with(document.documentElement)     {      $("#bgImage").css('width',wrapWidth);      $("#bgImage").css('height',parseInt(d1*parseInt(picHeight))+"px");    };    }//比较两个放大的比例，根据放大较大即填充满div慢的同比例放大}//在图片载入前就对图片处理，而不走轮播效果

Copy after login

以上代码中用到的思路受启发于这里，这里用到了with作用于的内容，这里指出了documentElement 和 body的区别，即html根节点和dom树根节点body的区别。

（三）为站点添加百度统计

根据要求有自动安装和手动安装两种方法，但考虑到开发和运维职权分立，乐帝采用教程，找到了项目中所有页面都会引用的页脚文件，将生成的脚本片段加入其中，即可完成安装。

（四）小小的思绪

目前的实习单位，所有用到的工具都是对开源项目及现有代码的整合优化，“不重复造轮子”，大大提高了开发效率，你没必要为了一个输入框开发自己的文本编辑器，很多问题网上都会有成熟的解决方案或开源软件，很多时候，界定问题比解决方案更重要。

开源的意义