Experience in using html and css

Experience in using html and css

1. Notes: annotations in html cannot be written as follows:
<Div> </div> <! -------- This is an incorrect syntax ------->
<Div> </div> <! -- ======= This is the correct way to write ======== -->
In this way, FF ignores the following content.

2. CSS comments should be left blank after/* and */. Otherwise, problems may occur in some languages. The correct syntax is as follows:
# Div {style}/* spaces before and after comments */

3. The easiest way to differentiate HACK writing between IE and FF
# Layer {
Padding-top: 20px;/* FF definition */
* Padding-top: 10px;/* defined in IE */
}

4. The empty div has the default height in IE (not in FF), which can be defined as follows:
Div {witdh: 100%; background: #9c0; ling-height: 0}
To remove the default height.

5. stereoscopic effect when the button is pressed:
A: hover {position: relative; top: 1px; left: 1px}/* It must be relatively positioned */

6. Close the current page code:
<Div onclick = "window. close ();"> close the current page </div>

7. the whole site becomes grayed out code (added to the style sheet ):
Html {filter: progid: DXImageTransform. Microsoft. BasicImage (grayscale = 1 );}

8. Set as homepage code:
<Span onclick = "var strHref = window. location. href; this. style. behavior = 'url (# default # homepage) '; this. setHomePage ('HTTP: // keleyi.com '); "style =" CURSOR: hand; "> set as homepage </span>

9. Add the code to favorites:
<Script language = "JavaScript">
Function ITRenCai ()
{Window. external. addFavorite ('HTTP: // keleyi.com ', 'corei ');}
If (document. all) document. write ('<a href = "javascript: void (0);" onClick = "ITRenCai ();" title = "add" Ke leyi "to your favorites! "> Add to favorites </a> ')
</Script>

10. How to define a vertical line between navigation Bars:
Css section:
. Nav {
Width: 408px;/* The width must be calculated according to the width in li */
Float: right;
Display: inline;
Overflow: hidden;
}
. Nav ul {
Margin: 0;
Padding: 0
}
. Nav li {
Float: right;
Width: 80px;
Height: auto;
Text-align: center;
Padding: 0 10px;
Border-right: 1px solid #444;
Margin-right:-1px;
}
Html section:
<Div class = "nav">
<Ul>
<Li> <a href = "http://keleyi.com/"> ke leyi homepage </a> </li>
<Li> <a href = "http://keleyi.com/menu/webqd/"> Web Front-end </a> </li>
<Li> <a href = "http://keleyi.com/menu/jquery/"> jquery resources </a> </li>
<Li> <a href = "http://keleyi.com/menu/csharp/"> C # Information </a> </li>
<Li> <a href = "http://keleyi.com/menu/other/"> network programming </a> </li>
</Ul>
</Div>

11. align = "absmiddle "):
Chinese and English: <a href = "/"> Chinese gollum </a>

12. li alternate Display Background code:
Ul {
List-style: none;
Font-size: 12px;
Line-height: 20px;
Color: #666;
}
Ul li {
　　
}

13. Use css reset to avoid the problem of unequal length of password forms and text in IE6. Add the following to css reset:
Input {font-family: Arial, Helvetica, sans-serif ;}

14. when the top margin of FF is invalid, overflow: hidden or overflow: auto is written to the parent div. You can also write float: left; display: inline in the Child div.

15. Stroke text effect:
<Div style = "position: relative; width: 200px; height: 25px; line-height: 25px; text-align: center; font-size: 14px; color: # fff; background: #9c0; ">
This is the stroke text <span style = "position: absolute; left:-1px; top:-1px; color: #444; width: 200px; height: 25px; display: block "> This is stroke text </span>
</Div>

16. Implement the small triangle effect by defining em:
* {Font-size: 14px;/* the font size must be equal to the font size */}
Em {display: block;
Font: 0/0 "";/* after self-exploration, only under is the most standard */
Border: 7px solid;/* The larger the border value, the larger the triangle */
Border-color: # fff #444;/* experiment on your own by changing the color value */
Margin-top: 5px;
}
After adding the above Code to the style, use <em> </em> in the body to get the small triangle effect.

17. If the test in FF finds that the layer is misplaced or the lower layer runs to the top, the reason is that the float is not cleared. Add the following to the problematic layer style:
Clear: both.

18. When the height of IE6 is lower than 10px, the effect of adding 10px to the definition value is displayed. The simplest method is to add the following to the layer style:
Font-size: 0;
Immediately bring it back to its original shape.

19. In the layout, column separation follows the 62%: 38% principle.

20. When the text segment is too wide in the container, the text segment is truncated and the ellipsis is continued:
Overflow: hidden; text-overflow: ellipsis;
These two devices are connected, and there is a problem with a single use. And it seems to be ineffective under FF. I'm exploring ..

21. display line-block HACK:
. Menu {
Display:-moz-inline-stack;/* The exclusive FF can also be defined using-moz-inline-box */
* Display: inline;
Zoom: 1;/* the last line and this line are used to activate layout of IE6/7 to achieve similar results */
}

22. usage of the transparency filter:
. Navbg {
Filter: alpha (opacity = 40);/* IE */
-Moz-opacity: 0.4;/* Moz + FF */
Opacity: 0.4;/* supports CSS3 browsers (FF 1.5 is also supported )*/
}

23. In the WEB standard, h1 can only appear once on the same page. Many people know this concept, but many others are ignored during use.

24. The table border color definition cannot be abbreviated, for example:
Bordercolor = "# 3399cc"
Cannot be written:
Bordercolor = "# 39c"

25. Add the following to the body:
Line-height: 1.5;/* 1.5 cannot have a unit, meaning 1.5 times the font size, customizable */
If some text does not want to use the line height as the standard, you can redefine it based on the CSS priority.

26. When the image does not exist, a general image can be used instead of the display:

27. Retrieve or set the cascade order of objects:
Z-index: auto | number
This attribute only acts on the object when the position attribute value is relative or absolute. Check a DEMO.

28. Align a layer vertically in the browser:
Div {
Position: absolute;
Top: 50%;
Left: 50%;
Margin:-100px 0 0-100px;
Width: 200px;
Height: 200px;
Border: 1px solid red;
}