Examples of JavaScript, jQuery, HTML5, and Node. js-Reading Notes 2, jquerynode. js

Examples of JavaScript, jQuery, HTML5, and Node. js-Reading Notes 2, jquerynode. js

There are many technologies and many examples, so you have to learn and practice them slowly !! The book I learned now is [JavaScript practice-JavaScript, jQuery, HTML5, and Node. js instances]

JavaScript, jQuery, HTML5, and Node. js instances-Reading Notes 1

3.2 photo loading and positioning

Based on the function design, you can first write the basic HTML structure, then configure CSS to make a general effect, and finally add various actions with JavaScript. First, check the HTML code structure.

 

3.2.1 HTML code

The CSS code is saved to the eg3.css file, and the JavaScript code is saved to the eg3.js file, which makes the HTML code more clean. For details, see [Example 3-1 ].

[Example]3-1Photo displayHTMLCode]

 

<! DOCTYPE html> 



The examples in the previous chapter seem more concise, right! The purpose of reconstruction is to achieve this effect, which can be said to be the user experience of developers.
 
3.2.2 CSS code

Directly preview [Example 3-1] is definitely a mess. After you write the layout and positioning code in eg3.css, the effect will be very different, as shown in Figure 3-2, for the CSS code, see [Example 3-2 ].
 
[Example]3-2Photo displayCSSCode]
 
1. ul, li {2. list-style: none; 3 .} 4. # smallPhotos {width: 620px; margin: 10px 0 ;}5. # smallPhotosList {margin: 0 auto; width: 580px; float: left; padding: 0;} 6. # smallPhotosList li {7. float: left;/* left floating */8. margin-left: 10px;/* The left margin is 10 pixels */9. _ margin-left: 8px;/* This is specifically set for the IE6 gap is too large */10 .} 11. # smallPhotosList img {12. border: 2px solid #000; 13. cursor: pointer;/* mouse style */14 .} 15. # prve {16. background: url(icon_prve.jpg); 17. height: 40px; 18. width: 20px; 19. display: inline-block;/* turn the span label into a block-level element */20. float: left; 21. cursor: pointer; 22 .} 23. # next {24. background: url(icon_next.jpg); 25. height: 40px; 26. width: 20px; 27. display: inline-block; 28. float: right; 29. cursor: pointer; 30 .}




These CSS codes, coupled with the JavaScript code [Example 3-3], have different effects. See the comparison before and after loading CSS in Figure 3-2.
 
Figure 3-2 before and after loading CSS code
In [Example 3-2], there is a process called CSS hack, which writes different CSS code for different browsers. It is called CSS hack. CSS hack exists in different browsers, such as IE 6 and IE 7. Different understandings of CSS parsing may lead to different page effects and cannot achieve the page effects we need. In this case, you need to write different CSS codes for different browsers so that they can be compatible with different browsers at the same time.
CSS Hack has three forms: Internal CSS Hack, selector Hack, and HTML header reference (if
IE) Hack and CSS Hack are mainly targeted at IE browsers. There is a relatively full CSS Hack table, as shown in Figure 3-3!




The most combat JavaScript




Confused, I have learned javascript and css, followed by jQuery or HTML5 <canvas>. Daniel answers questions from younger brother.
Learn jQuery first. HTML5 currently has compatibility issues, and graphics are generally made using SVG or Flash.

Use nodejs to run html5
Html5 has nothing to do with node. html5 is supported by browsers.