html置中排版～

之前好像有寫過～不過最近有找到一個更漂亮的寫法，就記錄一下～

這次大多練習用css排，有單獨使用小調整的才寫在code裡，
規劃上就是以body, div來置中，div則走list區塊的方式在排，若是一個區塊裡又分左右的話，再考慮在div裡面開table或是div/span來處理。總之由上往下整體上都是一條條的div，這樣就不會亂跑了！

內容上主要分 h1（大標）, h2（副標）, .content（內文文字）
因為上次聽說search上h1會比較容易被查到，所以就配合一下。
.content 主要處裡文字縮排，左右空隙，不過因為margin-right好像很難用沒反應，所以乾脆就用width來算，就齊了一"一b...

這次其實是做的是EDM...（電子DM的版，所以跟網站不太一樣XD）
字大小都僅量用百分比在微調，還蠻好用的！

多個class，指定時用" "（空白隔開就可以了）
<div class="content text_bottom text_grey div_border" >

/**body 和 div要一起配合才會一起置中！ div也可以不要用tag, 指定一個包很大的 id元素也可以～*/
body  {
    font-family: Microsoft JhengHei;   /**字型改正黑體*/
    margin: 0;
    text-align: center;
}

div {
    position: relative;
    margin: 0 auto;
    width: 800px;   /**版面寬度，主要配合banner圖*/
    text-align: left;
}


h1  {
    font-size: 32px;
    margin-left: 50px;
}

h2  {
    color:red;
    font-size: 24px;
    margin-left: 50px;
    margin-top: -20px;
}

.content  {
    margin-left: 30px;    /**內文縮排，width為全寬減掉右邊縮排的距離*/
    width: 740px;
}

.text_red  {
    color:red;
}

.text_small  {
    font-size: 70%;    /**字型比率(%)，之前比較愛用+1, -1，不過有些微妙變化的字用百分比好用*/
}

.text_bottom  {
    margin:30px;     /**包在.content裡面，就可以縮排兩次了*/
    text-align:center;    /**字的位置，置中*/
}

.text_grey  {
    color:grey;
}



.div_border  {     /**div的外框線，一定要設定border-style才會跑出來*/
    border-color:grey;
    border-size: 1px;
    border-style: solid;
}

其他：
圖片要整張背景圖出來，用height限制最剛好，不會有換行縮排div太多或太少的問題
background-image: url('imgs/edm-07-01.png'); height:500px