JavaScript, JQuery, HTML5, node. js instances Daquan-Reading notes 2

a lot of technology, many examples, had to slowly learn, slowly practice!! The book that I learned now is " Javascriptactual combat-- --Javascript, JQuery , HTML5 , Node.jsinstance Largefull "

JavaScript, JQuery, HTML5, node. js instances Daquan-Reading notes 1

3.2 Photo loading and positioning

According to the functional design, you can first write a good HTML structure, and then a good CSS to make a general effect, and finally with JavaScript and various actions. First, look at 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 cleaner. See "Example 3-1" for more details.

"Example 3-1 HTML code for photo presentation"

<! DOCTYPE html>

Comparing the examples in the previous chapters looks more concise, right? The purpose of refactoring is to have such an effect, which can be said to be the developer's user experience.
3.2.2 CSS Code
The direct preview of "Example 3-1" is definitely a mess, in the eg3.css to write the layout and positioning of the code after the effect is very different, see figure 3-2,css code See "Example 3-2."
"Example 3-2 CSS code for photo presentation"
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;/* left margin 10 pixels */9._margin-left:8px;/* This is specifically for the IE6 gap is too large and set */10. }11.   #smallPhotosList img{12.border:2px solid #000; 13.cursor:pointer;/* mouse style */14.   }   #prve {16.background:url (icon_prve.jpg); 17.height:40px;18.width:20px;19.display:inline-block;/* let span The label becomes a block-level element */20.float:left;21.cursor:pointer;22.   }   #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 plus the following "example 3-3" JavaScript code, the effect is very different, please see figure 3-2 of the loading CSS before and after comparison.
Figure 3-2 before and after loading CSS code
In "Example 3-2" There is a name is CSS hack, this for different browsers to write a different CSS code process, called CSS hack. CSS hack is the existence of different browsers, such as IE 6, ie 7, the parsing of CSS is not the same, will lead to different page effects, not get the page effect we need. This time you need to write different CSS code for different browsers, so that it can be compatible with different browsers at the same time.
There are roughly 3 forms of CSS Hack, CSS class internal Hack, selector Hack, and HTML header reference (if
IE) hack,css Hack mainly for IE browser, there is a relatively full CSS Hack table, see figure 3-3, reproduced temporarily omitted!

the most soldier assault combat type JavaScript
JavaScript, JQuery, HTML5, node. js instances Daquan-Reading notes 2