文章框框製作教學 @ Q蓓琳的美麗境界

Oct 09 Wed 2013 18:08
語法複製框，語法分享框，輕輕點三下複製（上）888

你常在網誌上，分享語法給別人？
分享語法時，可以使用「語法複製框」
讓想要拿語法的人
輕輕點三下，就可以複製語法回家
該怎麼用呢？

你可能看過這種「語法複製框」、「語法分享框」
該怎麼用呢？很簡單！

首先，發文章時記得先轉為純文字，或是html模式

　舊版發表文章

　新版發表文章

然後，把「複製框／分享框」的語法貼上去～

<div style="
width: 130px; height: 40px;
border: 1px solid #000000;
padding: 10px; overflow: auto; "><br><br>

再轉回原本的進階發文模式，就能看到效果～

改變長寬

語法裡的 width: 130px; height: 40px; 就是框的長寬
你可以自己調整數值，例如我們讓它變寬一點～

改變外框

語法裡的 border: 1px solid #000000;　就是在設定外框粗細、顏色
你可以自己修改數值。例如我們把外框變粗，並換個顏色～（色碼表）

如果把語法中的 solid 改成 dotted，就是變點點

如果把語法中的 solid 改成 dashed，就是變虛線

不想看到框線？把 border: 1px 改成 border: 0px 即可

改變捲軸顏色

想換捲軸顏色，那麼就在語法裡，加入捲軸變色語法～

<div style="
width: 130px; height: 40px;
border: 1px solid #FFAFFE;
padding: 10px; overflow: auto;
scrollbar-arrow-color: #FFCBDC ;
scrollbar-face-color: #FFB3CC ;
scrollbar-track-color: #FFCBDC ;
scrollbar-3dlight-color: #FFDCE8 ;
scrollbar-highlight-color: #FF8BB2 ;
scrollbar-shadow-color: #FFCFDF ;
scrollbar-darkshadow-Color: #FF8BB2 ; ">

效果就像這樣～（只有 IE 瀏覽器才看得到變化）

此外，如果你不希望出現下方橫向捲軸
可以加入這一句～　

OVERFLOW-X: hidden;

這樣不論你分享的東西有多長
它永遠都不會出現橫向的捲軸

想永遠隱藏右邊的縱向捲軸，就是～

OVERFLOW-Y: hidden;

放入你要分享的東西

都調整好了嗎？最後記得把文章編輯器，轉回原本模式
然後把要分享的東西，貼進框框裡即可～

你要分享的東西
輕輕點三下複製

那，框框裡的文字能變化嗎？當然！
你可以再回到純文字/html模式
用語法來調整它的字體大小、顏色、行距
整段語法看起來會是這樣～

<div style="width:130px;height:40px;
border:1px solid #FFAFFE;
padding:10px; overflow:auto;
scrollbar-arrow-color:#FFCBDC;
scrollbar-face-color:#FFB3CC;
scrollbar-track-color:#FFCBDC;
scrollbar-3dlight-color:#FFDCE8;
scrollbar-highlight-color:#FF8BB2;
scrollbar-shadow-color:#FFCFDF;
scrollbar-darkshadow-Color:#FF8BB2; ">
<font size="2" style=" color:#A0009E; line-height:100%; ">
你要分享的東西</font>

紅色部分，就是字體、顏色、行距