版型文章邊框應用

2009040302:22

 

版型文章邊框應用

版型文章邊框(二度空間)語法應用編輯

這是運用各版型邊框達人製作的版型邊框作為(各)個篇文章的美化文章框線 ,使用版型框線如不是您自創的,一定要註明引自出處,以示尊重智慧喔~

以往都是利用HTML語法製作多層次邊框線,在這篇文章中,改變另一種模式,以CSS在各篇不同的文章中自定文章樣式, 如果您不懂語法,一定要一字不漏的仔細詳讀所有內容,語法應用前,首先了解 CSS 語法的初步概念請點我。本章文章邊框語法 應用如下:

邊框語法來源(芯誼部落格),應用規則範例↓    @@瀏覽實際參考樣式:請點我

↓由箭頭下拉反白開始複製,否則文章框線無法正常顯示,特別注意!

<style>
<!--
.pycntmod {width:100%;text-align:left;background:#000000;}
.pycntmod .rctop {background:url('http://hk.geocities.com/hhhe88999/106-1.gif') no-repeat left top;margin-right:5px;filter:Alpha(opacity=100);}
.pycntmod .rctop div {background:url('http://hk.geocities.com/hhhe88999/106-2.gif') no-repeat right top;height:50px;font-size:0;filter:Alpha(opacity=100);}
.pycntmod .rcbtm {background:url('http://hk.geocities.com/hhhe88999/106-03.gif') no-repeat left bottom;margin-right:5px;filter:Alpha(opacity=100);}
.pycntmod .rcbtm div {background:url('http://hk.geocities.com/hhhe88999/106-04.gif') no-repeat right bottom;height:169px;font-size:0;filter:Alpha(opacity=100);}
.pycntmod .rcl {padding-left:10px;background:url('http://hk.geocities.com/hhhe88999/106-5.gif') repeat-y;filter:Alpha(opacity=100);}
.pycntmod .rcr {padding-right:6px;background:url('http://hk.geocities.com/hhhe88999/106-6.gif') repeat-y right;filter:Alpha(opacity=100);}
#ptext1{color:#ff00ff;font-family:標楷體;font-size:24px;font-weight:bold;text-align:center;}
#ptext2{font-family:新細明體;font-size:18px;}
-->
</style>
<center>
<div class="pycntmod">
<div class="rctop">
<div></div></div>
<div class="rcl">
<div class="rcr">
<center><img src="文章內容裝飾圖片網址" ></center>
<div id="ptext1">文章標題</div>
<div id="ptext2">
<font color="#FFFFFF"><br>這裡是文章<br>
</font><p></p></div></div></div>
<div class="rcbtm">
<div></div></div></div></center>

在這框線部份特別提示注意點:(框線提示)

在版型邊框達人引用複製框線語法製作文章時,必須做個修改,為了避免與部落格自訂樣式中的語法產生不可預測的干擾,必須將 .ycntmod 改成 .pycntmod ,然後將 .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden/*不管任何內容都去除*/;} 改成 .pycntmod {width:100%;text-align:left;background:#000000;}

原語法:(只要複製擷取框線部分)

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {background:url(http://hk.geocities.com/hhhe88999/106-1.gif) left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url(http://hk.geocities.com/hhhe88999/106-2.gif) right top no-repeat;height:50px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {background:url(http://hk.geocities.com/hhhe88999/106-03.gif) left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url(http://hk.geocities.com/hhhe88999/106-04.gif) right bottom no-repeat;height:169px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:6px;background:url(http://hk.geocities.com/hhhe88999/106-5.gif) repeat-y;}
.ycntmod .rcr {padding-right:6px;background:url(http://hk.geocities.com/hhhe88999/106-6.gif) right repeat-y;}

修改後:

.pycntmod {width:100%;text-align:left/*文章內容預設置左*/;background:#000000/*文章底色*/;}
.pycntmod .rctop {background:url('http://hk.geocities.com/hhhe88999/106-1.gif') no-repeat left top;margin-right:5px;filter:Alpha(opacity=100);}
.pycntmod .rctop div {background:url('http://hk.geocities.com/hhhe88999/106-2.gif') no-repeat right top;height:50px;font-size:0;filter:Alpha(opacity=100);}
.pycntmod .rcbtm {background:url('http://hk.geocities.com/hhhe88999/106-03.gif') no-repeat left bottom;margin-right:5px;filter:Alpha(opacity=100);}
.pycntmod .rcbtm div {background:url('http://hk.geocities.com/hhhe88999/106-04.gif') no-repeat right bottom;height:169px;font-size:0;filter:Alpha(opacity=100);}
.pycntmod .rcl {padding-left:10px;background:url('http://hk.geocities.com/hhhe88999/106-5.gif') repeat-y;filter:Alpha(opacity=100);}
.pycntmod .rcr {padding-right:6px;background:url('http://hk.geocities.com/hhhe88999/106-6.gif') repeat-y right;filter:Alpha(opacity=100);}

(filter:Alpha(opacity=100)) 另外加入框線透明度,預設為100
語法中的元件 .pycntmod 也可以是其它英文語言,但是不可與部落格自訂樣式中的語言重複,避免不可預測的干擾,如在框線樣式中設定為 "pycntmod" 時,文章CSS子項 class 類別也必須設定相同的 "pycntmod" 否則無法辨識作用位置 ,例如:元件變更為 .abcd ,其 class 類別即為"abcd"

語法應用重點分段解說

↓由箭頭下拉反白開始複製,否則文章框無法正常顯示,特別注意!/*在文章中加註引導引用複製箭頭起點*/

/*自訂文章type="text/css"父項指令開始↓*/

/*也可以為<style type="text/css">,在此使用<style>簡語即可*/

<style>
<!--

/*框線元件宣告語法↓*//*參考↑(框線提示)*/
.pycntmod {width:100%;text-align:left;background:#000000;}
.pycntmod .rctop {background:url('http://hk.geocities.com/hhhe88999/106-1.gif') no-repeat left top;margin-right:5px;filter:Alpha(opacity=100);}
.pycntmod .rctop div {background:url('http://hk.geocities.com/hhhe88999/106-2.gif') no-repeat right top;height:50px;font-size:0;filter:Alpha(opacity=100);}
.pycntmod .rcbtm {background:url('http://hk.geocities.com/hhhe88999/106-03.gif') no-repeat left bottom;margin-right:5px;filter:Alpha(opacity=100);}
.pycntmod .rcbtm div {background:url('http://hk.geocities.com/hhhe88999/106-04.gif') no-repeat right bottom;height:169px;font-size:0;filter:Alpha(opacity=100);}
.pycntmod .rcl {padding-left:10px;background:url('http://hk.geocities.com/hhhe88999/106-5.gif') repeat-y;filter:Alpha(opacity=100);}
.pycntmod .rcr {padding-right:6px;background:url('http://hk.geocities.com/hhhe88999/106-6.gif') repeat-y right;filter:Alpha(opacity=100);}

/*框線元件宣告語法↑*/

/*元件集體宣告共同繼承語法↓*//*#元件 {性質: 值 ;}*/

/*文章標題元件 {字體顏色; 字型; 字體大小; 粗體字; 文字置中;}*/

#ptext1{color:#ff00ff;font-family:標楷體;font-size:24px;font-weight:bold;text-align:center;}

/*文章內容元件 {字型; 字體大小;}*//*此段另外說明:因為元件宣告.pycntmod {width:100%;text-align:left;background:#000000;}中已表示文字置左,所以文章內容受其置左性質控制,如文章內容要置中,可在 #ptext2 的元件之性質中加入 text-align:center; 例如:#ptext2{font-family:新細明體;font-size:18px;text-align:center;}*/

#ptext2{font-family:新細明體;font-size:18px;}

/*元件集體宣告共同繼承語法↑*/
-->
</style>

/*自訂文章type="text/css"父項指令結束↑*/

/*自訂文章CSS子項 ID 、 class類別挑選作用位置開始↓*/

/*注意每段用語的<起始語>與</結束語>,為方便了解,以同顏色作檢視配對區分*/
<center>/*置中*/
<div class="pycntmod">/*介入邊框 線的所有元件宣告指令*/
<div class="rctop">/*上框線*/
<div></div>/*右上角框線*/</div>
<div class="rcl">/*左框線*/
<div class="rcr">/*右框線*/
<center>/*裝飾圖片置中*/<img src="文章內容裝飾圖片網址" ></center>
<div id="ptext1">文章標題</div>
<div id="ptext2">/*內文起始*/
<font color="#FFFFFF">/*內文顏色*/<br>這裡是文章<br>/*br是分段語*/
</font><p></p></div></div></div>
<div class="rcbtm">/*下框線*/
<div></div>/*右下角框線*/</div></div>
</center>

/*自訂文章CSS子項 ID class類別挑選作用位置結束↑*/

↑/*複製箭頭終點*/

特別注意!格友自行發文章時,建議加上上下引用指示引導箭頭,引導文章引用複製起點與結束,以免版型圖框複製不完全或其它錯誤!

語法中的元件 #ptext1#ptext2  也可以是其它英文語言,但是不可與部落格自訂樣式中的語言重複,避免不可預測的干擾,在元件中設定為 #ptext1#ptext2時,文章CSS子項 id 也必須設定相同的 "ptext1"與 "ptext2" 否則無法辨識作用位置,例如:元件變更為 #efgh1與#efgh2 ,其 id 即為"efgh1"與 "efgh2"

為了方便字體顏色在奇摩文章編輯視窗能任意改變,所以合併了HTML的用語 ,如要改變文字顏色,滑鼠指標在編輯視窗上點兩下,出現游標|,然後反白需要變更的文字段,即可利用色碼套入器換色

另外!避免直接在奇摩文章編輯視窗改變片段文字位置(整個邊框有可能會改變),建議進入HTML模式進行語法段加入語法作變更,例如:文字片段置中<center>文字內容</center>或<div align="center">文字內容</div>或<p style="text-align: center">文字內容</p>三種語法都可以,預設為置左,所以置左不需另外在文章片段中設定