| 1) block layout. Try not to break up a piece of content. Use DIV to keep the whole. The outer layer of DIV is non-color extended. Use a fixed width of 1003. Otherwise, use 100%, it also contains a fixed width of 1003. The layout can be kept in a straight line (The vertical and horizontal lines should be kept as straight as possible) 2) to be centered, the left and right borders of the outermost DIV are automatically used;
3) The UI image is represented by a background, and the buttons and logos are used as images. ALT is added to each image;
4) use float on the left and right sides. Use two float on the three columns, or add one floating on the right or left.
5) DIV verticals cannot be automatically opened. After the usage is cleared, the method can be used as follows: 1. 1% height; overflow: automatic or inherit; otherwise, use hidden. Method 2: insert a DIV at the bottom layer of the Open table. The Row Height is 0 PX. Clear both of them and display them as blocks.
6 )! Important; use it to solve IE and FF compatibility
7) solution to split the image and DIV: 1. Put the DIV and IMG labels in a row. 2. Delete useless CSS styles. 3. Change the layout policy.
8) when the image is mixed in the DIV, if the image is floating, there is no way to automatically open the DIV. In this case, you can adjust the DIV height to the same height as the image. Note: It should be appropriate to adjust the DIV height. If it is too small, it may be good to display in IE, but it may show only half of it in FF.
9) defines global styles and local styles. The ID style cannot be reused. to reuse a style on the same page, use the CLASS definition.
10) Use LI
11) by default, UL, Form, P, and other labels have borders and fills. If not, define them as 0.
12) for news date formatting, use the span tag in LI, place the date in it, define the right float of SPAN, and then mention the SPAN code before the news. Note that the <div> label is not allowed in li.
13) use the background to locate the small icon in front of li because the background has the positioning function.
14) when absolutely positioning, the DIV to be located is mentioned after the body, before all the body code, and then adjusted and placed for positioning, when there are other methods, try not to adopt absolute positioning. Absolute positioning is not a perfect layout method. If the content on the page is left or right, you can use absolute positioning. if the content is centered, the absolute positioning will shift when the resolution is large.
15) try to clear the float when it cannot be located.
16) when the product is arranged, the style should adopt class as much as possible, which is conducive to copying. Li can be used for a simple image list. Div can be used for complicated and difficult formatting. Our principle is: use the least Div to achieve the best effect. Each product is a separate Li or Div encapsulation, which facilitates replication, and each line is encapsulated with a large Div.
17) if there are icons and dotted lines in Li, you cannot use Li to define two backgrounds. A Li background is not displayed, the solution is to add the <span> label before and after the text, define the icon to <span>, and define the dotted line to Li. If there is a date at this time, pay attention to their floating. The text with icons will float left, the date will float right, and the code will be arranged according to the regular arrangement. If there is only one of them, it should be placed in the back-to-back mode. On the right side, it should be placed in the front of the left. If the Li list is split, clear the float and set the display as a block.
18) use of the page description: insert the description first and name it. Then add the name of the address to be linked. For example, if you want to click "Header" in the name of "my name", click "back to the header" as the link address: # hearder 19) the layout of the internal pages mainly refers to the fact that the CSS application cannot affect the homepage. We can use the double CSS method, but be careful not to create a CSS style for each page, in this way, there are a lot of style sheets, unless your inner pages are not similar. Generally, the internal pages share the same style as other internal pages. If the internal pages are the same, the template can be used. We recommend that you add a prefix to the style of the inner page. For example, if the homepage is main, the introduction can be AB _main so that it will not be overwritten. Back up the CSS style sheet. Put it in the recycle bin first. We can consider using templates when doing news. 20) When boundaries are used on the page, the results explained by IE and FF may be different. It is possible that the boundary in IE is very long and the boundary in FF is very small, in this case, you can change the boundary to the same value for filling.
21)
1. When the text box and text are not aligned, first set the vertical-align: middle attribute of the input to solve the problem. No. Try to finish all the alignment styles in the vertical align. If not, remove the vertical-align: middle styles and change them to the boundary filling style. If not, reduce the height of the text box to around 16 PX.
2. adjust the alignment between the text box and the image button: align = "absmiddle" is often seen on the Internet, but this style cannot be verified by W3C, so we try not to use it, we first try to complete all the alignment styles in the vertical alignment. If not, adjust the border between the text box and the image button. If not, use the style control text box and button to align to the vertical top, use PS to zoom in or zoom in the height of the image button, and do not cut up or down the image to too many useless edges.
Suggestion: Try not to use images as buttons, which is difficult to control. In addition, in order to be beautiful, there is no way to use Div to separate text from form elements. The height of the text div is the same as that of the outermost Div, And the row height is the same. It is difficult for form elements to be controlled by vertical boundary and padding.
The line height of the text box affects the text input position. The line height is as high as the text box, and the text is vertically centered in the text box. Note: The Row Height of the large Div containing all form elements may also affect the vertical arrangement of the Form Content in ff. 22) do not use big labels such as DIV in text content and image areas of the text, and try to use small labels such as P, span, H1, H2, UL, and Li, in this way, the layout is layered, the tag size is differentiated, and the structure is clear.
P is almost the smallest tag. It should not contain H1, UL, and so on, but it can contain Span 23) some good experience in text and text mixing: Do not use Div to typeset text. (The image and news list in the image list do not belong to this range)
A. It is easy to mix text and an image. You can set the left and right sides of the image to achieve the convergence of text and text.
B. Text and multi-Picture Arrangement:
Scenario 1: In this case, the three pictures are arranged on the left. We can use the UL Method to define the three pictures as floating on the left and a large P method to define floating on the right, the width and height must be defined, and the vertical distance of the image must be defined as an IMG. This is a solution, that is, to encapsulate three img with a P on the left, and then define the P floating on the left. The big one on the right also uses a P to hold the things of the house, floating on the right, the width of P should be defined, the three pictures on the left stretch the line feed by defining the small width of P. This method is recommended. The picture on the right is directly put in the text, and then use the BR to wrap the text. Scenario 2: This is similar to a mix of images. Just pull the image to the desired position and design it as a float. For several elements similar to a few images, we can define a local style for one-time application, so that the code is relatively small, the application is convenient, and the modification is easy. 23) do not define floating when defining the style of a single line label contained in a large label, because there is nothing between it and its floating around, sometimes DIV split is caused by unnecessary floating. |
