1. Button inside, letter-spacing pitch adjustment text
Problem Description: After setting a modern browser can not make the text centered horizontally, would be right,
reason: after the last word there exist spacing
Solution: Use spaces to solve; or with paddding-left: 2px solve
2. compatible ie6,7,8 transparent background content opaque solution :
RGBA (A, B, C, 0.8);
filter: ProgID: DXImageTransform.Microsoft.Alpha (Opacity = 80);
-ms-filter: "ProgID: DXImageTransform.Microsoft.Alpha (Opacity = 80)"; // sometimes problem
3. The line spacing is provided
with line-height: number /%;
4. The text shadow CSS3
text-Shadow: H-v-Shadow Shadow Blur Color; see the dream of the sky http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-text-shadow.html
5. The INPUT block shadow CSS3
Box-Shadow: H-V-Shadow Color Shadow Spread the inset from Blur; see w3plus
6. Under ie8 margin-top Failure
- When the div above div is absolutely positioned or floating, IE8 under provided invalid div the margin-top,
solution: separately provided hack to ie8, float; or if the div is absolute positioning, it can be shifted . beneath the div is
- also border the parent element is not set, the sub-element setting margin-top invalid
solution: parent element disposed overflow: hidden; parent element is provided a transparent border; margin-top change as padding-top
7. without js achieve similar functionality placeholder
<input type = "text" value = " Please enter your name" onfocus = "javascript: if ( this.value = ' Please enter your name') {this.value = ' ';} "onblur =" javascript : if (this.value!) {this.value =' enter your name ';} "class =" name "NO =" 0 "/>
8. The vertical text (like Mongolian)
for temporary use li float, width font size to solve
ie have writing-model: tb-rl properties can be achieved, yet there are other browsers
9. Enter the input character input box displayed vertical
- input frame to achieve the effect vertical writing-model supports property ie browsers, other browsers Write found;
- <TextArea cols = ". 1" rows = "10"> </ TextArea> can be achieved, and define a column OK, but the scroll bar will appear.
to set the scroll bar textarea text field is turned on, using style.overflow-x attributes to control. Such as: If you want to hide the horizontal scroll bar of the text field, increasing the overflow-x property controls a style attribute as follows:
<TextArea ID = txtComments style = "overflow-x: hidden"> </ TextArea>
appropriate, to Hide vertical scroll bar:
<TextArea ID = txtComments style = "Y-overflow: hidden"> </ TextArea>
If code control, it may be necessary to achieve the following code:
. the document.all ( "txtComments") = style.overflowX " hidden ";
overflow-X, the possible values overflow-y: visible (default value), hidden, auto, scroll.
10. Special font
font package technology, background processing
11. The option to set the background color
was added in the option tag style = ""; (css there is provided no effect)
12. The phone number regular (newer)
/(^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$)|(^(0|86|17951 ) (13 [0-9] |? 15 [012356789] | 17 [678] | 18 [0-9] | 14 [57]) [0-9] {8} $) /
13. The phone font size
html disposed inside fontsize 1rem = 12px
different resolutions correspond to different sizes
generally corresponding to 320 12px, 375 corresponding to 14,414 16px correspond, the phone 16px larger
html {fontsize: 62.5%; / * 10 ÷ 16 × 100% = 62.5% * /}
body {font-size: 1.4rem; / * = 1.4 × 10px 14px * /}
h1 of {font-size: 2.4rem; / * = 2.4 × 10px 24px * /}
14. The text of the button input button is not centered
padding, line-height resolve
15. A IE parent elements float: left; child elements float: right; the parent element is not set width and height, float: left will fail
to solve: the width of the parent element is provided
16. bubble, click on the menu that appears, click elsewhere to hide (flow of events)
// Click #a elements, menu, and then click once on any element in the body, hidden menu
$ ( "# A"). ON ( "the Click", function (E) {
$ ( "# the MENU"). Show ( );
$ (the Document) the .one ( "the click", function () {
$ ( "# the MENU") hide ();.
});
e.stopPropagation (); // (prevents trapping)
});
// click menu itself, to prevent capture
$ ( "# mENU") ON ( "the Click", function (E) {.
e.stopPropagation ();
});
17. The jQuery get value drop-down list of
values acquired select the selected option: $ ( "# select") find ( "option: selected") val ();..
See blog http://blog.csdn.net/ cui_angel / article / details / 8000432
18. Super simple horizontal accordion codes jquery
链式操作的体现
$(".num").click(function(){
$(this).css({"background-color":"#c20000"}).find("h1").css("color","#fff");
$(this).parent().siblings().find(".num").css({"background-color":"#e5e5e5"}).find("h1").css("color","#8a8a8a");
$(this).parent().siblings().find("div:last").css({width:0});
$(this).next().animate({width:"315px"},500);
});