痞客邦 - 版型 CSS語法對照表－〆撕鈊裂肺的小窩

痞客邦﹝版型﹞修改 - 參考用

有需要的格友，

請自行參考。

字體如果太小看不清楚 ...

請將需要的部份，

複製後，

貼到電腦記事本即可。

整個痞客邦相關資訊，
包含
﹝樣板作者、樣式型態﹞
... 等資訊。

/*------------------- #Generate By Pixnet ------------------------ */
/*------------------------ #comment-table ------------------------ */
#comment-form table { width: 96% ; margin: 0 auto ;}
#comment-form td , #comment-form th { border: 1px solid #555 ; padding: 3px 5px; }
#comment-form input#send-comment { padding: 3px 5px ; }

.article-content p{
margin-bottom:1em;
}
/*------------------------ #Generate End ------------------------ */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,
textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:0;
}
pre{
font-size: 1em ;
}
.article-content{
_height: 1% ;
overflow: hidden ;
_overflow: none;
}

/***************************************************/
* PIXNET blog template for Fahrenheit Blog Design Contest.
*
* Version: 1.1
* Author: Lee, Yim Chi
* Email: yclee82@yahoo.com
* Website: http://blog.pixnet.net/wannebe
***************************************************/

* {
padding: 0;
margin: 0;
}

整個樣板頁面

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;﹝字體大小﹞
background: #FFF﹝背景顏色﹞
url(http://i390.photobucket.com/albums/oo347/RuNm8v7/
blog%20background%20use/32x32-1.jpg)｛背景圖片﹝網址﹞｝
repeat top left;｛背景圖片﹝重複、置頂、靠左﹞｝
cursor:URL(http://www.geocities.jp/linda5437love/52linda0072.ani);｛滑鼠﹝網址1﹞｝
color: #444;
}

a {
color: #657CFC;
text-decoration: none;
}

a:hover {
text-decoration: underline;｛滑鼠移至連結時﹝沒有底線﹞｝
cursor:url(http://sky.geocities.jp/lovetyhgf/1.cur);｛滑鼠﹝網址2﹞｝
}

管理後台﹝發表新文章、管理後台﹞

#authority {
background: url(http://link.photo.pchome.com.tw/s12/vevz09b/
30/126833441090/)｛背景圖片﹝網址﹞ ｝
no-repeat｛背景圖片﹝不重複﹞ ｝
bottom center;height: 38px;｛背景圖片﹝高度﹞ ｝
text-align: right;﹝文字靠右﹞
padding: 22px 190px 12px 20px;｛背景圖片﹝上、下、左、右﹞的距離｝
font-size: 20px;｛﹝字體大小﹞｝
}

#authority a {
color: #b51c4f;font-weight:bold;
margin-right: 10px;
}

所有內容區塊

#container {
width: 980px;
margin: 15px auto 25px auto;
background-color: #FFF;
border: solid 1px #999;
}｛所有內容區塊1｝

#container2 {
margin: 0;
padding: 0;
}｛所有內容區塊2｝

#container3 {
margin: 0;
padding: 10px;
}｛所有內容區塊3｝

橫　幅

#header {
position: relative;
width: 100%;
margin-bottom: 15px;
}｛上方﹝橫幅區塊﹞｝

#login-bar {
font-size: 80%;
text-align: right;
margin-bottom: 10px;
}｛上方﹝登入區塊﹞｝

#banner {
background: #FFF﹝背景顏色﹞
url(http://i390.photobucket.com/albums/oo347/RuNm8v7/
blog%20banner/yam/vevz09/-vevz09-Banner-1-1.jpg) ｛背景圖片﹝網址﹞｝
no-repeat top left; ｛背景圖片﹝不重複、置頂、靠左﹞｝
height: 620px;｛背景圖片﹝高度﹞｝
padding: 15px 20px;｛背景圖片 - 距離整個橫幅區塊的﹝上、下、左、右﹞的距離｝
}

#banner h1 {
font-size: xx-large; ﹝字體大小﹞
font-style: italic; ﹝字體風格﹞
font-family: "Simhei", sans-serif; ﹝字型﹞
font-weight: 800; ﹝標題區塊寬度﹞
}｛網誌標題﹝字體大小、字型、風格、標題區塊寬度﹞｝

　

#banner h1 a, #banner h1 a:hover {
color: #6600FF;﹝連結字體顏色﹞
text-decoration: none;﹝刪除連結底線﹞
}｛網誌標題﹝連結狀態﹞｝

#banner h2 {
color: #0066FF;﹝字體顏色﹞
padding: 16px 0px; ﹝網誌描述的位置﹞
font-size: 16px; ﹝字體大小﹞
WIDTH: 420px; ﹝網誌描述區塊的寬度﹞
letter-spacing : 3pt; ﹝每個字之間的距離﹞
BACKGROUND-IMAGE: url(http://link.photo.pchome.com.tw/
s12/vevz09b/24/126833956229/); ﹝網誌描述區塊的背景圖片網址﹞
}｛網誌描述﹝字體顏色、大小、字型、風格、標題區塊寬度、背景圖片﹞｝

跳到主文

.skiplink {
position: absolute;
top: 0;
left: 0;
font-size: 80%;
}

部落格 - 全站分類

#blog-category {
position: absolute;
bottom: 5px;
right: 10px;
font-size: 80%;
color: #FFF;
}

#blog-category a {
color: #990202;
}﹝字體顏色﹞

#blog-category a:hover {
color: #E6BE20;﹝連結字體顏色﹞
}

其他服務業面導覽

#navigation {
position: absolute;
left: 0;
bottom: 30px;
float: left;
width: 930px;
background: #000 url(http://00000000.gif) repeat-x left top;
padding: 2px 15px;font-size:20px;letter-spacing : 5pt;
}｛橫幅下方的四個主要頻道﹝相簿、部落格、留言、名片﹞｝

#navigation li {
float: left;
margin-right: 15px;
}

#navigation li a {
float: left;
display: block;
padding: 8px 15px;
color: #FFF;
font-weight: 700;
}

#navigation li a:hover {
color: #E6BE20;
text-decoration: none;
}

#navigation #link-album a {
background: url(http://pic.pimg.tw/wannebe/1199061866.gif) no-repeat left center;
padding-left: 123px;
}｛橫幅下方的四個主要頻道﹝相簿未連結時的背景圖片﹞｝

#navigation #link-album a:hover {
background: url(http://pic.pimg.tw/wannebe/1199061867.gif) no-repeat left center;
}｛橫幅下方的四個主要頻道﹝相簿連結時的背景圖片﹞｝

#navigation #link-blog a {
background: url(http://pic.pimg.tw/wannebe/1199062480.gif) no-repeat left center;
padding-left: 86px;
}｛橫幅下方的四個主要頻道﹝部落格未連結時的背景圖片﹞｝

#navigation #link-blog a:hover {
background: url(http://pic.pimg.tw/wannebe/1199062481.gif) no-repeat left center;
}｛橫幅下方的四個主要頻道﹝部落格連結時的背景圖片﹞｝

#navigation #link-guestbook a {
background: url(http://pic.pimg.tw/wannebe/1199063111.gif) no-repeat left center;
padding-left: 187px;
}｛橫幅下方的四個主要頻道﹝留言板未連結時的背景圖片﹞｝

#navigation #link-guestbook a:hover {
background: url(http://pic.pimg.tw/wannebe/1199063125.gif) no-repeat left center;
}｛橫幅下方的四個主要頻道﹝留言板連結時的背景圖片﹞｝

#navigation #link-profile a {
background: url(http://pic.pimg.tw/wannebe/1199062484.gif) no-repeat left center;
padding-left: 133px;
}｛橫幅下方的四個主要頻道﹝版主名片未連結時的背景圖片﹞｝

#navigation #link-profile a:hover {
background: url(http://pic.pimg.tw/wannebe/1199062485.gif) no-repeat left center;
}｛橫幅下方的四個主要頻道﹝版主名片連結時的背景圖片﹞｝｝

#main {
clear: both;
width: 960px;
padding: 0 0 10px 0;
margin: 0;
float: left;
}

#content {
width: 650px;
float: left;
padding: 0;
margin: 0 50px 0 0;
}

文章內容區

.article-head a, .article-content a {
color: #990202;
}

.article-content a:hover {
color: #E6BE20;
}

#article-area, #article-box {
margin: 0;
padding: 0;
float: left;
width: 650px;
}

.article {
padding: 0;
margin-bottom: 30px;
clear: both;
float: left;
width: 650px;
}

.article-head .publish {
font-size: 70%;
text-align: right;
margin-bottom: 3px;
padding: 0;
color: #666;
}

.article-head .title h2, h3.article-area-title｛﹝文章標題﹞｝ {
font-size: 120%;
font-weight: bold;
margin-bottom: 10px;
background: url(http://link.photo.pchome.com.tw/s12/
vevz09b/30/126832959941/) ｛文章標題﹝標題圖框﹞｝
no-repeat left center;｛標題圖框﹝不重複、靠左﹞｝
padding: 0 0 0 56px;
border-bottom: solid 0px #b51c4f;
margin-bottom:20px;letter-spacing : 1pt;

padding:56px;
}｛標題圖框﹝整體位置﹞｝

.article-body {
margin-bottom: 5px;
}｛標題圖框﹝整體位置﹞｝

.article-body .author {
font-size: 90%;
text-align: right;
color: #666;background:url() left top repeat;
}

.article-footer {
float: left;
text-align: right;
font-size: 80%;
color: #666;
width: 100%;background:url(http://i390.photobucket.com/albums/oo347/RuNm8v7/blog%20background%20use/10-02-01-012.png) left top repeat; border-bottom: solid 6px #b51c4f;
}｛文章﹝附加資訊﹞｝

.article-footer .refer {
float: left;
}｛文章分類﹝分類資料夾﹞｝

.article-footer .refer li {
float: left;
margin-right: 15px;
}｛文章分類資料夾﹝個人分類﹞｝

.article-footer .back-to-top {
float: right;
}

#user-post {
clear: both;
}｛﹝文章回應區塊﹞｝

#trackback-box {
margin-bottom: 15px;
}｛﹝回到首頁﹞｝

#trackback-box h3, #comment-box h3 {
font-weight: bold;
margin-bottom: 10px;
}｛﹝留下回響﹞｝

.page {
clear: both;
margin: 10px 0 0 0;
text-align: center;
}

#content .main-list, #content .main-list table {
width: 100%;
}

#content .main-list th {
background-color: #DDD;
font-weight: bold;
padding: 5px 10px;
}

#content .main-list td {
padding: 3px 10px;
border-bottom: solid 1px #DDD;
}

#links {
width: 250px;
display: inline;
float: right;
}

側邊欄位｛含﹝自由欄位﹞｝

.box {
margin-bottom: 20px;
border-bottom: solid 5px #b51c4f;
padding-bottom: 10px;
clear: both;
width: 250px;
}

.box-title{color: #b51c4f; ﹝側邊欄位標題 - 標題文字顏色﹞
background:url(http://link.photo.pchome.com.tw/s12/
vevz09b/30/126833114597/) ﹝側邊欄位標題圖框﹞
no-repeat;﹝側邊欄位標題圖框 - 不重複﹞
text-align:left;﹝側邊欄位標題圖框 - 靠左﹞
height:55px;﹝側邊欄位標題圖框 - 高度﹞
font-size:medium;letter-spacing : 2pt;﹝側邊欄位標題 - 標題文字大小、每個字之間的距離﹞
font-weight:700;﹝側邊欄位標題圖框 - 整體寬度﹞
padding:26px 0 0 56px;﹝側邊欄位標題圖框 - 位置與距離﹞
}

.box-text {
padding: 0 10px;
}﹝側邊欄位每一小區塊文字 - 位置與距離﹞

.box .inner-box {
margin-bottom: 10px;
}

.box-more {
clear: both;
font-size: 80%;
text-align: right;
}﹝側邊欄位 - 文章分類區塊 - 開合按鈕 - 位置與距離﹞

文章繼續閱讀

.more {
text-align:right;
background:#fff ﹝文章繼續閱讀 - 背景顏色﹞
url(http://i390.photobucket.com/albums/oo347/RuNm8v7
/blog%20guestbook%20use/t_09.gif) ﹝文章繼續閱讀 - 前方動態圖片﹞
no-repeat;﹝文章繼續閱讀 - 前方動態圖片 - 不重複﹞
padding-right:508px;
}﹝文章繼續閱讀 - 整體寬度﹞

月　曆

#links #calendar table {
width: 100%;
}﹝月曆﹞

#links #calendar th, #links #calendar tr {
text-align: center;
}

#links #calendar .month-nav th, #links #calendar .month-nav a {
color: #E6BE20;
font-weight: bold;
}﹝月曆 - 月份的文字設定﹞

#links #calendar .weekday th {
font-weight: bold;
}﹝月曆 - 星期的文字設定﹞

#links #calendar .today, #link #calendar .today a {
color: #990202;
font-weight: bold;
}﹝月曆 - 日子的文字設定﹞

碎碎念

#links #murmur .murmur-time {
font-size: 75%;
color: #666;
}﹝碎碎念的時間 - 文字大小、顏色、設定﹞

#links #mylink ul {
margin-left: 10px;
}﹝碎碎念的連結與位置設定﹞

#links #crumb li, #links #crumb li a {
display: block;
}

#footer {
clear: both;
width: 100%;
border-top: dashed 1px #999;
padding-top: 10px;
margin-top: 10px;
font-size: 90%;
text-align: center;
}

#footer a {
color: #999;
}

迴響整體區塊

.post-comment{
font-size: 0pt;
MARGIN: 10px 0px 10px 10px;
height:40px;
TEXT-ALIGN: RIGHT;
}

我要留言或迴響

.post-comment a{
DISPLAY: block;
BACKGROUND: url(http://p5.p.pixnet.net/albums/userpics/5/8/29758/1195056268.jpg) no-repeat 0px 0px ; WIDTH: 300px; height:40px;
font-size: 0px;
}

背景圖片與區塊的大小

TEXTAREA
{
BORDER-RIGHT: rgb(153,153,153) 1px solid; BORDER-TOP: rgb(153,153,153) 1px solid; FONT-SIZE: 16px;letter-spacing : 3pt;font-weight:bold; BACKGROUND-IMAGE: url(http://link.photo.pchome.com.tw/s12/vevz09b/24/126833771323/); BORDER-LEFT: rgb(153,153,153) 1px solid; WIDTH: 370px; COLOR: #000000; BORDER-BOTTOM: rgb(153,153,153) 1px solid; BACKGROUND-REPEAT: repeat; FONT-FAMILY: Arial,sans-serif; HEIGHT: 369px;WIDTH: 536px;
}

訪客迴響 -
文字﹝大小、顏色、字型﹞設定

li.post-text
{
FONT-SIZE: 16px;letter-spacing : 3pt;font-weight:bold;line-height : 200%;color : #00CC00;
}

版主回覆迴響 -
文字﹝大小、顏色、字型﹞設定

li.reply-text
{
FONT-SIZE: 16px;letter-spacing : 3pt;font-weight:bold;line-height : 200%;color : #6600FF;
}

｛﹝備　註﹞｝

如果您的 CSS 裡面

找不到上敘的其中幾個語法

請自行複製語法並在您的 CSS 最下方

然後按下鍵盤上的 Enter 鍵｛空出位置｝

然後在空出的位置處｛貼上語法｝