CSS Practical tips and FAQs

Personal summary of some of the CSS practical skills and must pay attention to matters:

1. Note: HTML annotations cannot be written in this way: copy content to clipboard

Code:

<div></div><!--------这是错误写法------->
<div></div><!--=======这是正确写法========-->This type of writing, the FF will ignore its contents as detailed in the following: http://www.bluebirdsky.cn/article.asp?id=153.
2.CSS Note keep in mind after/* and before/* blank, otherwise there will be problems in some languages, the correct wording: copy content to clipboard

Code:

#div{style}/* 注释前后要空格 */3. The simplest distinction between IE and FF hack writing (Specific principles refer to: http://www.bluebirdsky.cn/article.asp?id=65): copy content to clipboard

Code:

#layer{
    padding-top:20px;/* FF中定义 */
    *padding-top:10px;/* IE中定义 */
}4. Empty div in IE (FF) is a default height, you can use the definition: copy content to clipboard

Code:

div { witdh:100%; background:#9c0; ling-height:0}Way to remove the default height.
5. Three-dimensional effect when the button is pressed: copy content to clipboard

Code:

a:hover { position:relative; top:1px; left:1px}/* 切记一定要是相对定位 */6. Close the current page code: copy content to clipboard

Code:

<div >关闭当前页面</div>7. Whole station variable Ash code (add to style sheet): copy content to clipboard

Code:

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}8. Set the homepage code: copy content to clipboard

Code:

<span style="CURSOR:hand">设为首页</span>9. Add Favorite Code: copy content to clipboard

Code:

<script language="JavaScript">
function bluebirdsky()
{window.external.addFavorite('http://www.bluebirdsky.cn','Bluebirdsky');}
if (document.all)document.write('<a href="##" title="把“Bluebirdsky”加入您的收藏夹！">收藏本站</a>')
</script>10. The definition method of vertical line between navigation:
CSS section: copy content to clipboard

Code:

.nav {
    width:408px;/* 这个宽度一定要按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: copy content to clipboard

Code:

<div class="nav">
  <ul>
    <li><a href="show.htm">产品展示</a></li>
    <li><a href="case.htm">成功案例</a></li>
    <li><a href="service.htm">客户服务</a></li>
    <li><a href="download.htm">下载中心</a></li>
  </ul>
</div>11. Underline alignment in Chinese and English (take advantage of the align= "Absmiddle" of the picture): copy content to clipboard

Code:

中英文并排:<a href="/">中文 gollum</a>12.li Alternate display Background code: copy content to clipboard

Code:

ul {
    list-style:none;
    font-size:12px;
    line-height:20px;
    color:#666;
}
ul li {
background-color:expression(this.sourceIndex%2==0?'#EAF8FD':'#ffffff');
}13. Using CSS reset to circumvent the IE6 password form and text is not long, in the CSS reset to add: copy content to clipboard

Code:

input {
    font-family:Arial, Helvetica, sans-serif;
}14.FF when the top margin is invalid, respond to the parent div to write Overflow:hidden or Overflow:auto, or write float:left in the child Div; Display:inline.
15. Stroke text Effect: copy content to clipboard

Code:

<div style="position:relative; width:200px; height:25px; line-height:25px; text-align:center; font-size:14px; color:#fff; background:#9c0;">
这是描边文字<span style="position:absolute; left:-1px; top:-1px; color:#444;width:200px; height:25px; display:block">这是描边文字</span>
</div>16. Fillet background, the simplest way is the PS fillet line, and then use the table to achieve adaptive, see: http://www.bluebirdsky.cn/article.asp?id=170.
17. Achieve small triangle effect by defining EM: copy content to clipboard

Code:

* {
    font-size:14px;/* 必须通配字体大小 */
}
em {
    display:block;
    font:0/0 "宋体";/* 经本人摸索,只有在宋体下才最为标准 */
    border:7px solid;/* border值越大,三角形越大 */
    border-color:#fff #fff #fff #444;/* 通过改变颜色值,可产生不同效果,自己实验 */
    margin-top:5px
}After adding the above code in the style, you can get the small triangle effect with <em></em> in the body.
18. If the test found in the FF layer dislocation or the bottom of the layer ran to the top, sorta is not clear the reason for the float, in the problem that layer style to add: copy content to clipboard

Code:

clear:bothCan.
19.ie6 when the layer height below 10px, there will be height on the definition of 10px effect, the simplest way is to add in the layer style: copy content to clipboard

Code:

font-size:0;Immediately beat it back to its original form.
20. The layout of the column division follow the 62%:38% principle, see: http://www.bluebirdsky.cn/article.asp?id=165.
21. When the text segment is very wide inside the container, truncate the text segment and continue with the ellipsis: copy content to clipboard

Code:

overflow:hidden;text-overflow:ellipsis;These two are conjoined, single use has a problem. And under the FF seemingly ineffective, groping.
22. In order for the code to look neat, don't forget to execute it in the DW after you write the code: command---Apply source format:

The hack of the line-block of 23.display: copy content to clipboard

Code:

.menu{
    display:-moz-inline-stack;/* 专属FF也可以用-moz-inline-box定义 */
    *display:inline;
    zoom:1;/* 上一行和此行用于激活IE6/7的layout,实现类似效果 */
}Detailed Application Details: http://www.bluebirdsky.cn/article.asp?id=176
24. Use of the Transparency filter: copy content to clipboard

Code:

.navbg {
    filter:alpha(opacity=40);       /* IE */
    -moz-opacity:0.4;               /* Moz + FF */
    opacity: 0.4;                   /* 支持CSS3的浏览器（FF 1.5也支持）*/
}25. One column fixed, one column adaptive method: http://bluebirdsky.cn/article.asp?id=183.
26. In the Web Standard, H1 can only appear once on the same page. This concept knows a lot of people, but when used, the person who ignores is also quite much.
27. Table border color definition can not be abbreviated, such as: copy content to clipboard

Code:

bordercolor="#3399cc"cannot be written as: copy content to clipboard

Code:

bordercolor="#39c"28. Row height definition is the most convenient way to add in the body: copy content to clipboard

Code:

line-height:1.5;   /* 1.5不能有单位,含义为字体大小的1.5倍,可自定义 */If some text does not want to be the standard for this line, you can redefine it based on CSS precedence.
28. When the image does not exist, a general picture can be used instead of the display: copy content to clipboard

Code:

29. Retrieves or sets the stacking order of objects: copy content to clipboard

Code:

z-index：auto|numberThis property applies only to objects when the Position property value is relative or absolute. See a demo.
30. Align a layer vertically in the browser: copy content to clipboard

Code:

div {
    position:absolute;
    top:50%;
    left:50%;
    margin:-100px 0 0 -100px;
    width:200px;
    height:200px;
    border:1px solid red;
    }Detailed case please refer to: http://www.bluebirdsky.cn/article.asp?id=210
31. How to arrange three columns horizontally copy content to clipboard

Code:

div {
    float:left;
    margin:1px;
    width:200px;
    height:200px;
    background:orange
    }32. Add the following code to the global CSS, to the need to close the div plus class= "clearfix" can be, once and for all. copy content to clipboard

Code:

/* Clear Fix */
.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */33. If you need to add style to the contents of a label, you need to set display:block (common to navigation tags).
........................