縱橫天下-圖文 教學 詩詞 桌布

關於部落格
→ → 點擊進入縱橫天下總目錄 ← ←
  • 403235

    累積人氣

  • 0

    今日人氣

    0

    訂閱人氣

天空-天空部落CSS改版法4-新版

最近天空好像來了很多新人,很多人來問我要如何改版,我知道的不是很多,這篇是我最近改版的筆記,提供給需要改版的人做參考~很多還沒註解,因為最近比較沒時間&懶~@@,若知道的人&不知道的人都可以留言一起分享^^

 


天空CSS標籤

    
 『文字屬性一覽』  
 @font-face/*下載字型*/ 
 color : #999999;/*文字色彩*/ 
 font:設定字體樣式、大小寫變化、粗細、大小、文字行列高度、字型 
 font-family : 細明體,sans-serif; /*設定文字字型*/ 
 font-size : 9pt; /*設定文字大小*/ 
 font-style:italic; /*設定字體樣式斜體 */ 
 font-style:normal; /*設定字體樣式正常 */ 
 font-variant:normal; /*設定字體變化正常*/ 
 font-variant:small-caps; /*設定字體變化小字體*/ 
 font-weight:bold; /*設定文字粗體*/ 
 font-weight:normal; /*設定文字正常*/ 
 letter-spacing : 1pt;/*字間距離*/ 
 line-height : 200%; /*設定行高*/ 
 text-align:center; /*文字置中對齊*/ 
 text-align:justify; /*文字分散對齊*/ 
 text-align:left; /*文字靠左對齊*/ 
 text-align:right; /*文字靠右對齊*/ 
 text-decoration:line-through; /*加刪除線*/ 
 text-decoration:none; /*刪除連結底線*/ 
 text-decoration:overline; /*加頂線*/ 
 text-decoration:underline; /*加底線*/ 
 text-transform : capitalize; /*首字大寫*/ 
 text-transform : lowercase; /*英文小寫*/ 
 text-transform : uppercase; /*英文大寫*/ 
 vertical-align:sub; /*下標字*/ 
 vertical-align:super; /*上標字*/ 
 word-spacing : 5px; /*半形空格的間距*/ 
 vertical-align屬性  
 vertical-align:bottom; /*垂直向下對齊*/ 
 vertical-align:middle; /*垂直置中對齊*/ 
 vertical-align:text-bottom; /*文字垂直向下對齊*/ 
 vertical-align:text-top; /*文字垂直向上對齊*/ 
 vertical-align:top; /*垂直向上對齊*/ 
 /*top*/
  
    
 『清單樣式屬性一覽』  
 list-style-image:url(dot.gif); /*圖片式符號*/ 
 list-style-position:inside; /*縮排*/ 
 list-style-position:outside; /*凸排*/ 
 list-style-type:circle;/*空心圓形符號*/ 
 list-style-type:decimal; /*阿拉伯數字*/ 
 list-style-type:disc;/*實心圓形符號*/ 
 list-style-type:lower-alpha; /*小寫英文字母*/ 
 list-style-type:lower-roman; /*小寫羅馬數字*/ 
 list-style-type:none; /*不編號*/ 
 list-style-type:square; /*實心方形符號*/ 
 list-style-type:upper-alpha; /*大寫英文字母*/ 
 list-style-type:upper-roman; /*大寫羅馬數字*/ 
 /*top*/
  
    
 『背景屬性一覽』  
 background:transparent; /*透視背景*/ 
 background-attachment : fixed; /*浮水印固定背景*/ 
 background-color:#F5E2EC; /*背景色彩*/ 
 background-image : url(image/bg.gif); /*背景圖片*/ 
 background-repeat : no-repeat; /*不重複排列*/ 
 background-repeat : repeat; /*重複排列-網頁預設*/ 
 background-repeat : repeat-x; /*x軸重複排列*/ 
 background-repeat : repeat-y; /*y軸重複排列*/ 
 指定背景位置 [ 以下方式皆可使用 ]  
 background-position : 90% 90%; /*背景圖片xy軸的位置*/ 
 background-position : bottom; /*向下對齊*/ 
 background-position : center; /*置中對齊*/ 
 background-position : left; /*向左對齊*/ 
 background-position : right; /*向右對齊*/ 
 background-position : top; /*向上對齊*/ 
 /*top*/
  

001
何謂新版&舊版


002
天空部落CSS改版法3-舊版


003

網誌外頁



004
隱藏系統公告&右上角掀頁廣告
http://blog.yam.com/hung888/article/18369076
http://blog.yam.com/hung888/article/50065198


005

網誌內頁













006
留言版留言框架&版主回覆框架

007
文章未登入留言框架



008

    
 HTML/*捲軸拉霸設定*/ 
 {  
 SCROLLBAR-FACE-COLOR: #f5d7ba; /*按鈕與移動捲軸-左上外邊框*/ 
 SCROLLBAR-HIGHLIGHT-COLOR: #ffffee; /*箭頭的顏色*/ 
 SCROLLBAR-SHADOW-COLOR: #ffffee; /*按鈕與移動捲軸-右下外邊框*/ 
 SCROLLBAR-3DLIGHT-COLOR: #ffffee; /*移動捲軸的面板顏色*/ 
 SCROLLBAR-ARROW-COLOR: #ffffee; /*按鈕與移動捲軸-左上內邊框*/ 
 SCROLLBAR-TRACK-COLOR: #ffffee; /*按鈕與移動捲軸-右下內邊框*/ 
 SCROLLBAR-DARKSHADOW-COLOR: #ffffee;/*捲軸底部顏色*/ 
 }  
    
 捲軸製造機1 http://yagin92.googlepages.com/15.htm  
 捲軸製造機2 http://cdh.idv.tw/cdh/no04.htm /*top*/ 
    
   




009

    
 A: { }/*所有超連結*/ 
 A:link/*一般超連結文字格式*/ 
 {  
 COLOR: #3333ff; /*連結顏色*/ 
 TEXT-DECORATION: none;/*文字樣式,none沒底線underline有底線*/ 
 }  
 A:visited/*瀏覽過的連結文字格式*/ 
 {  
 COLOR: #3333ff; /*瀏覽過的連結顏色*/ 
 TEXT-DECORATION: none;/*文字樣式,none沒底線underline有底線*/ 
 }  
 A:hover/*滑鼠移至連結*/ 
 {  
 BACKGROUND: #b3b3b3; /*滑鼠移至連結的背景顏色*/ 
 COLOR: #ff3300; /*滑鼠移至連結的顏色*/ 
 TEXT-DECORATION: none; /*文字樣式,none沒底線underline有底線*/ 
 cursor:help; /*滑鼠移至連結?*/ 
 }  
 A:active/*按下連結的格式*/ 
 {  
 BACKGROUND: #002040; /*按下連結的連結背景顏色*/ 
 COLOR: #6633ff; /*按下連結的連結顏色*/ 
 FONT-FAMILY: 新細明體; /*按下連結的連結文字字型*/ 
 TEXT-DECORATION: none;/*文字樣式,none沒底線underline有底線*/ 
 font-size: 14px;/*按下連結的連結文字大小*/ 
 } /*top*/ 
    

/*top*/

 
010

    
 HR  
 {  
   COLOR: #ffffff; HEIGHT: 1px;  
 } /*top*/ 
    

/*top*/


011

    
 /*部落格整體*/  
 BODY/*整個網頁頁面*/ 
 {  
 BORDER-RIGHT: medium none;   
 BORDER-TOP: medium none;   
 FONT-SIZE: 11px;   
 BACKGROUND: #ffffcc fixed no-repeat left top;   
 MARGIN: 0px;   
 BORDER-LEFT: medium none;   
 COLOR: #000000;   
 BORDER-BOTTOM: medium none;   
 FONT-FAMILY: Verdana, Arial, Georgia, Helvetica, sans-serif;  
 } /*top*/ 
    
012
修改文章內部自動斷行
0010文字間距.jpg


013
邊欄文章分類前面那個小圖示背景


 

014
邊欄整體框架
#mainFrame       
{
  MARGIN: 0px auto; WIDTH: 960px; POSITION: relative; TEXT-ALIGN: left;
}


/*top*/


015
最上面屋頂那個橫樑#topbar



變更天空屋頂那條橫樑topbar

↑回頂頁

016
推薦數設定

#commend
{
TEXT-ALIGN: center;
MARGIN-TOP: 5px;
WIDTH: 230px;
FLOAT: left;
COLOR: #ffff00;
MARGIN-LEFT: 0px;
FONT-SIZE: 12pt;
}

教學 CSS改版第五版

017

推薦數向左移 #commend 
天空推薦數往左移

018

刪掉推薦數前面那個小圖示背景


/*top*/


019
天空部落網誌標題字設定舊版
020
新版
教學 CSS改版第五版


021
邊欄字色
.sideContent    
        
{
  PADDING-RIGHT: 25px; BACKGROUND-POSITION: 50% top; PADDING-LEFT: 35px; PADDING-BOTTOM: 10px; COLOR: #660000; LINE-HEIGHT: 18px; PADDING-TOP: 5px; FONT-FAMILY: verdana,
\\\\\"新細明體\\\\";
}





/*top*/



022
去掉文章背景
#articleBlock         

{
  PADDING-LEFT: 10px; FLOAT: right; PADDING-BOTTOM: 10px; OVERFLOW: hidden; WIDTH: 690px; BORDER-TOP-STYLE: none; LINE-HEIGHT: normal; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none;
}


/*top*/

033
文章標題框設定
.post_title
 
{
PADDING-RIGHT: 10px;
PADDING-LEFT: 25px;
FONT-WEIGHT: bold;
FONT-SIZE: 24px;
BACKGROUND-IMAGE: url(
http://pics11.blog.yam.com/14/userfile/h/hung888/album/1492aa71f7531a.jpg);
PADDING-BOTTOM: 10px;
COLOR: #4040ff;
PADDING-TOP: 10px;
BACKGROUND-REPEAT: no-repeat;
FONT-FAMILY: 標楷體;
LETTER-SPACING: 1px;
}

0011標題欄.gif

/*top*/


034
文章標題字設定
.post_titlediv     
{
  FONT-WEIGHT: bold; FONT-SIZE: 15px; MARGIN-LEFT: 18px; PADDING-TOP: 0px; FONT-FAMILY:
verdana,\\\"新細明體\\\";
}



/*top*/


035

.post_date
{
  FONT-WEIGHT: bold; FONT-SIZE: 11px; Z-INDEX: 100; MARGIN-BOTTOM: 0px; MARGIN-LEFT: 28px; WIDTH: 200px; COLOR: #badbbb; FONT-FAMILY: Verdana; LETTER-SPACING: 0px; TEXT-ALIGN: left;
}



/*top*/

036
鼓勵網誌
.cheer 
{
BACKGROUND-POSITION: left 50%;
PADDING-LEFT: 5px;
FONT-SIZE: 11px;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 35px;
}

0012鼓勵網誌1.gif

/*top*/


037
文章內文設定
.post_content     
{
  PADDING-RIGHT: 30px; PADDING-LEFT: 10px; FONT-SIZE: 13px; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 5px; LINE-HEIGHT: 1.8em; PADDING-TOP: 5px; FONT-FAMILY:
verdana,\\\\\"新細明體\\\\\"; HEIGHT: 100%;
}

/*top*/


038
ID&暱稱字色
SPAN.highlight    
{
  FONT-WEIGHT: bold;
}


/*top*/

039
相簿設定



040



div.albumDesc

{
MARGIN-TOP: 68px; 與上面距離
BACKGROUND: #DAC8B6; 背景顏色
COLOR: #006699; 
字體顏色
FONT-SIZE: 12pt; 字體大小
}

041


div.albumview
{
MARGIN-TOP: 145px; 與上面距離
MARGIN-LEFT: 100px; 與左邊距離
}



/*top*/


042
單篇相片說明註解
.photoviewDesc
{
  WIDTH: 100%;
}

教學 CSS改版第五版

/*top*/


043
單張相片留言內容、留言的時間、我是廣告


044

    
 文章大區塊  
 DIV#articleBlock文章(日記、播客)大區塊 
 {  
 BORDER-RIGHT: medium none;   
 PADDING-RIGHT: 0px;   
 BORDER-TOP: medium none;   
 PADDING-LEFT: 0px;   
 BACKGROUND-IMAGE: none;   
 PADDING-BOTTOM: 0px;   
 BORDER-LEFT: medium none;   
 WIDTH: 770px;   
 PADDING-TOP: 0px;   
 BORDER-BOTTOM: medium none;   
 BACKGROUND-REPEAT: no-repeat;  
 } /*top*/ 
    


045

    
 DIV#mainFrame/*部落格整體框架設定*/ 
 {  
 BORDER-RIGHT: medium none;   
 BORDER-TOP: medium none;   
 BACKGROUND-IMAGE: none;   
 BORDER-LEFT: medium none;   
 WIDTH: 997px;   
 BORDER-BOTTOM: medium none;  
 }  
    

/*top*/

046
觀看全文
DIV#post_content    
{
FONT-SIZE: 51px;
}



/*top*/


047
邊欄文字區底色

#MainSide DIV.sideColumn
{
  BORDER-RIGHT: medium none; BORDER-TOP: medium none; BACKGROUND-IMAGE: none; MARGIN-LEFT: 0px; BORDER-LEFT: medium none; MARGIN-RIGHT: -10px; BORDER-BOTTOM: medium none; BACKGROUND-COLOR: #cccc99;
}



/*top*/

048
邊欄標題底圖

#MainSide DIV.sideTitle 
{
BORDER-RIGHT: medium none;
BORDER-TOP: medium none;
BACKGROUND-IMAGE: url(http://pics11.blog.yam.com/2/userfile/h/hung888/album/1495288bdd5847.gif);
BORDER-LEFT: medium none;
COLOR: #663333;
BORDER-BOTTOM: medium none;
BACKGROUND-COLOR: #999966;
}

0011標題欄.gif

/*top*/


049
版主回覆 

DIV.bmreply       /*-------說明-------*/ /*版主回覆*/
{ 
BORDER-LEFT: 1px solid; /*左邊框線*/
BORDER-RIGHT: 1px solid; /*右邊框線*/
BORDER-TOP: 1px solid; /*上邊框線*/
BORDER-BOTTOM: 1px solid; /*下邊框線*/
BACKGROUND: url(http://pics11.blog.yam.com/14/userfile/h/hung888/album/1492423db207b5.jpg); /*版主回覆背景圖*/
WIDTH: 723px; /*版主回覆背景圖寬度*/
FONT-SIZE: 14pt; /*文字大小*/
COLOR: #ffffff/*文字顏色*/
FONT-FAMILY: 標楷體; /*文字字型*/
line-height : 112%;/*版主回覆背景圖高度*/
} 

版主回覆.jpg

/*top*/

050
個人資料設定

DIV.profile_title     部落格資料-個人資料-自我介紹
{
COLOR: #000000; 文字體顏色
FONT-SIZE: 16pt; 文字體大小
FONT-WEIGHT: bold; 文字體粗體
text-align:center; 文字置中對齊
letter-spacing : 5pt; 文字間距離
FONT-FAMILY: 標楷體; 文字字型
}

051

.profile_title
{
  BORDER-BOTTOM: rgb(189,234,238) 1px dotted; BORDER-LEFT: rgb(189,234,238) 1px dotted; LINE-HEIGHT: 140%; MARGIN-TOP: 10px; PADDING-LEFT: 16px; WIDTH: 650px; MARGIN-BOTTOM: 10px; BACKGROUND: rgb(247,247,247); CLEAR: both; FONT-SIZE: 14px; BORDER-TOP: rgb(189,234,238) 1px dotted; FONT-WEIGHT: bold; BORDER-RIGHT: rgb(189,234,238) 1px dotted; PADDING-TOP: 3px; moz-background-clip: -moz-initial; moz-background-origin: -moz-initial; moz-background-inline-policy: -moz-initial; background-color:#FF55A8; COLOR: #ffffff;
}

.th_title
{
  TEXT-ALIGN: center; PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; WIDTH: 90px; PADDING-RIGHT: 5px; COLOR: #ffffff; FONT-WEIGHT: normal; PADDING-TOP: 5px; background-color:#611BA3;
}

.td_desc
{
  COLOR: rgb(166,166,166);
}

.introduce
{
  PADDING-BOTTOM: 30px; LINE-HEIGHT: 22px; PADDING-LEFT: 33px; COLOR: rgb(102,102,102); FONT-SIZE: 13px;
}



052


【教學】CSS改版第4版



053
 留言版分格線

TD.comment_item_text   
{
  BACKGROUND-IMAGE: url(圖片網址); BACKGROUND-REPEAT: no-repeat; COLOR: #000000;
}



054
 文章回應格內字體設定

【教學】CSS改版第4版

TEXTAREA
{FONT-FAMILY: Verdana,新細明體; BACKGROUND: rgb(235,253,255); FONT-SIZE: 12px;}


055
隱藏邊欄廣告贊助商
DIV#sponsorAd
{
display: none;
}




其他請參考
程式語法010天空篇 天空部落樣板小幫手改版法2
程式語法062天空篇 天空部落CSS改版法3-舊版
程式語法088天空篇 天空部落CSS改版法4-新版


【天空語法】


相簿設定
標籤設定
相簿狀態