zoukankan      html  css  js  c++  java
  • CSS实用技巧及常见问题

     IE6背景图片缓存bug解决方法:背景图片缓存bug是IE6众多常见bug之一

    a.方法一:使用Javascript脚本【推荐】

    <!--[if IE 6]>  
    <script type="text/javascript"><!--  
    document.execCommand("BackgroundImageCache", false, true);  
    // --></script>  
    <![endif]-->  

    b.方法二:使用CSS表达式
    html {}  
    {    
    filter:e­xpression(document.execCommand("BackgroundImageCache", false, true));    

    IE6一直是前端工作者的痛。如果你在定义某个层中的图片最大宽度时,你会发现,MAX-WIDTH和MIN-HEIGHT对IE6是无效的。 

    #div img{
        max-600px;
        min-600px;
        _e­xpression((documentElement.clientWidth >600) ? "600px" : "auto" ); /*定义IE6最大宽度*/
        _e­xpression((documentElement.clientWidth <600) ? "600px" : "auto" ); /*定义IE6最小宽度*/
    }

    HTML中的注释如果写到了CSS中,会将注释下所有的CSS失效,比如: 

    .e_catatree{
        height:21px;
        color:#ccc;
        text-align:right;
        line-height:20px;
        border-top:1px #ccc solid;
        margin:0 20px;
    }
    <!-- 结束 -->
    /*加入购物车后页面*/
    #cartmain{
        958px;
        background:url(../img/bg_reg.gif) repeat-x top;
        border-right:1px #e9e9e9 solid;
        border-bottom:1px #e9e9e9 solid;
        border-left:1px #e9e9e9 solid;
        margin:5px 0;
    }
    以上样式中,<!-- 结束 -->注释后的CSS是无效的。。

     按钮按下时立体感效果:

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

    加入收藏代码:

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

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

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

    display之line-block的HACK:

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

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

          2.水平居中(仅限固定宽度)

         这个我想大家都会知道的,如:

    div#container {margin: 0 auto;}
         3.充分利用position中的absolute和relatively

         4.居中,还是居中(纵横通杀)

    div.popup { height:400px; 500px; position: absolute; top: 50%; left: 50%;}
    div.popup { margin-top: -200px; margin-left: -250px;}
         Memo:

                   ·必须指定width和height的固定值;

                   ·position值为absolute;

                   ·分别指定top与left为50%;

                   ·设置margin-top和margin-left分别height和width的负值的一半,也可以简写为:margin:-200px 0 0 -250px;

     
  • 相关阅读:
    Java实现 蓝桥杯VIP 算法训练 数的统计
    Java实现 蓝桥杯VIP 算法训练 和为T
    Java实现 蓝桥杯VIP 算法训练 友好数
    Java实现 蓝桥杯VIP 算法训练 连续正整数的和
    Java实现 蓝桥杯VIP 算法训练 寂寞的数
    Java实现 蓝桥杯VIP 算法训练 学做菜
    Java实现 蓝桥杯VIP 算法训练 暗恋
    Java实现 蓝桥杯VIP 算法训练 暗恋
    测试鼠标是否在窗口内,以及测试鼠标是否在窗口停留
    RichEdit 各个版本介绍
  • 原文地址:https://www.cnblogs.com/nianshi/p/1604329.html
Copyright © 2011-2022 走看看