痞客邦 - 版型 CSS語法對照表

2014051213:07

http://mypaper.pchome.com.tw/vevz09/post/1320771285

痞客邦 - 版型 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: [email protected]
* 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 鍵空出位置
然 後 在 空 出 的 位 置 處{貼上語法}