樣式重置—————————————————————————–

/* 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(){

    })();
裡，在方法塊裡的變數不與其他衝突，方便管理