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="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.中英文下划线对齐方式(利用图片的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:expression(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.圆角背景,最简单的方法就是PS圆角线条,然后用表格实现自适应
17.通过定义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>即可得到小三角效果.
18.如果在FF中测试发现层错位或者下面的层跑到顶上了,八九不离十是没清除浮动的原因,在出问题那个层样式中加入:
clear:both
即可.
19.IE6下当层高低于10px时,会出现高度在定义值上加10px的效果,最简单的方法就是在该层样式中加入:
font-size:0;
立马将其打回原形.
更多的css实用技巧及必须得注意的事项请到论坛查看: http://BBS.TC711.COM
【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】
来源:
互联网
日期:2008-12-26