各种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、设为首页代码:

<span onclick="var strHref=window.location.href;this.style.behavior=’url(#default#homepage)’;this.setHomePage(’http://www.hemin.cn’);" style="cursor:pointer">设为首页</span>

13、加入收藏代码:

  1. <script>
  2. function addfavorite()
  3. {
  4.    if (document.all)
  5.    {
  6.       window.external.addFavorite(http://bbs.blueidea.com,经典论坛);
  7.    }
  8.    else if (window.sidebar)
  9.    {
  10.       window.sidebar.addPanel(经典论坛, http://bbs.blueidea.com, "");
  11.    }
  12. } 
  13. </script>
  14. <a href="#" onclick="addfavorite()">把经典论坛加入收藏</a>
14、通过定义em实现小三角效果:

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

  1. <div style="position:relative; width:200px; height:25px; line-height:25px; text-align:center; font-size:14px; color:#fff; background:#9c0;">
  2. 这是描边文字<span style="position:absolute; left:-1px; top:-1px; color:#444;width:200px; height:25px; display:block">这是描边文字</span>
  3. </div>
18、input鼠标经过时改变颜色:

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

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

Code

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

<param name="wmode" value="transparent" />

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, SafariOpera. */
}

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

a:hover{zoom:1} /*增加zoom, display, padding等等属性也可*/
36、进入网页加入渐显切换效果:

<meta http-equiv="Page-Enter" content="blendTrans(Duration=1)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1)" />
<a href="http://www.hemin.cn">hemin</a>
 

 

 

 

 

 

 

 

 

 

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

细节决定成败!态度决定一切!