～~感謝"芭樂園"分享~(請關掉背景音樂)~～
定義連結字串：這裡的設置將作用於全部連結字串
/* Links 定義連結字串＜高爾夫球場＞*/
a,a:link,a:visited{color:#000080; }
a:hover{color:#FF00FF; }
|
語法說明：（這部分見 連結樣式 教學有比較詳細的說明）
a,a:link,a:visited{……}
| 定義連結字串＜visited=參訪＞
| color:#000080;
| 字色
| text-decoration:none;
| 不顯示底線＜text-decoration:none=字-裝飾：並不、絕不＞
| | | | a:hover{……}
| 定義滑鼠移至連結的變化＜hover=盤旋、徘徊＞
| color:#FF00FF;
| 指滑鼠移至連結字串所變化之字色
| position:relative;
|
定義滑鼠移到連結字串時字會下沉產生動感
＜position:relative=位置、姿勢：相對的、有關係的＞
| top: 2px; left:2px;
| 上邊拉開 2px; 左邊拉開 2px。↑需與上配合
| background-color:#FFFF00;
| 定義滑鼠移到連結字串時產生之字底色
| background-image:url(http://圖址)
| 定義滑鼠移到連結字串時產生之底圖
| text-decoration:underline;
| 定義滑鼠移到連結字串時產生底線
＜underline=底線＞
| | | |
語法範例：
/* Links 定義連結字串 */
a,a:link,a:visited{color:#000080;
text-decoration:none; }
a:hover{color:#FF00FF; position:relative;
top:1px; left:1px; }
|
連結字串前加圖示
/* Nav module list 連結字串前加圖示＜可控制的模組 目錄＞*/
.ycntmod .mbd ul.list li {background:url(圖示位址)
no-repeat left 0.1em; padding-left:20px; margin-bottom:7px;
line-height:1.5em;}
.ycntmod .mbd ul.list li.more {margin:-3px 0 0 -3px; text-align:right;
background:url(所有文章和更多回應圖檔位址) 50px center no-repeat;}
|
說明：
.ycntmod .mbd ul.list li {……}
| 在左右欄標題目錄串連字前加圖示
| background:url(圖址)
no-repeat
left 0.1em
| 這個應不用再介紹了
當然不重複貼圖，否則會貼滿整欄框
應該是指圖與左邊距離，結果字卻下沈。
不用設它。
（em 約為M一鉛字所佔之面積，為印刷字體之計量單位）
| padding-left:20px;
| 文字與左邊緣的距離，當然要比圖示寬些嘍～＜補白-左：＞
| margin-bottom:7px;
| 行距（與下一段落的距離）＜邊、頁邊的空白-底部：＞
| line-height:1.5em
| 列高（可以不用設）
| | | .ycntmod .mbd ul.list li.more {……}
| 在所有文章、更多回應前加圖示
＜more=另外的、附加的＞
| background:url(圖址)
50px
no-repeat
| 這個應不用再介紹了
調整與邊緣距離（內設是靠左上）
（也可用文字來控制 center=置中）
不重複貼圖
| margin:-3px 0 0 -3px;
| 與各邊緣距。不用設它。
＜margin=邊、頁邊的空白＞
| text-align:right;
| 不用設它。＜text-align:right=文字-排成一行：右＞
| | | |
語法範例：
無框線設置：
/* 無框線設置 */
.ycntmod .rctop { background:none; margin:0; }
.ycntmod .rctop div {background:none; height:0; right:0; }
.ycntmod .rcbtm { background:none; margin:0; }
.ycntmod .rcbtm div {background:none; height:0; right:0; }
.ycntmod .rcl { background:none; padding:0; }
.ycntmod .rcr { background:none; padding:0; }
.ycntmod { margin:0; }
|
語法說明：
.ycntmod .rctop {……}
| 左上框線
| background:none;
| 框線圖：沒有
| margin:0;
| margin=邊、頁邊空白：0 px
| .ycntmod .rctop div {……}
| 右上框線
| background:none;
| 線圖：沒有
| height:左上線高
px;
| 高：0 px（左上框線的高）
| right:0
px;
| 右：0 px
| .ycntmod .rcbtm {……}
| 左下框線
| background:none;
| 線圖沒有
| margin:0;
| margin=邊、頁邊空白：0 px
| .ycntmod .rcbtm div {……}
| 右下框線
| background:none;
| 線圖沒有
| height:左下線高
px;
| 高：0 px（左下框線的高）
| right:0
px;
| 右：0 px
| .ycntmod .rcl {……}
| 左框線
| background:none;
| 線圖沒有
| padding:左線寬
px;
| 左框線寬：0 px。padding=填滿、補白
| .ycntmod .rcr {……}
| 右框線
| background:none;
| 線圖沒有
| padding:右線寬
px;
| 右框線寬：0 px。padding=填滿、補白
| .ycntmod {……}
| 這個標籤好玩，
您可上面↑的語法都不設來玩這個看看。
只加 margin:0; 所有框間隙將都取消，
再加上 height:0; 則所有欄框都不見，
只剩內文區如果哪天想關掉部落格，
在裡面加個 filter:alpha(opacity:0); 好了，
包您隱藏所有一切只剩底色或底布（背景）。
當您想打開卻找不到開啟的地方時，
您可以攜二串香蕉來問我。
| margin:0;
| margin=邊、頁邊空白：0 px
| | | |
也有人用下面這式子來設左右欄框線，可是這一設，
除框線外連背景底布都會隱藏。
.ycntmod .rctop, .ycntmod .rctop div, .ycntmod .rcbtm, .ycntmod .rcbtm div,
.ycntmod .rcl, .ycntmod .rcr { zoom:1; filter:alpha(opacity:0); }
如果您想做個除了 body{…} 底布及第一欄外，其他都無框、
無背景的部落格，倒是可以用用。
|
語法範例：
/* 無框線設置 */
.ycntmod .rctop { background:none; margin:0; }
.ycntmod .rctop div {background:none; height:0; right:0; }
.ycntmod .rcbtm { background:none; margin:0; }
.ycntmod .rcbtm div {background:none; height:0; right:0; }
.ycntmod .rcl { background:none; padding:0; }
.ycntmod .rcr { background:none; padding:0; }
.ycntmod { margin:0; }
|
設置裝飾框線：
/* shared rounded corner for all
modules 添加裝飾框線 */
.ycntmod {width:100%; position:relative; margin-bottom:
10 px; overflow:hidden; }
.ycntmod .rctop {zoom:1; background:url(左上線位址)
left top no-repeat; margin-right:
5 px; }
.ycntmod .rctop div {background:url(右上線位址)
right top no-repeat; font-size:0;
position:relative; height:
左上線高px; right:
-5 px; }
.ycntmod .rcbtm {zoom:1; background:url(左下線位址)
left bottom no-repeat; margin-right:
5 px; }
.ycntmod .rcbtm div {background:url(右下線位址)
right bottom no-repeat; font-size:0;
position:relative; height:
左下線高 px;
right: -5 px; }
.ycntmod .rcl {padding-left:
左線寬 px; background:url(左線位址)
repeat-y;}
.ycntmod .rcr {zoom:1; padding-right:
右線寬 px; background:url(右線位址)
right repeat-y; }
.ycntmod .text {position:relative; word-break:break-all; }
.yc3pribd .ycntmod{overflow:visible; }
.yc3pribd .ycntmod .yblogcnt{overflow:hidden; }
|
語法說明：
shared rounded corner for all modules
|
shared=共有、分擔。rounded=全面發展。
corner=角、線交會點。
modules=模組、組件。
| ycntmod {……}
| | width:100%;
| 寬：佈滿
| position:relative;
| position:relative=位置（放…適當位置）：
相對的、成比例的
| margin-bottom:10
px;
| margin-bottom=邊、頁邊空白-底：
| overflow:hidden;
| overflow:hidden=滿溢：隱藏
| .ycntmod .rctop {……}
| 左上框線（rctop=上框線）
| zoom:1; background:url(左上線位址)
left top no-repeat;
| 圖層:1；_線圖位址
左_上框線_不重複貼圖
| margin-right:5
px;
| margin-right=邊、頁邊空白-右：
| .ycntmod .rctop div {……}
| 右上框線
| background:url(右上線位址)
right top
no-repeat;
| 線圖位址
右_上框線_不重複貼圖
| font-size:0;
| 這裡設字大小做啥？
| position:relative;
| position:relative=位置、把…放適當位置：相對的
| height:左上線高
px;
| 高：左上框線的高
| right:-5
px;
| 右：
| .ycntmod .rcbtm {……}
| 左下框線（rcbtm=下框線）
| zoom:1; background:url(左下線位址)
left bottom no-repeat;
| 圖層:1；_線圖位址
左_下框線_不重複貼圖
| margin-right:5
px;
| margin-right=邊、頁邊空白-右：
| .ycntmod .rcbtm div {……}
| 右下框線
| background:url(右下線位址)
right bottom no-repeat;
| 線圖位址
右_下框線_不重複貼圖
| font-size:0;
| 這裡設字大小做啥？
| position:relative;
| position:relative=位置、把…放適當位置：相對的
| height:左下線高
px;
| 高：左下框線的高
| right:-5
px;
| 右：
| .ycntmod .rcl {……}
| 左框線（rcl=左框線）
| padding-left:左線寬
px;
| 左框線寬。padding-left=填滿、補白-左
| background:url(左線位址)
repeat-y;
| 線圖位址_重複貼圖於垂直方向
| .ycntmod .rcr {……}
| 右框線（rcr=右框線）
| zoom:1; padding-right:右線寬
px;
| 右框線寬。padding-left=填滿、補白-右
| background:url(右線位址)
right repeat-y;
| 線圖位址_左_重複貼圖於垂直方向
| .ycntmod .text {……}
| text=文字
| position:relative;
| position:relative=位置、把…放適當位置：相對的
| word-break:break-all;
| word-break:break-all=文字-破壞、中斷：中斷-全部
| .yc3pribd .ycntmod{……}
| | overflow:visible;
| overflow:visible=滿溢：可看見
| .yc3pribd .ycntmod
.yblogcnt{……} | | overflow:hidden;
| overflow:hidden=滿溢：隱藏的
| | | |
語法範例：
myshero重新整理編輯\97.08.07-04
|
|
～文章框架來自~~愛在★‧星夜天空下想您‧‧~~～
留言列表
留言列表
雅虎部落文 (21)
