版型文章邊框應用
|
版型文章邊框(二度空間)語法應用編輯 這是運用各版型邊框達人製作的版型邊框作為(各)個篇文章的美化文章框線 ，使用版型框線如不是您自創的，一定要註明引自出處，以示尊重智慧喔~ 以往都是利用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>三種語法都可以，預設為置左，所以置左不需另外在文章片段中設定 |
↑
