mozilla
您的搜尋結果

    自訂 CSS 類別

    以下是 MDC Wiki 上自行定義的樣式類別,若你也想新增類別,請聯絡 Dria

    現有 CSS 類別

    樣式 使用結果
    div.tip 顯示網頁內容中的小技巧文字。
    div.bug 顯示網頁內容中的程式錯誤文字。
    .float-left 製作向左浮動的元素(通常是圖片)。
    .float-right 製作向右浮動的元素(通常是圖片)。
    .figure 這個樣式目前還沒有實際作用,是為日後使用準備的。
    .standard-table 標準的表格樣式。
    .standard-table td.header 標準表格的標題樣式。
    .fullwidth-table 寬度設定為 100% 的表格(就像現在這個表格一樣)。
    .fullwidth-table td.header 寬度設為 100% 之表格的標題樣式。
    div.breadcrumbs 頁面導覽的樣式。
    div.breadcrumbs a.breadcrumbs 頁面導覽字串中連結部分的樣式。
    div.breadcrumbs span.breadcrumbs 頁面導覽字串中目前頁面標題的樣式。
    div.side-note-left div.side-note-right 用以建立文章內的邊欄。此區域之寬度將佔其母元素(通常就是文件本體)的 50%。若要建立邊欄請使用這個樣式,以確保內容顯示上容易閱讀。
    div.highlight 在區段左側放上 3 個像素寬的藍色邊框。/td>
    .highlightred 將文字改以紅色顯示。
    .highlightblue 將文字改以藍色顯示。
    .highlightgreen 將文字改以綠色顯示。

    範例

    標示部分程式碼

    通常我們會讓程式碼以特別的區塊顯示,這可以利用 span 搭配 MediaWiki 系統「行前空一格就自動縮排」的功能。須注意的是在 <pre> 區段中不能用 span 元素,因為此時 MediaWiki 會直接把 span 元素當成要顯示的內容而輸出。

    <span class="highlightred">這樣是沒用的</span>
    

    這種狀況下就應該將程式碼縮排,然後在其中使用 span 元素。如果程式中有空白行,該行也必須縮排,否則系統會認為空白行的前後為分開的兩個區段。

    像這樣,
       程式碼的空白行並沒有縮排,
    
       所以就顯示成兩個區段了。
    

    顯然這樣跟我們想要的有所差異,所以你應該這麼做:

    像這樣,
       空白行前也加了個空白字元以示縮排,
    
       這樣系統就將其顯示為同一個區段。
    

    導覽

     

    table.standard-table

    <tr> <td>此為</td> <td>table.standard-table</td> <td>的範例</td> </tr> </table>

    table.fullwidth-table

    表格標題 1</td>

    <th>表格標題 2</td> <th>表格標題 3</td>

    <tr> <td>此為</td> <td>table.fullwidth-table</td> <td>的範例</td> </tr> </table>

    DIV 區段

    小技巧

    小技巧區段以 div class="tip" 標示,例如:

    這就是個小技巧
    程式錯誤

    已知的程式錯誤可用 div class="bug" 標示參照,內含 bugzilla 上的對應資訊連結,例如:

    警告

    請使用 div class="warning" 來標示文件中的警告文字,很快我們會為此樣式加上圖示等特殊效果。

    此段為警告文字
    注釋

    請使用 div class="note" 來標示文件中的注釋文字。

    這是注釋,雖然沒什麼意思但還是個注釋。
    標示區段

    以下為 div class="highlight" 的範例:

    此為以 CSS 標示區段的範例,您可用這個方法讓某個程式碼區段更加顯眼。這個樣式最先是為 XUL 教學而加進 MDC 的。

    而這是
       標示之區段中
       文字預先格式化的
          範例
    
    表格標題 1</td>

    <th>表格標題 2</td> <th>表格標題 3</td>

    Document Tags and Contributors

    標籤: 
    Contributors to this page: irvinfly, BobChao, fscholz
    最近更新: irvinfly,