★微笑『步』殿堂★

關於部落格
記憶,是我回憶的一部份
我將回億放進,時光膠囊理
用文字代替一切用照片記錄一切。
  • 68882

    累積人氣

  • 1

    今日人氣

    0

    訂閱人氣

 【天空部落格語法】CSS相關明細



 


已下是天空部落格的CSS相關明細

你還再套用其他網友所提供的樣本嗎??

還在為有時套用的樣本,不是自己的需求而煩惱嗎??

看完以下的相關內容後,

不妨自己動手製作屬於自己的部落格吧!!




天空樣本設計位子→登入管理介面→管理首頁

→左邊的樣本設定→編制CSS檔


--------------------------------------------------------------------------------------------------------------------------------------


整體設計:
BODY
|整個網頁頁面
a
超連結


A:link
|尚未連結過的超連結
A:visited
|拜訪過的連結
A:active
|正按下的連結
A:hover
|游標在連結上方
DIV#mainFrame
|部落格整體框架設定

--------------------------------------------------------------------------------------------------------------------------------------

上面大區塊
DIV#banner
|上方banner設定 
DIV#companyBar
|天空連結設定
#banner DIV.bannerTitle
部落格標題設定


#banner DIV.description
|部落格描述設定
#adText 
|廣告連結設定
#navBar
|頻道選擇
#linkLogin
|登入連結設定


--------------------------------------------------------------------------------------------------------------------------------------
中間的大區塊
#contentBlock
|中間大區塊設定
#sideBlock 
|旁邊大區塊設定
#sideBlock DIV.sideColumn
|旁邊小區塊設定
#sideBlock DIV.sideTitle
|旁邊小區塊標題設定
#contentBlock DIV.sideContent 
|旁邊小區塊框線設定

 

--------------------------------------------------------------------------------------------------------------------------------------
文章大區塊
DIV#articleBlock
|文章(日記、播客)大區塊
DIV.blogmain 
|網誌單篇文章區塊
註:日記、播客設定改為:

DIV.diarymain 
|日記單篇文章區塊
DIV.podcastmain 
|播客單篇文章區塊
#articleBlock DIV.articleTopTitle 
|文章日期
DIV.articleTitle
|文章標題設定
DIV.articleCategory
|文章時間設定
DIV.articleSummary
 文章摘要設定
DIV.articleLink 
|文章發表資訊設定
DIV.articleColumn 
|文章及留言板區塊框線設定
DIV.articleTail
|文章區塊底層
DIV.articleBody 
|文章內文設定
INPUT.text 
|表格
TEXTAREA 
|表格輸入
DIV.commentBody 
修改版主回覆留言

 

--------------------------------------------------------------------------------------------------------------------------------------
底層的大區塊(版權宣告)
DIV#copyright |copyright(底層大區塊) 設定

 

--------------------------------------------------------------------------------------------------------------------------------------
留言板
#articleBlock DIV.childMenu 
|我要留言這四個字
DIV.articleColumn 
|留言內文
DIV.articleColumn TABLE 
|留言內文表格

 

--------------------------------------------------------------------------------------------------------------------------------------
相簿首頁設定
#bodyFrame |相簿首頁區塊設定
#adFrame 
|相簿旁邊大區塊設定(瀏覽統計、贊助商廣告、好友連結...)
#adFrame DIV.rightColumn 
|相簿旁邊小區塊設定

#adFrame DIV.rightTitle 
|相簿旁邊標題設定
#adFrame DIV.rightContent 
|相簿旁邊內容區塊設定
#bodyFrame TABLE.albumList 
|每本相簿大區塊 設定
#bodyFrame TD.albumList 
|每本相簿封面區塊 設定
TD.albumList IMG 
|相簿封面小區塊四邊設定
#bodyFrame TD.description 
|每本相簿資訊(相片數、人氣)
#bodyFrame DIV.albumTitle 
|每本相簿標題設定

#bodyFrame DIV.date 
|每本相簿發表時間設定

 

--------------------------------------------------------------------------------------------------------------------------------------
相簿內頁設定
#rightBlock 
|相片大區塊設定
DIV.usersAlbumTitle 
|誰誰誰的相簿標題設定
DIV.bigNote 
|所在分類設定
DIV.pageCtrl 
|推薦這個



*************************************************************************************************************
樣式種類 說明 
background-color 背景顏色 
background-image 
背景圖片 
border-top 
設定上邊框線 
border-bottom 
設定下邊框線 
border-left 
設定左邊框線 
border-right 
設定右邊框線 
border-color 
設定邊框顏色 
color 
設定文字顏色 
height 
設定高度 
width 
設定寬度 
text-align 
對齊方式 
text-decoration 
文字修飾方式 
font-size 
字型大小 
font-weight 
字型粗細 
background-attachment 
背景是否固定 
background-position 
背景圖片的位置 
background-repeat 
重複貼圖方式 
border-top-width 
設定上邊框線厚度 
border-bottom-width 
設定下邊框線厚度 
border-left-width 
設定左邊框線厚度 
border-right-width 
設定右邊框線厚度 
border-width 
設定邊框厚度 
border-style 
設定邊框樣式 
border-collapse 
邊框線重疊 
float 
設定文繞圖 
text-indent 
縮排 
text-transform 
大小寫轉換 
font-family 
字型名稱 
font-style 
字型樣式 
font-variant 
大小寫變換 
letter-spacing 
文字間距 
line-height 
設定行高 
list-style-type 
項目符號樣式 
margin 
設定邊界 
margin-top 
設定上邊界 
margin-bottom 
設定下邊界 
margin-left 
設定左邊界 
margin-right 
設定右邊界 
padding 
設定邊距 
table-layout 
表格配置方式

----------------------------------------------------------------------------------------------------------------------------------------
CSS文字屬性串聯樣式表
color : #525050  /*文字色彩*/ 
font-family : 
新細明體  /*文字字型*/ 
font-size : 
9pt  /*文字大小*/ 
font-style:itelic  /*
文字斜體*/ 
font-variant:small-caps  /*
小字體*/ 
letter-spacing : 
1pt  /*字間距離*/ 
line-height : 200%  /*
設定行高*/ 
font-weight:bold  /*
文字粗體*/ 
vertical-align:sub  /*
下標字*/ 
vertical-align:super  /*
上標字*/ 
text-decoration:line-through  /*
加刪除線*/ 
text-decoration:overline  /*
加頂線*/ 
text-decoration:underline  /*
加底線*/ 
text-decoration:none  /*
刪除連結底線*/ 
text-transform : capitalize  /*
首字大寫*/ 
text-transform : uppercase  /*
英文大寫*/ 
text-transform : lowercase  /*
英文小寫*/ 
text-align:right  /*
文字靠右對齊*/ 
text-align:left  /*
文字靠左對齊*/ 
text-align:center  /*
文字置中對齊*/


本文引用來自:
魔女音符請勿移除~ 謝謝!!



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