Home Web Front-end HTML Tutorial Summary of registration binding page and WeChat QR code login page development project_html/css_WEB-ITnose

Summary of registration binding page and WeChat QR code login page development project_html/css_WEB-ITnose

Jun 24, 2016 am 11:58 AM
QR code develop Login page project

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的区别。

    (三)为站点添加百度统计

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

    (四)小小的思绪

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


    开源的意义

    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    How to create a QR code using wps How to create a QR code using wps Mar 28, 2024 am 09:41 AM

    1. Open the software and enter the wps text operation interface. 2. Find the insert option in this interface. 3. Click the Insert option and find the QR code option in its editing tool area. 4. Click the QR code option to pop up the QR code dialog box. 5. Select the text option on the left and enter our information in the text box. 6. On the right side, you can set the shape of the QR code and the color of the QR code.

    Can AI conquer Fermat's last theorem? Mathematician gave up 5 years of his career to turn 100 pages of proof into code Can AI conquer Fermat's last theorem? Mathematician gave up 5 years of his career to turn 100 pages of proof into code Apr 09, 2024 pm 03:20 PM

    Fermat's last theorem, about to be conquered by AI? And the most meaningful part of the whole thing is that Fermat’s Last Theorem, which AI is about to solve, is precisely to prove that AI is useless. Once upon a time, mathematics belonged to the realm of pure human intelligence; now, this territory is being deciphered and trampled by advanced algorithms. Image Fermat's Last Theorem is a "notorious" puzzle that has puzzled mathematicians for centuries. It was proven in 1993, and now mathematicians have a big plan: to recreate the proof using computers. They hope that any logical errors in this version of the proof can be checked by a computer. Project address: https://github.com/riccardobrasca/flt

    Four recommended AI-assisted programming tools Four recommended AI-assisted programming tools Apr 22, 2024 pm 05:34 PM

    This AI-assisted programming tool has unearthed a large number of useful AI-assisted programming tools in this stage of rapid AI development. AI-assisted programming tools can improve development efficiency, improve code quality, and reduce bug rates. They are important assistants in the modern software development process. Today Dayao will share with you 4 AI-assisted programming tools (and all support C# language). I hope it will be helpful to everyone. https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot is an AI coding assistant that helps you write code faster and with less effort, so you can focus more on problem solving and collaboration. Git

    How to log in to corporate WeChat email How to log in to corporate WeChat email Mar 10, 2024 pm 12:43 PM

    How to log in to the email address of Enterprise WeChat? You can log in to the email address in the Enterprise WeChat APP, but most users don’t know how to log in to the email address. Next is the graphic tutorial on how to log in to the email address of Enterprise WeChat brought by the editor for interested users. Come and take a look! Enterprise WeChat usage tutorial How to log in to the Enterprise WeChat email 1. First open the Enterprise WeChat APP, go to the [Workbench] at the bottom of the main page and click to come to the special area; 2. Then in the workbench area, select the [Enterprise Mailbox] service; 3. Then jump to the corporate email function page, click [Bind] or [Change Email] at the bottom; 4. Finally, enter [QQ Account] and [Password] on the page shown below to log in to the email.

    Which AI programmer is the best? Explore the potential of Devin, Tongyi Lingma and SWE-agent Which AI programmer is the best? Explore the potential of Devin, Tongyi Lingma and SWE-agent Apr 07, 2024 am 09:10 AM

    On March 3, 2022, less than a month after the birth of the world's first AI programmer Devin, the NLP team of Princeton University developed an open source AI programmer SWE-agent. It leverages the GPT-4 model to automatically resolve issues in GitHub repositories. SWE-agent's performance on the SWE-bench test set is similar to Devin, taking an average of 93 seconds and solving 12.29% of the problems. By interacting with a dedicated terminal, SWE-agent can open and search file contents, use automatic syntax checking, edit specific lines, and write and execute tests. (Note: The above content is a slight adjustment of the original content, but the key information in the original text is retained and does not exceed the specified word limit.) SWE-A

    Learn how to develop mobile applications using Go language Learn how to develop mobile applications using Go language Mar 28, 2024 pm 10:00 PM

    Go language development mobile application tutorial As the mobile application market continues to boom, more and more developers are beginning to explore how to use Go language to develop mobile applications. As a simple and efficient programming language, Go language has also shown strong potential in mobile application development. This article will introduce in detail how to use Go language to develop mobile applications, and attach specific code examples to help readers get started quickly and start developing their own mobile applications. 1. Preparation Before starting, we need to prepare the development environment and tools. head

    How to solve the problem of too frequent login operations on Wegame? How to solve the problem of too frequent login operations on Wegame? Mar 14, 2024 pm 07:40 PM

    Wegame is a software used with Tencent games. You can use it to start games and gain acceleration. Recently, many users have experienced prompts that login operations are too frequent when using it. Faced with this prompt, many users do not know How can we solve it successfully? In this software tutorial, we will share the solution with you. Let’s learn about it together. What should I do if Wegame login operations are too frequent? Method 1: 1. First, make sure our network connection is normal. (You can try opening the browser to see if you can access the Internet) 2. If it is a network failure, then try restarting the router, reconnecting the network cable, and restarting the computer to solve the problem. Method 2: 1. If there is no problem with the network, then select &

    GeForce Experience login freezes [Fix] GeForce Experience login freezes [Fix] Mar 19, 2024 pm 06:30 PM

    This article will guide you to solve the GeForceExperience login crash issue on Windows 11/10. Typically, this can be caused by unstable network connections, corrupted DNS cache, outdated or corrupted graphics card drivers, etc. Fix GeForceExperience Login Black Screen Before starting, make sure to restart your internet connection and computer. Sometimes, the problem may just be due to a temporary issue. If you are still experiencing NVIDIA GeForce Experience login black screen issue, please consider taking the following suggestions: Check your internet connection Switch to another internet connection Disable your

    See all articles