Organize the collection of XHTML+CSS tips for making Web pages

css|xhtml| Skills | Web page

1. Mouse move Up is a window to save the collection of the small box, can not limit its appearance?

Add in Head

2. Galleryimg with new attributes on picture

3.div implement scroll bar (in some cases can replace IFRAME)

High height and overflow must be set!

PS: in IE sometimes the horizontal scroll bar will come out, but in fact, the horizontal scroll bar does not have the actual use, looks like this is the IE bug, the solution: Overflow-x: Hidden

Plus this. Hide the horizontal scroll bar

4. Using CSS to implement the triangle

HTML code

5. Use VML to draw rounded corners ...

HTML code

6. ie, when float is used. Using Margin-left and Margin-right will become double the number , example:

margin-left:10px; The actual effect is 20PX;

Solution: (1) with Display:inline; (2) using Clear:float

Method 1 The scope of adaptation is more extensive, (2) the words. Only those elements that can clear the float. Can not be removed, can not be used ~

7. In Mozilla Firefox and IE, the box model explains inconsistencies resulting in a 2px resolution:

div{margin:30px!important;margin:28px;}

Note that the order of these two margin must not be written in reverse, according to the Czech Republic!important This attribute IE is not recognized, but other browsers can identify. So in IE, in fact, explained that:
DIV{MARING:30PX;MARGIN:28PX}
Repeat the definition according to the last one to execute, so can not only write margin:xxpx!important;

8.ie5 and IE6 's box explain inconsistent IE5 under

div{width:300px;margin:0 10px 0 10px;}

The width of the div is interpreted as 300px-10px (right padding) -10px (left padding) The final div has a width of 280px, while the width on IE6 and other browsers is calculated with 300px+10px (right padding) +10px (left padding) =320px. At this point we can make the following modifications:

Div{width:300px!important;width/**/:340px;margin:0 10px 0 10px}

This/**/is supported by both IE5 and Firefox but IE6 does not support it.

9.UL tags in mozilla default is padding value, and in IE only margin have a value, so first define

ul{margin:0;padding:0;}

10. With regard to scripts, the language attribute is not supported in xhtml1.1 , just change the code to

Under IE use JS to remove all links and pictures of the focus (resulting from the click of the Dotted box)

function bluring () {
if (event.srcelement.tagname== "A" | | event.srcelement.tagname== "IMG") Document.body.focus ();
}
document.onfocusin=bluring;

13. The Code of the right key class of shielding

14. Div+css layout with a float after the background can not extend the solution

Reason: The adaptive height of the background does not inherit the height of the float, the background will inherit the height of the position in the container where the float line is located, so the background will definitely find the last label to measure so that we are not putting anything in the label as above. That is, an empty container with no height, so that it can pull the back of the figure down.

15. With JS to deal with the problem of image distortion, such as scaling the picture, but also to prevent the picture in the loading process because the picture is too large and caused by the deformation

Application:

This sets the picture to a fixed size. After using the JS function, does not affect the effect:)

16. Use CSS to achieve both Firefox and IE support Alpha transparency effect

Filter:alpha (OPACITY=50); /* IE * *
-moz-opacity:0.5; /* Moz + FF */
opacity:0.5; /* Support CSS3 Browser (FF 1.5 also supported) * *

IE uses private property filter:alpha (opacity), Moz family uses private property-moz-opacity, while standard properties are opacity (CSS 3, Moz family). The following values are transparency, using percentages or decimals.

17. Images of unknown size are centered horizontally and vertically in a known size container

This horizontal and vertically centered example works well in ie5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape, and wrote two sets of simple styles for IE and non ie respectively.

IE uses inline-blocks, not IE using Table-cell and vertical-align.

Css

/* For Non-ie browsers * *
Div.holder {width:750px; height:300px; background: #f8f8f8;
border:1px solid #777; Text-align:center; Display:table-cell; Vertical-align:middle;}
}

18. After the element floating in IE. The original margins (margin) will double, but FF and so on will not. Workaround
Add in the code of the floating element: Display:inline, can make the float be ignored, ie does not produce double distance.

19. The effect of the first page sinking:

. post-body:first-letter {font-size:2.5em; float:left; padding:0 2px 0 0; Line-height:1em; Font-family: "Italics _gb2312"; Font-weight:bold; Color: #b00;}

20. Translucent Effect

HTML code