XHTML+CSS Basic Knowledge

1. The text force does not wrap, the superfluous part uses the ellipsis to replace
White-space:nowrap;text-overflow:ellipsis;overflow:hidden;
2. Firefox,<textarea> prohibit drag and pull
Resize:none; or min-width:;max-width:;min-height:;max-height:;
3. Firefox,<label> into multiple input, text requires multiple clicks to be able to type, radio is not possible to implement a single selection
Use <p></p> Mark to write
4. <a> Mark Remove Dashed box
A{outline:none;blr:expression (This.onfocus=this.blur ());}
5.5px blank appears below
Img{display:block;}
6. Banner Image Full Screen center display
<div>

</div>
div {position:relative;overflow:hidden;height:200px;text-align:center;}
Div img{position:absolute;left:50%;top:0;margin-left:-1250px;}
(Note: margin-left: The resulting value is the size of the IMG divided by 2.) )
7. Transparent Background
Filter:alpha (opacity=80); opacity:0.8;
8. <p></p> can change the content directly on the Web page to specify whether the user is allowed to edit the content
Contenteditable= "true"
9.input lost focus text disappears
<input type= "text" value= "Please enter user name" class= "In_serch"/>
10.placeholder Setting Color
input::-webkit-input-placeholder{color: #4c535d;}
Input::-moz-placeholder {color: #4c535d;}
11.chrome Input[type=text] Placeholder not vertically centered solution
Set the line-height to normal;
12.input Default Properties
-webkit-appearance:none
Outline:none;
13. Font size abbreviation
font:400 14px/1.5 Arial, "Lucida Grande", Verdana, "Microsoft Yahei"

The evils of IE6 and all kinds of incurable diseases:

IE6 PNG Shadow issue:
_background:none;_filter:progid:dximagetransform.microsoft.alphaimageloader (src= ' toalogin/sj.png ');

Display:inline-block Blank spacing Solution:
. dib-wrap {
font-size:0;/* All browsers */
*word-spacing:-1px;/* IE6, 7 */
}
. Dib-wrap. dib{
font-size:12px;
Letter-spacing:normal;
Word-spacing:normal;
Vertical-align:top;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* letter-spacing in Firefox causes horizontal displacement of elements that are out of normal flow */
. dib-wrap{
letter-spacing:-5px;/* Safari, etc. does not support browsers with a font size of 0, and N adjusts to the parent font */
}
. dib {
Display:inline-block;
*display:inline;
*zoom:1;
}

Uncheck the dotted box after clicking on IE6
A{outline:none;blr:expression (This.onfocus=this.blur ());}

IE6 Debug:
<script type= "Text/javascript" src= "Http://stg.pa18.com/pa18shopahhs/_test/firebug-lite-1.4/firebug-lite.js" ></script>

Set the fixed size:
window.open (' queryguaranteedetail.jsp ', ' newwindow ', ' height=700, width=800, top=5, left=0, Toolbar=no, Menubar=no, Scrollbars=yes, Resizable=yes,location=no, Status=no ')

CSS hack:
"_" IE6 exclusive hack
"+" IE7 exclusive hack
"*" IE

Pure CSS implements arrow effects:
. triangle{
Display:inline-block;
width:0;
height:0;
Overflow:hidden;
Vertical-align:middle;
border-width:10px 10px 0 10px;
Border-color: #000 transparent transparent transparent;
Border-style:solid dashed none dashed;
}

Transparency:
. transparent_class {
Filter:alpha (OPACITY=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}

XHTML+CSS Basic Knowledge