我要喊話
 e膜坊的首頁 » 所有日記 » 各式遊戲軟體應用 上一篇   下一篇
10
1

e膜坊
左右欄位加框
2008年10月28日  有彩虹  美妝日記  (加入收藏)
瀏覽:77   回應:   推薦人數:0   收藏人數:0  
日記地點

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


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


.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(底圖網址) #0000bf; 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(立體隆起線)





這篇日記發生在... 台北市南港區
當時有彩虹
台北市南港區附近

附近還沒有人寫日記喔~

歷史上的今天
延伸閱讀
[W3C標準] 8: CSS佈局入門 by rainie9999
好玩遊戲區 by kghskgh-潔兒
回應_引用+邊框 (框框隨意玩) by e膜坊
隱藏頁首快取及頁尾--視窗四邊加框線 by e膜坊
滑鼠指標移到超連結顯示立體彩邊框語法 by e膜坊

日記標籤:背景圖片 邊框 背景 border 色碼 ..(more)
 引用
 收藏
 轉寄


我要回應 (5~300個字)目前:0個字 
目前沒有任何回應
e膜坊的其他日記  
地圖情報
地圖日記網友刊登的廣告
你不敢!當面說的真情告白!
為自己出本美美專刊給你的夢中情人 Imbook最夯的個人DIY數位專刊交友

+我也要刊登


幸運日記