分享: 7Headlines facebook PLURK twitter  

本文引用自on0216 - 痞客邦部落格版型 CSS語法對照表 雜蒐

轉自 http://mypaper7.pchome.com.tw/vevz09/post/1320771285

 

 

        訊,包 含﹝樣   者、樣   態﹞...   訊。 

/*------------------- #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 空出位置

        {貼上語法}