【前端学习笔记】项目经验积累（不定期更新）

样式重置—————————————————————————–

/* reset */
    body,h1,h2,h3,h4,h5,p,dl,dd,ul,ol,form,input,textarea,th,td,select { margin:0; padding:0; }
    em { font-style:normal; }
    li { list-style:none; }
    a { text-decoration:none; }
    img { border:none; vertical-align:top; }
    table { border-collapse:collapse; }
    input,textarea { outline:none; }
    textarea { resize:none; overflow:auto; }
    body { font-size:12px; font-family:"微软雅黑"; }
    /* end reset */

清浮动——————————————————————————–

.clear{zoom:1}
    .clear:after{content:""; display:block; clear:both;}

颜色渐变样式—————————————————————————

.gradient{
        width: 200px;
        height: 200px;
        border:1px solid #000;
        background: -webkit-linear-gradient(top,#ffffff,#f8f8f8) ;
        background: -moz-linear-gradient(top,#ffffff,#f8f8f8);
        background: -ms-linear-gradient(top,#ffffff,#f8f8f8) ;
        background: linear-gradient(top,#ffffff,#f8f8f8);
        --ms-filter:" progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff,endColorstr=#f8f8f8)";
        +background: #f8f8f8;
    }
    除了IE6-7 都兼容

阴影设置——————————————————————————-

box-shadow: 2px(横向右移) 3px(竖向下移) 2px(扩散宽度) #000(阴影颜色);

选项卡active问题———————————————————————–

把选项卡option分为 nav和con部分，把option、nav设置为relative， active的li多设置一个像素的高,再设置con为postion ，让nav的z-index大于con的z-index，这样active 的li多出的那个像素就会顺利覆盖con的边框。这样可以兼容IE 6-7

IE6~7下浮动元素margin-bottom失效问题—————————————————–

<div class="clear">
    <div id="div1"><div>
</div>

<div id="div2"></div>

clear为清浮动的div，这时如果给div1设置float:left;margin-bottom:10px,那么在IE6下这个margin-bottom会失效

解决方法:去掉margin，给该类浮动元素加一个包裹层，给包裹层设置padding

IE下p标签line-height不识别inline-block——————————————————-

当p标签里有inline-block元素时，而且需要将这些元素垂直居中，应当去掉line-height 用padding

解决png在IE下不透明问题————————————————————————-

1.引DD_belatedPNG_0.0.8a.js文件。
2.在JS中调用：DD_belatedPNG.fix('*'); ''内是选择符。
3.加上<!--[if IE 6]> <![endif]-->只在IE6下运用。

解决IE6下双边距bug—————————————————

IE6下浮动元素在box中会使 margin-left margin-right加倍。
解决方法：给该浮动元素加上inline-block

解决IE6下最小高度19像素问题————————————————————–

1.css里面加上overflow:hidden;
2.div里面加上注释,
<div><!– –></div>

CSS小三角形制作————————————————————————————-

.triangle_up{width: 0px;height: 0px;
            overflow:hidden;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent; 
            border-bottom: 4px solid red;

            _border-left: 4px solid #fff;
            _border-right: 4px solid #fff;//IE6下transprent会默认黑色，所以要改成跟背景相同的颜色
        }

IE6 HACK:_ 
IE67 HACK:+

margin-top:-1px失效问题——————————————————-
IE6下一上一下两个div，下面的div设置margin-top:-1,不能成功。
解决方法：给设置margin-top的元素加上position:relative;

———————————js(jQuery)——————————–

每个js模块的编写————————————————————–

放在
(function(){

    })();
里，在方法块里的变量不与其他冲突，方便管理