Web h5 Common Code Summary

Note: This article original, reproduced please indicate the source

1. To center the picture and text horizontally, give the picture CSS style: vertical-align:middle;
Vertical-align:middle, is the center of the element aligned to the center of the surrounding element.

2. Give a div transparent background, add css:opacity:0.7 to div; Filter:alpha (opacity=70);

3. Compatible with each browser, add CSS style: Filter:alpha (opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5;

4. How to change the Password box by CSS is the black point style, for example, to change to * asterisk, how to do?
<input id= "Mima" onkeyup= "document.getElementById (' a '). Value=this.value.replace (/./g, '% ');"/>
That percent changes with you, change what show what.

JS control, input password display ' * ' Link address: http://www.xuebuyuan.com/1346201.html

5. Compatible with IE and FF line-wrapping CSS recommended style: Word-wrap:break-word; Overflow:hidden; (This is the best way)

In general, you only need to set the width limit, for example, only set the maximum width of 300px (max-width:300px), and then use Overflow:hidden to hide the overflow image for the parent, and for compatibility IE6 we set a width:expression (This.width > 300?) "300px": this.width);

The following method can be used to solve the background transparency, text opacity problem:
Div{background:rgba (0,0,0,0.2) None repeat scroll!important;/* Achieve FF background transparent, text opaque */
Background: #000; Filter:alpha (OPACITY=20);/* Implement IE background transparent */
width:500px; height:500px; Color: #F30; font-size:32px; Font-weight:bold;}
Div p{position:relative;} /* Implement IE text opaque */

6. Remove Chrome from Google browser input with border
Add the code to the CSS:
1 Input,button,select,textarea{outline:none}
2 Textarea{resize:none}
However, in the lower version of the Google browser and the 360 speed browser will still appear, the most perfect or change the border style, that is, the border is set to the same size as the design of the border color, that is: border: #f7bed8 1px solid;

7.width:90%;/* to browsers that do not support calc () */
Width:-moz-calc (100%-(10px + 5px) * 2);
Width:-webkit-calc (100%-(10px + 5px) * 2);
Width:calc (100%-(10px + 5px) * 2);

The Border-collapse border of the 8.CSS attribute table is merged to table with a property border-collapse:collapse;

9. At the beginning of the Web site HTML file, add the viewport meta tag to tell the browser that the viewport width is equal to the device screen width without initial scaling. The code is as follows:
<meta name= "viewport" content= "width=device-width, initial-scale=1"/>

Webstrom shortcut key: META:VP Press the TAB key

10. Add rules for different screen resolutions at the end of the CSS file. For example, use the following code, you can make the screen width of less than 480 pixels of devices (such as the iphone, etc.), the Web side bar hides the middle content bar width automatically adjust. The following code is for Z-blog,wordpress-related label names just modify it.
@media screen and (max-device-width:480px) {
#divMain {
Float:none;
Width:auto;
}
#divSidebar {
Display:none;
}
}

11. The page uses relative fonts on the HTML page do not use absolute font (PX), and to use relative font (EM), for most browsers, usually with the EM = PX/16 conversion, such as 16px equals 1em.

12.HTML prohibit web text copying, prohibit viewing source code
(1) Prohibit copying
Put it in any position
<script language=javascript>
Window.onselectstart=function () {return false;}//Disable selection
Window.oncopy=function () {return false;}//Prohibit replication
</script>

(2) Disable viewing of source code
Put it in the head.
<script>
function Stop () {
return false;
}
Document.oncontextmenu=stop;
</script>

13.wow.js-page scrolling animation (Wow.js can make the page more interesting by animating it when scrolling. )

[Email protected] {
Font-family: ' founder cartoon simplified regular ';
Src:url (' founder cartoon Simplified EoT ');
Src:local (' founder cartoon Simplified Regular '),
Local (' founder Cartoon Simplified '),
URL (' founder Cartoon Simplified Woff ') format (' Woff '),
URL (' founder cartoon simplified. TTF ') format (' TrueType '),
URL (' founder cartoon simplified svg# founder Cartoon Simplified ') format (' SVG ');
}

15.var width= ($ (window). Width ()-1100)/2;
$ ('. Side-nav-wrap '). CSS (' left ', width-152+ ' px ');

16. Solve the problem of color display on the button buttons of input on iOS phone
Input[type=button], Input[type=submit], Input[type=file], button {cursor:pointer;-webkit-appearance:none;}

17. When the phone clicks on the text of input, the background color appears.
-webkit-tap-highlight-color:rgba (0,0,0,0);

18. Solve 1920px Picture Horizontal center <div style= "Text-align:center; position:absolute;top:0;left:50%;width:1000px;height:420px;margin-top:0px;margin-left:-960px "></div>

19. Text up and down around the shadow: text-shadow:1px 1px 3px white,0-1px 3px white,-1px 0px 3px white;

20.<input type= "text" id= "keywords" name= "keywords" value= "enter search keywords" onfocus= "javascript:if (this.value== ' Enter search keywords ') ) this.value= ";" Onblur= "Javascript:if (this.value==") this.value= ' Enter search keywords '; />

21. Remove the textarea the lower right corner of the default three gray slash Resize:none;

Web h5 Common Code Summary