Enterprise practical training-web Front-end design and practical training-web Front-end

Enterprise practical training-web Front-end design and practical training-web Front-end

This week, we arranged enterprise training. The company is a Beijing Golden Source wanbo company. One of its two subsidiaries is a development project and the other is an IT training project. We were given classes these two days as a technical engineer of the Development Department. In the past two days, he mainly talked about the web Front-end design. Let's share with you the gains of the past two days.

Task 1: Click the title to slide the hidden content.

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> There is actually nothing here, that is, some la S. The key to his special effect implementation is to use the slidedown () method in the JavaScript package.
Effect:





Through this task, I learned the basic Html code, which is a simple css + div + js code, which is easy to understand. While implementing special effects, I also realized that js is powerful. Without js encrypted files, it would take many times more code to complete this task.
Task 2: Click the text link to show the pop-up layer in the fade-in effect; click the close button to bring up the layer to fade out the effect.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Effect:

In this task, the entire page is divided into three layers with three Divs, and a local image is loaded by adding hyperlinks to design the interface, including the center and absolute position of the image, it has more complex css styles, and the effect is brilliant by calling the fade-in and fade-out special effects in JavaScript files.

Task 3: Use ajax to check whether the user name exists
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Effect:




This task reads HTML, PHP, and other files by calling the methods in JavaScript files (as follows.
Pai.get('users.html ', {k: Math. random ()}, function (result ){
If (result = 0)
{
Users ('login user_info'login .html ('this user has been registered ~ Change one ');
Return false;
}
Else if (result = 1)
{
Certificate ('{user_info'{.html ('congratulations !~ This user can register ');
Return false;
}
Else
{
Alert (result );
}
})
It is also worth noting that we have come into contact with regular expressions today and we will not elaborate on them here. You can click here to learn about the interesting knowledge.