CSS实用技巧及常见问题
日期：2010-02-12 浏览次数：21487 次
个人总结的一些css实用技巧及必须得注意的事项:
1.注释须知:html中注释不能这样写:
2.CSS注释切记在/*之后及*/之前空一格,否则在有些语言中会出问题,正确写法:
5.按钮按下时立体感效果:
css部分:
1.注释须知:html中注释不能这样写:
复制内容到剪贴板
这种写法,FF中会忽略其下面的内容详见:http://www.bluebirdsky.cn/article.asp?id=153.代码:
<div></div><!--------这是错误写法------->
<div></div><!--=======这是正确写法========-->2.CSS注释切记在/*之后及*/之前空一格,否则在有些语言中会出问题,正确写法:
复制内容到剪贴板
3.最简单区分IE与FF的HACK写法(具体原理请参考:http://www.bluebirdsky.cn/article.asp?id=65):
代码:
#div{style}/* 注释前后要空格 */复制内容到剪贴板
4.空div在IE(FF中没有)是有默认高度的,可以用定义:
代码:
#layer{
padding-top:20px;/* FF中定义 */
*padding-top:10px;/* IE中定义 */
}复制内容到剪贴板
的方式去掉默认高度.代码:
div { witdh:100%; background:#9c0; ling-height:0}5.按钮按下时立体感效果:
复制内容到剪贴板
6.关闭当前页面代码:
代码:
a:hover { position:relative; top:1px; left:1px}/* 切记一定要是相对定位 */复制内容到剪贴板
7.整站变灰代码(加到样式表中):
代码:
<div >关闭当前页面</div>复制内容到剪贴板
8.设为首页代码:
代码:
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}复制内容到剪贴板
9.加入收藏代码:
代码:
<span style="CURSOR:hand">设为首页</span>复制内容到剪贴板
10.导航间竖线的定义方法:代码:
<script language="JavaScript">
function bluebirdsky()
{window.external.addFavorite('http://www.bluebirdsky.cn','Bluebirdsky');}
if (document.all)document.write('<a href="##" title="把“Bluebirdsky”加入您的收藏夹！">收藏本站</a>')
</script>css部分:
复制内容到剪贴板
html部分:
代码:
.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;
}复制内容到剪贴板
11.中英文下划线对齐方式(利用图片的align="absmiddle"):
代码:
<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>复制内容到剪贴板
12.li交替显示背景代码:
代码:
<img src="img.gif" align="absmiddle">中英文并排:<a href="/">中文 gollum</a>复制内容到剪贴板
13.利用css rese
代码:
ul {
list-style:none;
font-size:12px;
line-height:20px;
color:#666;
}
ul li {
background-color:expression(this.sourceIndex%2==0?'#EAF8FD':'#ffffff');
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
