使用html和css的一些经验

1.注释须知:html中注释不能这样写:
　　<div></div><!--------这是错误写法------->
　　<div></div><!--=======这是正确写法========-->
　　这种写法,FF中会忽略其下面的内容.

　　2.CSS注释切记在/*之后及*/之前空一格,否则在有些语言中会出问题,正确写法:
　　#div{style}/* 注释前后要空格 */

　　3.最简单区分IE与FF的HACK写法
　　#layer{
　　padding-top:20px;/* FF中定义 */
　　*padding-top:10px;/* IE中定义 */
　　}

　　4.空div在IE(FF中没有)是有默认高度的,可以用定义:
　　div{ witdh:100%; background:#9c0; ling-height:0}
　　的方式去掉默认高度.

　　5.按钮按下时立体感效果:
　　a:hover{ position:relative; top:1px; left:1px}/* 切记一定要是相对定位 */

　　6.关闭当前页面代码:
　　<div onclick="window.close();">关闭当前页面</div>

　　7.整站变灰代码(加到样式表中):
　　html{ filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

　　8.设为首页代码:
　　<span onclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('http://keleyi.com');" style="CURSOR:hand;">设为首页</span>

　　9.加入收藏代码:
　　<script language="JavaScript">
　　function ITRenCai()
　　{window.external.addFavorite('http://keleyi.com','柯乐义');}
　　if (document.all)document.write('<a href="javascript:void(0);" onClick="ITRenCai();" title="把“柯乐义网”加入您的收藏夹！">收藏本站</a>')
　　</script>

　　10.导航间竖线的定义方法:
　　css部分:
　　.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部分:
　　<div class="nav">
　　<ul>
<li><a href="http://keleyi.com/">柯乐义首页</a></li>
<li><a href="http://keleyi.com/menu/webqd/">Web前端</a></li>
<li><a href="http://keleyi.com/menu/jquery/">jquery资源</a></li>
<li><a href="http://keleyi.com/menu/csharp/">C#资讯</a></li>
<li><a href="http://keleyi.com/menu/other/">网络编程</a></li>
　　</ul>
　　</div>

　　11.中英文下划线对齐方式(利用图片的align="absmiddle"):
　　<img src="img.gif" align="absmiddle">中英文并排:<a href="/">中文 gollum</a>

　　12.li交替显示背景代码:
　　ul{
　　list-style:none;
　　font-size:12px;
　　line-height:20px;
　　color:#666;
　　}
　　ul li{
　　background-color:e?xpression(this.sourceIndex%2==0?'#EAF8FD':'#ffffff');
　　}

　　13.利用css reset规避IE6下密码表单和文本不等长的问题,在css reset中加入:
　　input{font-family:Arial, Helvetica, sans-serif;}

　　14.FF下上边距无效时,及时反应给父级div上写入overflow:hidden或overflow:auto;也可以在子级div中写入float:left; display:inline.

　　15.描边文字效果:
　　<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.通过定义em实现小三角效果:
　　*{font-size:14px;/* 必须通配字体大小 */}
　　em{display:block;
　　font:0/0 "宋体";/* 经本人摸索,只有在宋体下才最为标准 */
　　border:7px solid;/* border值越大,三角形越大 */
　　border-color:#fff #fff #fff #444;/* 通过改变颜色值,可产生不同效果,自己实验 */
　　margin-top:5px;
　　}
　　在样式中加入以上代码后,在body中用<em></em>即可得到小三角效果.

　　17.如果在FF中测试发现层错位或者下面的层跑到顶上了,八九不离十是没清除浮动的原因,在出问题那个层样式中加入:
　　clear:both 即可.

　　18.IE6下当层高低于10px时,会出现高度在定义值上加10px的效果,最简单的方法就是在该层样式中加入:
　　font-size:0;
　　立马将其打回原形.

　　19.布局中栏目分割遵循62%:38%的原则.

　　20.文字段在容器内超宽时,截断该文字段并且续以省略号:
　　overflow:hidden;text-overflow:ellipsis;
　　这两具是连体的,单一用有问题.并且在FF下貌似无效,摸索中..

　　21.display之line-block的HACK:
　　.menu{
　　display:-moz-inline-stack;/* 专属FF也可以用-moz-inline-box定义 */
　　*display:inline;
　　zoom:1;/* 上一行和此行用于激活IE6/7的layout,实现类似效果 */
　　}

　　22.透明度滤镜的用法:
　　.navbg {
　　filter:alpha(opacity=40); /* IE */
　　-moz-opacity:0.4; /* Moz + FF */
　　opacity: 0.4; /* 支持CSS3的浏览器（FF 1.5也支持）*/
　　}

　　23.在WEB标准中,h1在同一页面中只能出现一次.这个概念知道的人很多,但使用时忽略的人也相当的多.

　　24.表格边框颜色的定义不能缩写,比如:
　　bordercolor="#3399cc"
　　不能写成:
　　bordercolor="#39c"

　　25.行高定义最便捷的方法,在body中加入:
　　line-height:1.5; /* 1.5不能有单位,含义为字体大小的1.5倍,可自定义 */
　　如果某些文本不想以这个行高为标准,可以根据CSS优先级重新定义.

　　26.当图像不存在时,可用一张通用图片代替显示:
　　<img src="data:image.gif" onerror="this.src='noimage.gif'" />

　　27. 检索或设置对象的层叠顺序:
　　z-index：auto|number
　　此属性仅仅作用于position属性值为relative 或absolute时的对象.看个DEMO

　　28.使一个层垂直居中于浏览器中:
　　div {
　　position:absolute;
　　top:50%;
　　left:50%;
　　margin:-100px 0 0 -100px;
　　width:200px;
　　height:200px;
　　border:1px solid red;
　　}