CSS website layout record (Li Chao)--Reading notes

1.web Presentation Layer Technology

2.HTML Link Design Ideas

3. The rational analysis, classification and processing of information to create business value.

4. The head describes the information required by the browser, the subject contains the specific content needed to show.

5.HTML (XHTML) XML

6. Good CSS code design can lead to inheritance and overload between the code, can achieve maximum code reuse, thereby reducing the amount of code and maintenance costs.

7. Due to different rendering styles between different brand browsers and different versions, there are some differences in parsing CSS.

8.css hack can be simply translated into a CSS hacking program, which is a name that is used by designers. It shows a similar to deception browser encoding means, due to browser compatibility issues, a browser does not support some tags and b browser support, so using this spoofing method, you can write a style is only b browser parsing, and a browser will be ignored, and vice versa.

9. With the improvement of hardware level, future interface design will be rich and colorful.

10. Selector Priority: Id>class

11. Two lines of CSS of the same type, generally performing the latter, such as

Div {background:#666;       background:#fff;}

The ultimate goal of 12.DIV is to properly identify our content areas.

13. In appropriate cases, the use of nesting should be minimized to ensure that the browser does not consume excessive resources to parse the nested relationship, simple nesting structure is more conducive to our understanding of the layout and control.

14. Select other XHTML tags that meet your needs, and substitute the div appropriately.

Chapter three CSS page layout and positioning

1. Floating is a very useful layout, it can change the order of the objects in the page before and after the flow. The advantage of this is that it makes the layout of the content simple and has good scalability.

2. Left column fixed (set width) right column adaptive (not set width).

3. Absolute positioning: It will be essentially separated from other objects, its positioning mode will not affect other objects, and will not be affected by the floating positioning of other objects. In a sense, after using absolute positioning, the object floats like a layer on top of the page.

3. Three columns Floating middle column width adaptive:

#left{width:100px;Height:300px;position:Absolute;Top:0px; Left:0px;}#right{width:100px;Height:300px;position:Absolute;Top:0px; Right:0px;}#center{Height:300px;Margin-left:104px;Margin-right:104px;}//margin-left and Margin-right are used to make the widths of the sides columns

4. The core technique of using floating alignment is to control the width reasonably.

5. Upper and lower margin overlay (white edge overlay rule): When two objects are up and down, and both have margin attributes, the larger margin is the dominant. Note: Once you set the float property on an element, they will no longer have a blank edge overlay.

6.ie6 problem: When our box object is floating, in IE6, the left and right margin of the box object doubles. This is IE6 CSS parsing problem, we can set the object's Display:inline, to solve.

7.css page layouts exist only in two ways: floating layouts and positioning layouts. The core of both of these positioning methods is the control that is out of the document flow.

8. Document flow: For an XHTML web page, any element under the BODY element, based on its sequence, is composed of the upper and lower relationships, which is the document flow. The browser displays their position in the page according to the order of the elements. The document flow is the default display rule for the browser.

9. Floating Cleanup:

10. When the website has a strong adaptability to the resolution and the size of the content, it is necessary to use floating positioning.

11. Some seemingly fixed layout of the site, if you need to use margin to control the object placeholder, due to the margin overlay rules, you need to use floating to locate.

Fill: Float is more suitable for object layout mode, rather than information organization (information organization available display:inline).

12. Relative positioning is the way to extend the floating position and absolute positioning. Relative positioning allows the set element to remain relative to the original position without destroying the information of its original position.

13.b nested c,b relative positioning, c absolute positioning or relative positioning: C relative positioning is relative to B, and in the B element still retains the C placeholder information.

14. The relative positioning of the non-occupying: the parent relative positioning, the height is clear, does not set top and left, the child absolute positioning, such as:

<DivID= "Divgroup"><DivID= "a">A</Div><DivID= "B">B</Div><DivID= "C">C</Div></Div>

#divGroup{margin:50px 0 0 50px;position:relative;Border:1px solid #000;width:400px;Height:200px;}#a, #b, #c{Border:1px solid #000;width:100px;Height:100px;margin:2px 2px 2px 0;float: Left;}#b{position:Absolute; Left:10px;Top:30px;}

15. Absolute positioning is used for fixed page location, and do not want to use Margin,padding,border and other properties control.

(1) Irregular web page design

Because of the design needs, some web design does not go through the column or block layout of the route, but randomly layout location. In this case, they tend to be laid out in a combination of absolute positioning or relative positioning.

(2) Design on the screen

If you need an element to cover the entire picture, but you do not want to break the original structure, you can use absolute positioning or relative positioning, allowing some or some objects to be covered on the screen.

(3) Interactive design

The drop-down menu is an interactive design, because its menu subkey appears only when the mouse is moved, so it is a design that needs to be overlaid on top of the screen.

When a submenu needs to change depending on the mouse position of the parent, it needs to be positioned according to the mouse position of the parent.

(The principle of both cases is that when a submenu appears, it does not break the layout of the other elements, so they need to float on top of the screen, so you can use absolute or relative positioning)

4th Chapter CSS Website element design

1.div should focus on large area block area, for simple text-only navigation, UL more lightweight and flexible.

2. When the text indent text-indent is negative, it is necessary to set the padding of the container of the text to be greater than or equal to the absolute value of the indent, lest the text appear outside the area.

CSS website layout record (Li Chao)--Reading notes