https://www.andcycle.idv.tw/mediawiki/index.php?action=history&feed=atom&title=Computer%3A_Makeuper%3A_CSS%3A_Ex01 2026-05-17T00:04:08Z Revision history for this page on the wiki MediaWiki 1.43.3 https://www.andcycle.idv.tw/mediawiki/index.php?title=Computer:_Makeuper:_CSS:_Ex01&diff=7030&oldid=prev 2004-08-03T06:36:20Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 06:36, 3 August 2004</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l6">Line 6:</td> <td colspan="2" class="diff-lineno">Line 6:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>最上面這個綠色的是原始碼，下面灰色那塊是顯示結果，最下方藍色的是說明文字。</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>最上面這個綠色的是原始碼，下面灰色那塊是顯示結果，最下方藍色的是說明文字。</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>----</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>----</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;font color="green"&gt;<del style="font-weight: bold; text-decoration: none;">&lt;pre&gt;</del>&lt;nowiki&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;font color="green"&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;div style=" margin-left:10%; margin-right:10%; padding:12px;  font-size:24px;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;nowiki&gt;&lt;div style=" margin-left:10%; margin-right:10%; padding:12px;  font-size:24px; text-align:left; text-indent:48px; background-color:#aaaaaa; color:blue; "<ins style="font-weight: bold; text-decoration: none;">&gt;&lt;/nowiki&gt;&lt;br</ins>&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"> </del>text-align:left; text-indent:48px; background-color:#aaaaaa; color:blue; "&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>test<ins style="font-weight: bold; text-decoration: none;">&lt;br&gt;</ins></div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>test</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;br&gt;</ins></div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>我是測試用的文字啦～<ins style="font-weight: bold; text-decoration: none;">&lt;br&gt;</ins></div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>我是測試用的文字啦～</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;br&gt;</ins></div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用&lt;br&gt;</ins></div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;nowiki&gt;</ins>&lt;/div&gt;&lt;/nowiki&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">測試用測試用測試用測試用測試用測試用測試用</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;/font&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;/div&gt;</div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;/nowiki&gt;<del style="font-weight: bold; text-decoration: none;">&lt;/pre&gt;</del>&lt;/font&gt;</div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>----</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>----</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;div style=&quot; margin-left:10%; margin-right:10%; padding:12px; font-size:24px;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;div style=&quot; margin-left:10%; margin-right:10%; padding:12px; font-size:24px;</div></td></tr> <!-- diff cache key mediawiki:diff:1.41:old-650:rev-7030:php=table --> </table>

218.165.215.33 https://www.andcycle.idv.tw/mediawiki/index.php?title=Computer:_Makeuper:_CSS:_Ex01&diff=650&oldid=prev 2004-07-29T14:45:46Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 14:45, 29 July 2004</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Line 1:</td> <td colspan="2" class="diff-lineno">Line 1:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>----</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>----</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>回到 [[Computer]] ‧ 回到 [[Computer: <del style="font-weight: bold; text-decoration: none;">Mackuper</del>]] ‧ 回到 [[Computer: <del style="font-weight: bold; text-decoration: none;">Mackuper</del>: CSS]]</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>回到 [[Computer]] ‧ 回到 [[Computer: <ins style="font-weight: bold; text-decoration: none;">Makeuper</ins>]] ‧ 回到 [[Computer: <ins style="font-weight: bold; text-decoration: none;">Makeuper</ins>: CSS]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>----</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>----</div></td></tr> <!-- diff cache key mediawiki:diff:1.41:old-547:rev-650:php=table --> </table>

Wini https://www.andcycle.idv.tw/mediawiki/index.php?title=Computer:_Makeuper:_CSS:_Ex01&diff=547&oldid=prev 2004-07-29T14:45:35Z

<p></p> <p><b>New page</b></p><div>----<br /> <br /> 回到 [[Computer]] ‧ 回到 [[Computer: Mackuper]] ‧ 回到 [[Computer: Mackuper: CSS]]<br /> <br /> ----<br /> 最上面這個綠色的是原始碼，下面灰色那塊是顯示結果，最下方藍色的是說明文字。<br /> ----<br /> &lt;font color=&quot;green&quot;&gt;&lt;pre&gt;&lt;nowiki&gt;<br /> &lt;div style=&quot; margin-left:10%; margin-right:10%; padding:12px; font-size:24px;<br /> text-align:left; text-indent:48px; background-color:#aaaaaa; color:blue; &quot;&gt;<br /> test<br /> <br /> 我是測試用的文字啦～<br /> <br /> 測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用<br /> 測試用測試用測試用測試用測試用測試用測試用<br /> &lt;/div&gt;<br /> &lt;/nowiki&gt;&lt;/pre&gt;&lt;/font&gt;<br /> ----<br /> &lt;div style=&quot; margin-left:10%; margin-right:10%; padding:12px; font-size:24px;<br /> text-align:left; text-indent:48px; background-color:#aaaaaa; color:blue; &quot;&gt;<br /> test<br /> <br /> <br /> 我是測試用的文字啦～<br /> <br /> 測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用測試用<br /> 測試用測試用測試用測試用測試用測試用測試用<br /> &lt;/div&gt;<br /> ----<br /> &lt;font color=&quot;blue&quot;&gt;margin-left&lt;br&gt; margin-right&lt;br&gt; padding&lt;br&gt; font-size&lt;br&gt; text-align&lt;br&gt; text-indent&lt;br&gt; background-color&lt;br&gt; color&lt;/font&gt;<br /> &lt;br&gt;&lt;br&gt;&lt;br&gt;<br /> 現在要來解說該區塊（&lt;nowiki&gt;&lt;div&gt;&lt;/nowiki&gt;）內的各屬性的意義，各屬性後要接冒號「:」進行&quot;值&quot;的指定，接著要再接分號「;」以跟不同的屬性做區隔。請多多在 [[Sand Box]] 中進行嘗試。<br /> <br /> margin-left 和 margin-right ：左右邊界，後面接的數字的單位為像素（px）或是百分比（%）。<br /> <br /> padding：內文與各個邊的間隔距離，也可以像上面的 margin 一樣在後方接上「top bottom left right」以各別指定各個邊，後面接的數字的單位為像素（px）。<br /> <br /> font-size：文字大小，後面接的數字的單位為像素（px）。<br /> <br /> text-align：文字對齊，後接 left center right 。<br /> <br /> text-indent：開頭內縮，後面接的數字的單位為像素（px）。<br /> <br /> background-color：背景顏色，可直接填顏色名稱進去，或用十六進位的RGB指定法指定顏色，如 #ff0000 就是紅色。<br /> <br /> color：文字顏色。指定法同背景顏色。<br /> <br /> ----</div>

Wini