部落語法 @ ღ ♬ Melody's little space ♬ ღ

Aug 28 Tue 2007 14:26
左右欄位+彩色邊框+底圖

自訂樣式應用

語法應用編輯(二度空間)

本教學合併"小精靈與晨曦乍現"提供之部分語法

左右欄位加框, 語法如下 : (三選一)

/*左右欄位+彩色邊框-柏憲語法*/

.ycntmod .mbd ul.list li {margin-bottom:7px; border-left:3px ridge #00ffff; border-right:3px ridge #ffff00; border-top:3px ridge #00ff80; border-bottom:3px ridge #ff00ff;}

/*左右欄位+彩色邊框+底圖-柏憲語法*/

.ycntmod .mbd ul.list li {background:url('底圖網址') 50% 50%; margin-bottom:7px; border-left:3px ridge #00ffff; border-right:3px ridge #ffff00; border-top:3px ridge #00ff80; border-bottom:3px ridge #ff00ff;}

/*左右欄位+彩色邊框+標題前小圖-柏憲語法*/

.ycntmod .mbd ul.list li {margin-bottom:7px; border-left:3px ridge #00ffff; border-right:3px ridge #ffff00; border-top:3px ridge #00ff80; border-bottom:3px ridge #ff00ff;}
.ycntmod .mbd ul.list li {background:url(小圖網址) 3% 10% no-repeat; padding-left:15px;}

語法解說 :

3% 10% no-repeat;padding-left:15px = 3% 10% 為標題小圖 X / Y 軸位置，no-repeat 圖片不重複，padding-left:15px 標題小圖與標題文字間的空隙

margin-bottom:10px 邊際(標題與標題之間距離) 10px 在此為間距值，建議2~10之間

border = 框邊

left = 左邊框

right = 右邊框

top = 上邊框

bottom = 下邊框

ridge = 脊線︿(請參考框線條樣式)

3px = 框線粗細像素值 (建議使用在1~5之間)

其它參考尺寸代表語法 : 點= pt、英寸= in、公分= cm、像素= px

#ff00ff = 框線顏色色碼 (可搭配個人使用的背景配色，請參考色碼表)

框線條樣式 : ( 無、點線、實線、雙線、溝線、脊線、嵌入線、浮出線 )

相對應語法 : none︱ dotted｜solid︱ double︱ groove︱ ridge︱ inset︱ outset

其它相關的框線應用一 : (三選一)

/*部落格描述與標題+雙框線+底圖*/

#yblogtitle .text {background: url(底圖網址); border-left:4px double #00ffff; border-right:4px double #ffff00; border-top:px double #00ff80; border-bottom:4px double #ff00ff;}
　

/*部落格描述與標題+雙框線+背景色*/

#yblogtitle .text {background:#ffffff; border-left:4px double #00ffff; border-right:4px double #00ffff; border-top:4px double #00ffff; border-bottom:4px double #00ffff;}

/*部落格描述與標題+雙框線+底圖+背景色*/ /*此合併語法如果圖片失效時，以預先設定的底色暫時取代*/

#yblogtitle .text {background: url(底圖網址); background:#ffffff; border-left:4px double #00ffff; border-right:4px double #00ffff; border-top:4px double #00ffff; border-bottom:4px double #00ffff;}

其它相關的框線應用二 :

/*四邊界+邊框*/ /*邊框顏色自行配合自己的底圖與底色*/
body {border-left:3px double #00ffff; border-right:3px double #00ffff; border-top:3px double #00ffff; border-bottom:3px double #00ffff;}

附帶 : 其他關於背景語法應用解說 ;

background-color:#F5E2EC; /*背景色彩*/
background:transparent; /*透視背景*/
background-image : url(image/bg.gif); /*背景圖片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重複排列-網頁預設*/
background-repeat : no-repeat; /*不重複排列*/
background-repeat : repeat-x; /*在x軸重複排列*/
background-repeat : repeat-y; /*在y軸重複排列*/
指定背景位置 [ 以下方式皆可使用 ]
background-position : 90% 90%; /*背景圖片x與y軸的位置*/
background-position : top; /*向上對齊*/
background-position : bottom; /*向下對齊*/
background-position : left; /*向左對齊*/
background-position : right; /*向右對齊*/
background-position : center; /*置中對齊*/

色碼表應用 : (注意 : 有些數字色碼無支援應用在奇摩部落格當邊框顏色，無支援的貼上只會顯示灰色)

英文色碼表數字色碼表

如果你已經備妥，點此進入自訂樣式 http://tw.blog.yahoo.com/setup/cus_style.php

左右欄位加框+底圖語法說明: (使用底圖這種語法，不能合併標題前小圖)

觀看效果，請前往 → 小精靈去觀看加框之後的效果（以下語法是小精靈所分享）

/*左右欄位+有色邊框-小精靈語法*/

.ycntmod .mbd ul.list li {BACKGROUND: url(底圖網址 ) 0% 100%; COLOR:white; border:5px; BORDER-TOP-STYLE: double; BORDER-RIGHT-STYLE: double; BORDER-LEFT-STYLE: double; BORDER-BOTTOM-STYLE: double;}

1.選擇自己喜歡的圖片加進去，如果不加底圖只要框線，也可以不加圖片→ url()

2.選擇外框的樣式→none、dotted、dashed、solid、double、groove、ridge、insert、 outset

3.設定框線顏色 → COLOR: white

4.設定框線的粗細→border:5px; （如果你要框線粗些，增加數字就行了...　）

5.【編輯個人檔案】→【面板設定】→【自訂樣式】將修改後的語法貼進去就行了

（如果你是將語法貼在『文章前小圖的語法』上面，系統就是抓到文章前ㄉ小圖。如果你是將語法貼在『文章前小圖的語法』下面，系統就是抓到框線的底圖。）

（欲增加框與框的距離，只要在文章前小圖語法中，找到→margin-bottom:20px←這段語法，依自己的偏好，修改距離）

/*Nav module list*文章前小圖*/
.ycntmod .mbd ul.list li {background:url(小圖網址) left .1em no-repeat;padding-left:20px;margin-bottom:3px;_margin-bottom:20px;_line-height:20px;}
.ycntmod .mbd ul.list li.more {margin:-3px 0 0 -3px;text-align:right;background:url(小圖網址) 40px center no-repeat;}

表格框線顏色css語法說明～～

邊框線名稱︰

border-top（上邊框線）、
border-right（右邊框線）、
border-bottom（下邊框線）
boder-left（左邊框線）；

backgroud-position: 0% 0%; 左邊上方
backgroud-position: 0% 50%; 左邊中間
backgroud-position: 50% 0%; 中間上方
backgroud-position: 50% 50%; 正中間
backgroud-position:100% 0%; 右邊上方
backgroud-position: 0% 100%; 左邊下方
backgroud-position: 100% 50%; 右邊中間
backgroud-position: 50% 100%; 中間下方
backgroud-position: 100% 100%; 右邊下方
　

邊框樣式指令：

none(無邊框)
dotted(點線)
dashed(虛線)
solid(實線)
double(雙線)
groove(立體凹線)
ridge(立體凸線)
inset(立體嵌入線)
outset(立體隆起線)

melody 發表在痞客邦留言(0) 人氣()

個人分類：部落語法

▲top

Jul 29 Sun 2007 12:20
在文章內文加入表格【教學】

您想要在文章內文加入表格嗎?

如果您還不知道怎樣在文章內文加底圖

請先閱讀這兩篇在文章內文加入背景圖片【教學】

在文章底圖加邊框【教學】

基本表格

資料1~1	資料1~2	資料1~3
資料2~1	資料2~2	資料2~3
資料3~1	資料3~2	資料3~3
資料4~1	資料4~2	資料4~3

進階表格

第１列第１儲存格	合併第１列第２、３儲存格
合併２、３列第１儲存格	第２列第２儲存格	第２列第３儲存格
合併２、３列第１儲存格	第３列第２儲存格	第３列第３儲存格

語法說明

<table> 與 </table> 〔宣告表格的開始和結束〕

也可以控制表格的一些格式，如：邊框粗細、顏色、寬度、高度等。

cellSpacing=15 〔設定表格格線的寬度〕

cellPadding=0 〔更改表格與表格內內容間的空白距離〕

bgColor=#ffff33 〔設定表格底色〕

bordercolor=#336699　〔設定表格框線色〕

background=圖片網址〔表格的底圖〕

border=8 〔設定邊框的粗細〕

colspan　〔水平合併〕

rowspan　〔垂直合併〕

style="border-collapse: collapse"　〔將框線緊壓結合〕

<tr> 與 </tr> 〔宣告表格中的每一行的開始與結束〕

<td> 與</td> 〔一般表格內的資料〕

<font size=2> 〔設定文字大小〕

melody 發表在痞客邦留言(1) 人氣()

個人分類：部落語法

▲top

Jul 29 Sun 2007 12:16
在文章底圖加邊框【教學】

您想要在文章底圖加邊框嗎?

如果您還不知道怎樣在文章內文加底圖

請先閱讀這一篇在文章內文加入背景圖片【教學】

基本邊框 (選用有邊框圖案的圖片) 請參考這篇範例男女三七宰~~

<table cellSpacing=0 cellPadding=6 align=center background=圖片網址 border=8>
<tbody>
<tr>
<td>文字放在這裡</td></tr></tbody></table

進階邊框請參考這篇範例那次是因為你放了個屁~~

<table cellSpacing=0 cellPadding=32 align=center background=圖片網址 border=8>
<tbody>
<tr>
<td>
<table cellSpacing=100 cellPadding=6 background=圖片網址 border=8>
<tbody>
<tr>
<td>文字放在這裡</td></tr></tr></tbody></table></td></tr></tbody></table>

豪華邊框請參考這篇邊框快點從實招來~~那個男的是不是你~~

<table cellSpacing=15 cellPadding=0 align=center bgColor=#000000 background=圖片網址 border=0>
<tbody>
<tr>
<td>
<table cellSpacing=3 cellPadding=0 align=center bgColor=#000000 background=圖片網址 border=1>
<tbody>
<tr>
<td>
<table cellSpacing=10 cellPadding=0 align=center bgColor=#000000 background=圖片網址 border=1>
<tbody>
<tr>
<td>
<table cellSpacing=2 cellPadding=0 align=center bgColor=#000000 background=圖片網址 border=0>
<tbody>
<tr>
<td>
<table cellSpacing=3 cellPadding=0 align=center bgColor=#000000 background=圖片網址 border=1>
<tbody>
<tr>
<td>文字放在這裡</td></tr></tr></tbody></tbody>
<tbody></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>

漸層邊框請參考這篇範例您會用英語吵架嗎?

<table cellSpacing=0 cellPadding=3 bgColor=#000000 border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 align=center bgColor=#330066 border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#330099 border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#3300cc border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#3300ff border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#333366 border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#333399 border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#3333cc border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#3333ff border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#336666 border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#336699 border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#3366cc border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#3366ff border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#339966 border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#339999 border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#3399cc border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#3399ff border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#33cc66 border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#33cc99 border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#33cccc border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=3 bgColor=#33ccff border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=10 bgColor=#33ccff border=0>
<tbody>
<tr>
<td>
<table cellSpacing=0 cellPadding=5 border=3>
<tbody>
<tr>
<td>
<div align=center>
<table cellSpacing=10 cellPadding=0 background=http://pics17.webs-tv.net/4/userfile/r/rhinejo/album/144ad1934b63db.jpg border=1>
<tbody>
<tr>
<td>文字放在這裡</td></tr></tbody></table></td></tr></tbody>

</table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>
<div></div></td></tr></tbody></table>

語法說明

<table> 與 </table> 〔宣告表格的開始和結束〕

也可以控制表格的一些格式，如：邊框粗細、顏色、寬度、高度等。

cellSpacing=15 〔設定表格格線的寬度〕

cellPadding=0 〔更改表格與表格內內容間的空白距離〕

bgColor=#000000 〔背景的顏色〕

background=圖片網址〔背景的圖片〕

border=0 〔設定邊框的粗細〕

<tr> 〔宣告表格中的每一行的開始與結束〕

<td> 〔一般表格內的資料〕

melody 發表在痞客邦留言(0) 人氣()

個人分類：部落語法

▲top

Jul 29 Sun 2007 12:10
在文章內文加入背景圖片【教學】

當您 po上文字紓發心情時...

除了加上背景音樂來詮釋心情，您想再加入背景圖片來營造意境嗎?

在文章內文加上背景圖片的效果如何呢?

請看晚霞滿天晨曦乍現祝妳生日不快樂這三篇範例

如果不想加底圖，而想在文章內文加底色，那又是怎樣呢?

請看三不政策纏綿我要和你做愛這三篇範例

怎樣在文章內文加上背景圖片呢?

1.點【發表文章】

2.勾選【觀看HTML 原始碼】

3.貼上語法

<table cellSpacing=0 cellPadding=6 align=center background=網址 border=8>
<tbody>
<tr>
<td>文字放在這裡</td></tr></tbody></table>

4.貼上背景圖片的網址

5.取消【觀看HTML 原始碼】

6.刪掉【文字放在這裡】這幾個字

7.加入文章內容(文字或圖片都可以)

8.發表

9. ok...

10. 您所選用的圖片(不管圖片多大)會自動添滿您文章欄位的寬度

三欄式是850 二欄式是750 如果你有更改過文章欄位寬度也一樣會填滿

而高度就是您文章的長度

怎樣在文章內文加上背景底色呢?

1.點【發表文章】

2.勾選【觀看HTML 原始碼】

3.貼上語法

<table cellSpacing=0 cellPadding=6 align=center bgColor=#009966 border=8>
<tbody>
<tr>
<td>文字放在這裡</td></tr></tbody></table>

4.更改背景底色的顏色色碼表

5.取消【觀看HTML 原始碼】

6.刪掉【文字放在這裡】這幾個字

7.加入文章內容(文字或圖片都可以)

8.發表

9. ok...

10. 您所選用的顏色(不管什麼顏色)會自動添滿您文章欄位的寬度

三欄式是850 二欄式是750 如果你有更改過文章欄位寬度也一樣會填滿

而高度就是您文章的長度

如果您還要貼上背景音樂

8.發表文章以前

9.勾選【觀看HTML 原始碼】

10.貼上語法

11.貼上那首歌的網址

12.直接發表就ok了

希望您喜歡..如果有解說不清楚的地方..再互相研究...

melody 發表在痞客邦留言(3) 人氣()

個人分類：部落語法

▲top

May 18 Fri 2007 21:07
如何將部落格文章文字變大

單篇文章的文字放大

語法：<p><font size=3><strong>字放在這裡</strong></font></p>

1.點選發表文章

2.先打好文章內容

3.勾選左下方有一個 {觀看HTML原始碼}

4.勾選後..將語法貼進去..

語法說明

<p><font size=3><strong> 貼在所有文字最上面

</strong></font></p> 貼在文字最下方

<p><font size=3><strong> 更改數字可變換文字大小

所有的文章文字都使用同樣大小

語法

/*Text color for main content*文章欄位字體顏色*/
.yc3pribd .text {color: #0066ff;font-size:150%;font-family:標楷體;}

語法說明

font-family:標楷體; 如果你不想更換字體~就刪掉這些字~或更改成你想要的字體

font-size:150%; 依你自己的喜好~~更改數字~~改成自己喜歡的大小

color: #0066ff; 如果你不想更改文字顏色~就刪掉這些字~或更改成自己喜歡的顏色~色碼表

1.你的大頭貼下方「編輯個人檔案」點進去

2. 進入「管理部落格首頁」後，點選「面板設定」的「自訂樣式」

3. 然後將你想要更改那一部份的語法貼到所有文字的最下方

4.確定

語法

/*Text color for blog title*部落格標題字體顏色*/
#yblogtitle .text {color: #660099;font-family:標楷體;font-size:150%;}

/*Text color for main content*文章欄位字體顏色*/
.yc3pribd .text {color: #0066ff;font-size:150%;font-family:標楷體;}

/*Text color for module*左右欄位字體顏色*/
.text {color: #0066ff;font-size:150%;font-family:標楷體;}

/*Blog title*部落格標題大小顏色*/
#yblogtitle .mbd,#yblogtitle .mft{ font-family:標楷體;font-size:170%}
#yblogtitle h1{color:#FF0000;font-family:標楷體;}

/*Text color for blog title*部落格資料文字顏色*/
#yblogtitle .text {color: #FF0000;}

自己更改測試~~找出自己看起來最順眼的大小..顏色..字體..

如果你是新手..對CSS不熟..會擔心CSS亂掉..

你可以先將原來的CSS語法複製下來..貼在記事本..

如果亂掉了..再貼回來就好了..

melody 發表在痞客邦留言(1) 人氣()

個人分類：部落語法

▲top

ღ ♬ Melody's little space ♬ ღ

✄ ❋剛搬家尚在適應這裡的環境❋ ✄

公告版位

目前分類：部落語法 (5)

左右欄位+彩色邊框+底圖

在文章內文加入表格【教學】

在文章底圖加邊框【教學】

在文章內文加入背景圖片【教學】

如何將部落格文章文字變大

最新文章

文章分類

熱門文章

文章精選

我的好友

最新留言

動態訂閱

文章搜尋

誰來我家

QR Code