CSS 註解要好好註解不然會有 Bug 喔

錯誤註解

1. 在 ; 後註解 //
2. 註解後 // 沒有於列末輸入 ;

display: table; //我是表格

//合併邊緣
border-collapse: collapse; 

正確註解

//我是表格;
display: table; 

//合併邊緣;
border-collapse: collapse; 

本文教你如何在 Markdown 插入用 CSS+DIV 做的 Table

DIV 不可以這樣寫喔，不然得不到想要的結果

<div id="css_table">
    <div class="css_tr">
        <div class="css_td">一</div>
        <div class="css_td">二</div>
        <div class="css_td">三</div>
    </div>
    <div class="css_tr">
        <div class="css_td">4</div>
        <div class="css_td">5</div>
        <div class="css_td">6</div>
    </div>
    <div class="css_tr">
        <div class="css_td">Seven</div>
        <div class="css_td">Eight</div>
        <div class="css_td">Nine</div>
    </div>
</div>

輸出，看吧，說有多醜就有多醜，It’s ugly. 上下列竟然有空列隔開。

DIV 要這樣寫喔，因為是 Markdown，

<div id="css_table">
    <div class="css_tr">
        <div class="css_td">一</div>
        <div class="css_td">二</div>
        <div class="css_td">三</div>
    </div><div class="css_tr">
        <div class="css_td">4</div>
        <div class="css_td">5</div>
        <div class="css_td">6</div>
    </div><div class="css_tr">
        <div class="css_td">Seven</div>
        <div class="css_td">Eight</div>
        <div class="css_td">Nine</div>
    </div>
</div>

輸出，終於正常了

把以下 table.css 放入 Hexo\themes\landscape\source\css 資料夾內

#css_table {
  display: table;
  border-collapse: collapse;
}
.css_tr {
    display: table-row;
}
.css_td {
    display: table-cell;
    border: 1px solid white;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

把以下 link 插入 Hexo\themes\landscape\layout\index.ejs 檔案內

<link rel="stylesheet" href="/css/table.css"/>

恭喜完成！得到一個白邊表格。

進階表格

<div class="css_table">
<div class="css_caption">
    <p>This is a Table</p>
</div>    <div class="css_head">
    <div class="css_td">css_head 1
    </div>    <div class="css_td">css_head 2
    </div>    <div class="css_td">css_head 3
    </div>
</div>    <div class="css_tr">    
    <div class="css_td">Row 1 Column 1
    </div>    <div class="css_td">Row 1 Column 2
    </div>    <div class="css_td">Row 1 Column 3
    </div>
</div>    <div class="css_tr">
    <div class="css_td">Row 2 Column 1
    </div>    <div class="css_td">Row 2 Column 2
    </div>    <div class="css_td">Row 2 Column 3
    </div>
</div>

輸出

本頁上方 niauwu 做的 banner 無限循環背景不錯吧!
讓我們來 DIY 做無限循環背景吧！

挑選圖片、編輯圖片

1. 選擇一張要循環的圖片，例如一張寬 100px 的圖片。
2. 用修圖軟體把圖片寬度改成三倍，例如新增一個 300px的圖片檔，之後把圖片按照順序排列，第一張 x=0，第二張 x=100，第三張 x=200，之後把第二張水平反轉。存檔之後就變成可以無限循環的圖片了。

上CSS

#infiniteBG {    
    width: 100%;
    height: 80px;
    background-image: url("https://niauwu.github.com/img/infiniteBackground.jpg");
    background-position: 0px 0px;
    background-repeat: repeat-x;

    -webkit-animation: bgMove 10s linear infinite;
    -moz-animation: bgMove 10s linear infinite;
    -ms-animation: bgMove 10s linear infinite;
    -o-animation: bgMove 10s linear infinite;
    animation: bgMove 10s linear infinite;  
}

@-webkit-keyframes bgMove {
    from {background-position:0% 0%;}
    to {background-position: 300px 0%;}
}
@-moz-keyframes bgMove {
    from {background-position:0% 0%;}
    to {background-position: 300px 0%;}
}
@-ms-keyframes bgMove {
    from {background-position:0% 0%;}
    to {background-position: 300px 0%;}
}
@keyframes bgMove {
    from {background-position:0% 0%;}
    to {background-position: 300px 0%;}
}

輸出結果