close

(注意看~用心學)


定義連結字串：這裡的設置將作用於全部連結字串







/* 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;指滑鼠移至連結字串所變化之字色
background-color:#FFFF00;滑鼠移到連結字串時產生之字底色
position:relative;定義滑鼠移到連結字串時字會下沉產生動感＜position:relative=位置、姿勢：相對的、有關係的＞
top: 2px; left:2px;上邊拉開 2px; 左邊拉開 2px。↑需與上配合
  


語法範例：






/* 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=文字-排成一行：右＞
  


語法範例：






/* Nav module list　連結字串前加圖示 */
.ycntmod .mbd ul.list li {background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgBeingA04.gif) no-repeat; padding-left:18px; margin-bottom:7px; }
.ycntmod .mbd ul.list li.more {background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgBeingA02.gif) 50px no-repeat; }



無框線設置：






/*　無框線設置　*/
.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 modulesshared=共有、分擔。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=滿溢：隱藏的
  


語法範例：









這是 玄音小棧 提供的框線請參考：


/*shared rounded corner for all modules紫色welcome噗噗框線圖加框語法*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/f01.gif) left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url(http://hk.geocities.com/ccloud67tw/Table/f02.gif) right top no-repeat;height:40px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url(http://hk.geocities.com/ccloud67tw/Table/f03.gif) left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url(http://hk.geocities.com/ccloud67tw/Table/f04.gif) right bottom no-repeat;height:16px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:12px;background:url(http://hk.geocities.com/ccloud67tw/Table/f05.gif) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:13px;background:url(http://hk.geocities.com/ccloud67tw/Table/f06.gif) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}


http://tw.myblog.yahoo.com/My-Happy/article?mid=10&prev=11&next=9&l=a&fid=7
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 林建良 的頭像
    林建良

    DIY玩化學

    林建良 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄