MDC:自訂 CSS 類別
From MDC
以下是 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 元素。如果程式中有空白行，該行也必須縮排，否則系統會認為空白行的前後為分開的兩個區段。
像這樣，
程式碼的空白行並沒有縮排，
所以就顯示成兩個區段了。
顯然這樣跟我們想要的有所差異，所以你應該這麼做：
像這樣， 空白行前也加了個空白字元以示縮排， 這樣系統就將其顯示為同一個區段。
[編輯] 導覽
- JavaScript 1.5 參考:關於本文文件中有一段關於在網頁上添加導覽列的範例。
[編輯] table.standard-table
| 表格標題 1</td>
<th>表格標題 2</td> <th>表格標題 3</td> |
|---|
| 表格標題 1</td>
<th>表格標題 2</td> <th>表格標題 3</td> |
|---|