1. When you move the mouse up, there is a small box for saving and printing the favorite window. Can you limit it?
Add in Head
<Meta HTTP-EQUIV = "imagetoolbar" content = "no">
2. Use the new property galleryimg on the Image
3. Div implements the scroll bar (in some cases, IFRAME can be replaced)
<Style>
. GB {overflow: auto; white-space: normal; Height: 100px; padding: 3px ;}
</Style>
<Div class = "GB"> </div>
The height and overflow must be set!
PS: in IE, the horizontal scroll bar sometimes appears, but in fact, the horizontal scroll bar does not have any practical purpose. It seems that this is an IE bug. Solution: overflow-X: hidden
Add this to hide the horizontal scroll bar ~
4. Use CSS to implement triangles
HTML code
<Style>
. T {
Width: 50px;
Border-style: solid;
Border-color: # a6a2f7 # FFF;
Border-width: 0 50px 50px 50px;
}
</Style>
<SPAN class = "T"> </span>
5. Use VML to draw rounded corners...
HTML code
<HTML xmlns: V>
<Head>
<Style>
V \: * {behavior: URL (# default # VML );}
# Lone {
Width: 200;
Height: 70px;
}
</Style>
</Head>
<Body>
<V: roundrect id = "lone" strokecolor = "#000" strokeweight = "4px" arcsize = "0.8" fillcolor = "# ff0000">
<! -- Arcsize radian value fill color of the fillcolor circle strokecolor circle border color strokeweight border size -->
</Body>
</Html>
6. in IE, when float is used, the value of margin-left and margin-right will be doubled., For example:
Margin-left: 10px; the actual effect is 20px;
Solution: (1) Use display: inline; (2) Use clear: Float
Method 1 is applicable to a wider range of elements. (2) it is applicable only to elements that can be purged. elements that cannot be purged and cannot be used ~
7. The box model interpretation in Mozilla Firefox and IE is inconsistent, resulting in a 2px difference. solution:
Div {margin: 30px! Important; margin: 28px ;}
Note that the order of the two margin entries must not be reversed. According to Alibaba Cloud! The important attribute ie cannot be identified, but other browsers can. So in IE, it is actually explained as follows:
Div {maring: 30px; margin: 28px}
If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: xxpx! Important;
8. The box interpretations of ie5 and IE6 are inconsistent with those of ie5
Div {width: 300px; margin: 0 10px 0 10px ;}
The DIV width is interpreted as 300px-10px (right fill)-10px (left fill). The final Div width is 280px, in IE6 and other browsers, the width is calculated based on 300px + 10px (right fill) + 10px (left fill) = 320px. In this case, we can make the following changes:
Div {width: 300px! Important; width/**/: 340px; margin: 0 10px 0 10px}
This/**/is supported by both ie5 and Firefox, but not by IE6.
9. UL labels have padding values by default in Mozilla, while in IE, only margin has a value, so we define it first.
Ul {margin: 0; padding: 0 ;}
10. The language attribute is not supported in xhtml1.1 for scripts., You only need to change the code
<SCRIPT type = "text/JavaScript">
11. js page Jump script
HTML code
<Script language = "JavaScript">
Location. Assign ("<a href =" http: // www.jzxue.com "target =" _ blank "> http: // www.jzxue.com </a> ")
</SCRIPT>
12. In IE, use js to remove the focus of all links and images (dashed line boxes generated by clicking)
Function bluring (){
If (event. srcelement. tagname = "A" | event. srcelement. tagname = "IMG") document. Body. Focus ();
}
Document. onfocusin = bluring;
</SCRIPT>
13. shield the code of the right-click class
<Body oncontextmenu = "Return false">
14. Div + CSS layout solutions that cannot be extended after float is used
<Div style = "clear: Both; font-size: 0;"> </div>
Cause: the adaptive height of the background does not inherit the float height. The background inherits the position height in the container where the float bottom line is located. Therefore, the background will find the last label for determination, in this way, we can leave nothing in the above tag. That is, an empty container without a height, so that it can pull the back.
15. JS is used to deal with image deformation. Proportional scaling also prevents image deformation due to the large image size during image loading.
<Script language = "JavaScript" type = "text/JavaScript">
<! --
Function drawimage (imgd, fitwidth, fitheight ){
VaR image = new image ();
Image. src = imgd. SRC;
If (image. width> 0 & image. Height> 0 ){
If (image. width/image. Height> = fitwidth/fitheight ){
If (image. width> fitwidth ){
Imgd. width = fitwidth;
Imgd. Height = (image. Height * fitwidth)/image. width;
} Else {
Imgd. width = image. width;
Imgd. Height = image. height;
}
} Else {
If (image. Height> fitheight ){
Imgd. Height = fitheight;
Imgd. width = (image. Width * fitheight)/image. height;
} Else {
Imgd. width = image. width;
Imgd. Height = image. height;
}
}
}
}
// -->
</SCRIPT>
Application:
A fixed size is set for the image. After using the JS function, the effect is not affected :)
16. Use CSS to implement Alpha transparency supported by Firefox and IE
Filter: alpha (opacity = 50);/* ie */
-Moz-opacity: 0.5;/* Moz + FF */
Opacity: 0.5;/* supports css3 browsers (FF 1.5 is also supported )*/
Ie uses the private attribute filter: alpha (opacity), Moz family uses the Private Attribute-moz-opacity, and the standard attribute is opacity (CSS 3, Moz family supports css3 ). The following value is transparency, with percentages or decimals.
17. horizontally and vertically centered images of unknown sizes in a known-size container
This example of horizontal and vertical center works normally in ie5.x, IE6, IE7, Firefox, opera, Mozilla, and Netscape, and writes two simple styles for IE and non-ie respectively.
Ie uses inline-blocks, and non-ie uses 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 elements in IE are floating.The original margin (margin) will be doubled, but FF will not. Solution
Add: Display: inline; to the code of the floating element, so that the floating is ignored, and IE does not produce double distance.
19. Effect of sinking the Home Page:
. Post-body: First-letter {font-size: 2.5em; float: Left; padding: 0 2px 0 0; line-Height: 1em; font-family: "_ gb2312"; font-weight: bold; color: # B00 ;}
20. translucent Effect
HTML code
<Div style = "width: 100px; Height: 100px; Background-color: # f00; filter: alpha (opacity = 50);/* ie */;-moz-opacity: 0.5;/* Moz + FF */; opacity: 0.5;/* supports css3 browsers (also supported by FF 1.5) */"> I am translucent in any browser
</Div>
Turn: http://mb.5151doc.com/wzsj/ShowArticle.asp? ArticleID = 103
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
