Home Page Production summary (div+css+javascript)

First, the overall layout of the page, divided into several sections

As shown in the following:

After you've determined the layout, plan your Web page, prepare the footage, and write the code from top to bottom, in the order of the standard document flow.

The example is divided into two parts, the red body part and the footer. The main part is divided into three parts: head, left and right. For each div and its CSS style, write a note stating the start and end! can refer to the title of the paper classification, 1→1.1→1.1.1.

Div is a block element, occupy a row, if not floating, out of the standard document flow, the left and the right side of the section is not possible, since there is a float, you must clear the float to close the "switch", otherwise it will affect the layout of the later content. There are three ways to clear floating: set height, empty <div class= "clear" ></div>;overfloat:hidden is primarily used for unordered lists.

The next step is to write the code inside the three major div of the subject. (To facilitate the corresponding writing of CSS styles, you can create a new CSS file to introduce.) When editing with sublime, two columns are displayed, the left is HTML, and the right side is CSS. ）

Second, if the content is more, you can use the navigation bar fixed at the top , plus a fixed in the bottom right corner back to the top button.

Third, the first clear, that is, clear all the HTML tags inside and outside the margin, second, you can set the body color, font-size:12px, Background:url repeat-x #F1F1F1等.

Iv. define Generic global class names : Floatl, Floatr, clear, A:link,a:visited{color: #444; Text-decoration:none}, a:hover{ Color: #f00; Text-decoration:underline},

Li{list-style:none},. Over{overflow:hidden}, and so on.

V. pay attention to inheritance and precedence : {attribute: property value!important;}, but it cannot elevate the weight of inherited properties! IE6 not supported! You can also raise the priority by giving its inline style style and property values.

Six, understand the box model : Between the boxes for margin margin, filled with padding, box border border,width and height represents the width of the content. In the actual operation, the frame can be set out first, to facilitate identification. Use the padding of the parent element to minimize the margin of the child element. Margin will open up the content and increase the width height. Text to the right can be indented in text, text-indent:20px. Center box, set width, margin:10px Auto. Sets the height of the text to be equal to the Line-height value, enabling the text to be centered vertically.

Seven, pay attention to collapse phenomenon and blank folding. Boxes that are not in the standard document flow are not collapsed.

Eight,Display:block line to block | The display:inline block is converted to rows. (The a tag is converted to a block element, which can be widened high.) The href of a tag can be set to "#" or "javascript:void (0)", the former has jump, the latter is purely gesture, no jump function)

Ix. Use of Sprite chart: using absolute positioning and relative positioning ("sub-absolute father")

X. Rolling announcements, scrolling pictures

The first thought is the marquee to achieve, very simple. There is the use of JS code to achieve, through the continuous accumulation of scrollleft or text before adding space, will be more out of the part of the hidden, timer to control, more complex, is said to be seamless rolling, I do not know the difference with marquee, test a bit, as if there is no difference, It may be the reason for browser compatibility. Another way is to append the previous Li to the back to realize the transformation of the text.

Xi. Picture Carousel

　　

The above ideas in the implementation of the need to solve a few problems: 1, in the first picture to the second map when the interval is a bit long, 2, in the mouse to put, leave, the picture will be more and more fast, 3, Li Mark is passed the parameters of the past, the picture is not transmitted parameters. Solve 1, decide which image is the N from 2 to start with; To solve 2, let the mouse on and off the timer return value is the same as the first set timer return value; Resolve the 3,IF statement, let the walk if statement inside the argument, there is no need to pass the argument, because the last is to clear the timer.

You can also move the picture outside the display window, and constantly switch to the next picture, or you can overwrite the previous image, so that the image in the back is covered by the previous image, however, it is easy to use the plugin now!

12. Telescopic Menu

13. Switch tab

Another: Big talk president plugin effect and bootstrap grid system can quickly make beautiful simple pages! (seems to be more troublesome now can find plug-ins to directly use ...) ）

Home Page Production summary (div+css+javascript)