各种CSS bug与技巧

1、容器不扩展问题

Code

解决办法：在divGroup里面加上overflow:hidden;zoom:1;
ps:很多人都是在里面加个清除浮动空标签来解决，其实这个是错误办法。太增加代码量了

8、去掉图片热点链接或超链接的虚线框

<a href="#" onFocus=this.blur()>hemin</a>

9、按钮按下时立体感效果:

a:hover { position:relative; top:1px; left:1px}/* 切记一定要是相对定位 */

11、中英文下划线对齐方式(利用图片的align=”absmiddle”):

<img src="img.gif" align="absmiddle">中英文并排:<a href="/">中文 gollum</a>

12、设为首页代码:

13、加入收藏代码:

<script>
function addfavorite()
{
if (document.all)
{
window.external.addFavorite(‘http://bbs.blueidea.com‘,‘经典论坛‘);
}
else if (window.sidebar)
{
window.sidebar.addPanel(‘经典论坛‘, ‘http://bbs.blueidea.com‘, "");
}
}
</script>
<a href="#" onclick="addfavorite()">把经典论坛加入收藏</a>

14、通过定义em实现小三角效果:

* {
font-size:14px;/* 必须通配字体大小 */
}
em {
display:block;
font:0/0 "宋体";/* 经本人摸索,只有在宋体下才最为标准 */
border:7px solid;/* border值越大,三角形越大 */
border-color:#fff #fff #fff #444;/* 通过改变颜色值,可产生不同效果,自己实验 */
margin-top:5px
}

17、描边文字效果:

<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>

18、input鼠标经过时改变颜色:

input {star : expression(onmouseover=function(){this.style.backgroundColor=”#FF0000″},onmouseout=function(){this.style.backgroundColor=”#FFFFFF”}) }

27、怎么样才能让层显示在FLASH之上呢:

Code

ps:解决的办法是给FLASH设置透明

28、怎样使一个层垂直居中于浏览器中:

Code

ps:这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二

30、CSS透明属性:

.transparent_class {
   filter:alpha(opacity=50);/*; 这个是为IE6设的，可取值在0-100，其它三个0到1. */
   -moz-opacity:0.5;/*这个是为了支持一些老版本的Mozilla浏览器。*/
   -khtml-opacity: 0.5;/*这个为了支持一些老版本的Safari浏览器。 */
   opacity: 0.5;/*opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera. */
}

33、 IE6下:hover失效问题解决方案 :

a:hover{zoom:1} /*增加zoom, display, padding等等属性也可*/

36、进入网页加入渐显切换效果:

posted on 2009-11-03 09:48 念时阅读(362) 评论(0) 编辑收藏举报