版型文章邊框應用
版型文章邊框(二度空間)語法應用編輯 這是運用各版型邊框達人製作的版型邊框作為(各)個篇文章的美化文章框線 ,使用版型框線如不是您自創的,一定要註明引自出處,以示尊重智慧喔~ 以往都是利用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;} 修改後: .pycntmod {width:100%;text-align:left/*文章內容預設置左*/;background:#000000/*文章底色*/;} |
(filter:Alpha(opacity=100)) 另外加入框線透明度,預設為100 |
語法中的元件 .pycntmod 也可以是其它英文語言,但是不可與部落格自訂樣式中的語言重複,避免不可預測的干擾,如在框線樣式中設定為 "pycntmod" 時,文章CSS子項 class 類別也必須設定相同的 "pycntmod" 否則無法辨識作用位置 ,例如:元件變更為 .abcd ,其 class 類別即為"abcd" |
語法應用重點分段解說 |
↓由箭頭下拉反白開始複製,否則文章框無法正常顯示,特別注意!/*在文章中加註引導引用複製箭頭起點*/ /*自訂文章type="text/css"父項指令開始↓*/ /*也可以為<style type="text/css">,在此使用<style>簡語即可*/ <style> /*框線元件宣告語法↓*//*參考↑(框線提示)*/ /*框線元件宣告語法↑*/ /*元件集體宣告共同繼承語法↓*//*#元件 {性質: 值 ;}*/ /*文章標題元件 {字體顏色; 字型; 字體大小; 粗體字; 文字置中;}*/ #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;} /*元件集體宣告共同繼承語法↑*/ /*自訂文章type="text/css"父項指令結束↑*/ /*自訂文章CSS子項 ID 、 class類別挑選作用位置開始↓*/ /*注意每段用語的<起始語>與</結束語>,為方便了解,以同顏色作檢視配對區分*/ /*自訂文章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>三種語法都可以,預設為置左,所以置左不需另外在文章片段中設定 |
↑
留言列表