企鵝碎碎唸

這款樣式是參考站上公眾樣式的CSS語法，再加上自己的修改和美化版面。
至於版面滴部份則是以部落格現有的圖案再做修改而成的…
三版的修改如下：
一_．修正之前側欄欄位的問題。
二_．調整幾處文字的字型、顏色和位置。
三_．增加網頁上方「我的碎碎唸」和「熱門文章」的捲軸。
四_．美化標頭和公告欄的背景圖檔。


雖然已經經過反覆的檢查、修正，但也不敢保證完全都沒問題！
套用後有啥問題滴，還請留言告知…

喜歡的朋友就拿去用吧～～
 
註：97/11/12 分享滴二版在「這裡」
註：97/11/08 分享滴初版在「這裡」
 
 
完整的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 ------------------------------- */ /*---------------------------------------------------------------------*/ /*-- 貓咪の世界（CAT's WORLD） 97/11/15 三版 Build by 企鵝（tzoyiing）--*/ /*---------------------------------------------------------------------*/ /*-- 註１：網誌名稱不要輸入超過７個字，以免超過範圍被截掉！----------------*/ /*---設定值---*/ 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; } #main{ clear:both; overflow:hidden; width:1003px; } /*--整體設定--*/ body{ color:#4D4C4D; font-size:small ; font-family:"Verdana" ; } #body-div { width:1003px; position:relative; margin:0 auto; } br { letter-spacing:0; } /*--捲軸--*/ html #murmur{ scrollbar-face-color: #c0bec1; scrollbar-shadow-color: #dbd6d2; scrollbar-highlight-color: #dbd6d2; scrollbar-3dlight-color:#dbd6d2; scrollbar-darkshadow-color: #dbd6d2; scrollbar-track-color: #dbd6d2; scrollbar-arrow-color: #dbd6d2; } html #hot-article{ scrollbar-face-color: #b8b7b9; scrollbar-shadow-color: #c0bec1; scrollbar-highlight-color: #c0bec1; scrollbar-3dlight-color:#c0bec1; scrollbar-darkshadow-color: #c0bec1; scrollbar-track-color: #c0bec1; scrollbar-arrow-color: #c0bec1; } /*--超連結--*/ a{ color:#1A73E1; text-decoration:none ; } /*--滑鼠移動到超連結上時--*/ a:hover{ color:#07115e; text-decoration: none ; } /*---登入後管理的服務---*/ #authority{} #authority a{ display: block; height: 25px; margin-left: 2px; margin-top:112px; font-size: 0px; } #authority a#newpost { background: url(http://p4.p.pixnet.net/albums/userpics/4/4/172344/491ae81c0e4f9.gif) left top no-repeat;width:75px;position:absolute;left:95px;top:-113px; } #authority a#backstage { background: url(http://p4.p.pixnet.net/albums/userpics/4/4/172344/491ae81c0e4f9.gif) right top no-repeat;width:65px;position:absolute;left:180px;top:-113px; } /*---所有內容 ---*/ #container { width:1003px; background:url(http://i46.photobucket.com/albums/f102/wakaka_214/share1/Background_share_1003X90_08-11-0-13.jpg) repeat-y center; margin:0px auto; } /*--主要內容區+側邊欄位區--*/ #main{} /* ----------------------橫福---------------------*/ /*---登入登出功能列---*/ #login-bar{ margin-left: 650px; top:2px; position: absolute; } #login-bar a{} /*--頁面上方區塊-不包括登入功能列--*/ #header { width:1003px; height:277px; background-image:url(http://i46.photobucket.com/albums/f102/wakaka_214/share1/HEADER_CAT_share_08-11-15.jpg); background-position:center; background-repeat:no-repeat; } #banner{ text-align: left; } /*--部落格標題--*/ #banner h1 a { position:absolute; font-weight:700; margin-left:75px; width:190px; height:36px; overflow:hidden; text-align:center; top:39px; font-family: Arial, Helvetica, sans-serif, Tahoma, SimSun; font-size:26px; color:#ffffff; } #banner h1 a:hover { color:#52039b; } /*--部落格描述--*/ #banner h2 { font-weight: bold ; font-size:20px; font-family: Arial, Helvetica, sans-serif, Tahoma, SimSun; position:absolute; color:#ffffff; text-align:left; margin-left:350px; top:238px; } /*--跳到主文+部落格全站分類--*/ #banner .skiplink{display:none;} #blog-category{display:none;} /*--其他服務連結區塊內的所有連結--*/ #navigation { position: absolute; background: url(http://p4.p.pixnet.net/albums/userpics/4/4/172344/491ae6f68e0fc.gif) no-repeat top left; left:674px; top:205px; width: 293px; height: 27px; } #link-profile a,#link-album a,#link-guestbook a,#link-blog a { display: block; height: 27px; font-size: 0px; color: #CBC7C8; } #link-profile a:hover,#link-album a:hover,#link-guestbook a:hover,#link-blog a:hover { display: block; text-decoration: none; height: 27px; font-size: 0px; color: #07115e; } /*--相簿連結--*/ #link-album { display: block; width: 70px; left:0px; top:0px; } /*--部落格連結--*/ #link-blog { position: absolute; width: 70px; left:75px; top:0px; } /*--留言版連結--*/ #link-guestbook { position: absolute; width: 70px; left:150px; top:0px; } /*--名片連結--*/ #link-profile { position: absolute; width: 70px; left:225px; top:0px; } /* ----------------------主要內容---------------------*/ /*--主要內容區--*/ #content{ background-color:#ffffff; width:690px ; float:left; overflow:hidden; margin: 0px 10px 0px 10px; padding:0px 10px 0px 10px; } /*--公告區--*/ #spotlight{ width: 690px; height: 110px; margin: 0px 0px 10px 3px; background:url(http://i46.photobucket.com/albums/f102/wakaka_214/share1/_share_680X110_08-11-15.jpg) no-repeat left top ; } #spotlight h5{display: none; } #spotlight-text{ text-align: left; padding: 10px 10px 35px 35px ; } #spotlight-text a{ color: #646464; } /*---文章標題的圖示---*/ .article-head { background:url(http://p4.p.pixnet.net/albums/userpics/4/4/172344/48dee0510d5db.gif) left top no-repeat; height:49px; padding-left:50px; } /*--所有文章區塊--*/ #article-area{} /*--所有文章區塊標題(選擇觀看單一分類文章時的標題)--*/ .article-area-title { text-align:left; padding-bottom:11px; margin:10px 0 0 5px; } /*--瀏覽方式--*/ #display { text-align:center; margin-left:5px; } /*--瀏覽方式這四個字--*/ #display span{} /*--標題列表/簡短摘要--*/ #display a{} /*--單一篇文章--*/ .article { margin-bottom:20px; border-bottom:1px solid #ccc; } /*--發表時間--*/ .publish { font-size:10px; font-family:Verdana; padding: 1px 0px 0px 0px; } /*--月份+日期+星期+年+時間--*/ .month{} .date{} .day{} .year{} .time{} /*--文章標題--*/ .title h2 a{ font-size: 16px ; font-weight: bold ; color:black ; } .title h2 a:hover{ color: #787777; } /*--文章標題前的密碼圖示/隱藏圖示/好友保護圖示--*/ .title h2 img{} /*--單一篇文章中間區塊--*/ .article-body{ margin-top:20px; margin-bottom:0px; } /*--文章內容--*/ .article-content{ line-height: 160% ; margin : 5px 0px ; word-wrap : break-word; } /*--全文閱讀--*/ .more { float:right; margin-right:20px; } /*--全文閱讀的圖示--*/ .more a { color:#fff; display:block; font-size:0px; font-weight:normal; margin-top:10px; margin-bottom:10px; background:transparent url(http://p4.p.pixnet.net/albums/userpics/4/4/172344/4915ec79280c5.gif) no-repeat left top; width:100px; height:57px; } .more a:hover {} /*--加入書籤--*/ .bookmark{ text-align:right ; padding-top:20px; border-top: 0px dashed #ccc ; } /*--發表時間--*/ .author{ text-align:right ; margin: 0px 0px 0px 0px ; border-bottom: 0px dashed #ccc ; padding-bottom: 5px ; } /*--推薦上專欄、轉寄文章--*/ .forward{ text-align:right; } .forward a {} /*--單一篇文章最下方（全站分類 + 歷史上的今天 + ▲top）--*/ .article-footer{ background:#fff ; padding: 0px 0px ; } /*--此篇文章分類 : 個人分類+全站分類--*/ .refer{ text-align:left ; border-bottom: 1px dashed #ccc ; padding-top: 5px ; padding-bottom: 5px ; margin-bottom: 0px ; border-top: 0px dashed #ccc ; } /*--歷史上的今天--*/ .history{ text-align:left ; border-bottom: 1px dashed #ccc ; padding-top: 5px ; padding-bottom: 5px ; margin-bottom: 0px ; } /*--頁數--*/ .page{ text-align: right; font-size: 12px; font-family: Verdana; margin: 0px 10px 0px 0px; } .page span { color: #333333; background: #C8C7C7; } /*--回到頁首--*/ .back-to-top{float:right;margin-right:10px;} .back-to-top a{ color:#fff; display:block; font-size:0px; font-weight:normal; margin-top:10px; margin-bottom:10px; background:transparent url(http://p4.p.pixnet.net/albums/userpics/4/4/172344/48e4227571fa1.png) no-repeat right top; width:18px; height:18px; } /* ------------------- 文章回應及引用區 ---------------------------*/ /*--引用及回應列表全部的大範圍--*/ #user-post{} /*--引用列表標題+回應列表標題--*/ .user-post-title{ background : url(http://p4.p.pixnet.net/albums/userpics/4/4/172344/490a14d83f993.jpg) no-repeat left top ; padding: 20px 0px 20px 250px ; _height: 10% ; color:#768385; font-family: "Gulim"; font-size: 1.6em ; } /*--引用列表+回應列表--*/ #comment-box{ margin-bottom: 20px; } /*--引用網址+網址鈕+複製鈕--*/ #trackback-url{ margin-right: 10px; text-align: right; } #trackback-input img {} /*--僅回應列表--*/ #comment-box{} /*--僅引用區塊--*/ #trackback-box{ margin-bottom: 20px; } /*--引用列表標題--*/ #trackback-title{ text-align:left; margin-top: 20px; } /*--回應列表標題--*/ #comment-title{ text-align:left; margin-bottom: 20px; } /*--引用內容區塊--*/ #trackback-text{} /*--回應內容區塊--*/ #comment-text{ margin-left: 90px; } /*--引用內容區塊+回應內容區塊--*/ .user-post-text{} /*--單一引用--*/ #trackback-box .single-post{} /*--單一回應--*/ #comment-box .single-post{ margin:20px 0px 0px 0px; _height: 1%; overflow: hidden; _overflow: none; } /*--單一樓層數字--*/ .single-post .floor { color: #000; font-size: 20px; font-weight: bold; font-family: Verdana,Tahoma, SimSun, Arial, Helvetica, sans-serif; } /*--引用者資訊+回應者資訊--*/ .post-info{ padding-left: 15px; margin-bottom: 0px; padding-bottom: 5px; color: #aaa; } .post-info .post-time{ color:#aaa } .post-info a{ background:#999; color: #000; } .post-info a:hover{ background:#aaa; } .post-info img { width: 10px; height: 10px; visibility: hidden; } a.user-name, a.reply-message, a.user-name:hover, a.reply-message:hover { border: none; background: none; } /*--單一引用內容+單一回應內容+回覆內容--*/ .post-text { float:left; width: 360px; padding: 10px; margin-top: 0px; color: #999; } #trackback-box .post-text{ width: auto ; float:none ; } /*--單一引用標題+單一回應標題--*/ .post-text p{} /*--回應者頭像--*/ .post-photo{ float:left; display: inline; text-align: center; width:90px; margin:10px 20px 0px 0px; padding: 2px 2px 0px 2px; border: 1px solid #bbb; overflow: hidden; } .post-photo a:hover img { FILTER: alpha(opacity=50); -MOZ-OPACITY:0.5;OPACITY:0.5; } /*--迴響者名稱--*/ .user-name{ margin-left: 20px; color: #000; font-family: Verdana,Tahoma, SimSun, Arial, Helvetica, sans-serif; } /*--單一回應者IP--*/ .user-ip {} .img.pixnet-user { display: none; } /*--版主回覆內容--*/ .reply-text{ line-height:160%; background:#EEEEEE; color: #666666 ; clear:both ; border:0px solid #ccc ; padding: 10px ; margin-top:10px; word-wrap : break-word;} /*--版主回覆內容--*/ .reply-text { clear: both; padding-top: 10px; padding-bottom: 10px; padding-left: 120px; padding-right: 10px; margin: 5px 0px 5px auto; background: url('http://p4.p.pixnet.net/albums/userpics/4/4/91644/1187602531.gif') no-repeat -10px top; border-top: 1px solid #ccc; overflow: hidden; } /*--版主回覆資訊--*/ .reply-text p{ display: none; } /*--悄悄話--*/ .secret{ margin-top:15px; color: #646464; background:#eee; } /*--留下迴響--*/ .post-comment{ width:500px;} .post-comment a { display: block; width: 110px; height: 56px; text-align: center; padding-bottom:10px; font-size: 0pt; text-indent: -5000px; background: url(http://p4.p.pixnet.net/albums/userpics/4/4/172344/49076c49ef638.gif) no-repeat; } .post-comment a:hover { background: url(http://p4.p.pixnet.net/albums/userpics/4/4/172344/49076c494acf9.gif) no-repeat; } /* ------------------- 列表模式的文章區塊 -------------*/ .main-list{ margin-top: 20px; } .main-list table{ width:94% ; } .main-list h3{ margin-bottom: 10px; padding: 5px 10px ; } .main-list th{ padding: 2px; border-bottom:1px solid #eee; color: #000; } .main-list td{ padding: 2px; margin-top: 5px; color:#646464; } .main-list a{} #article-list{} /* ------------------- 側邊欄位區 -------------------*/ /*--主要側邊欄位區--*/ #links{ float: right; width:270px; } /*--單一功能區塊--*/ .box{ width:270px; } /*--單一功能區塊標題--*/ .box-title{ text-align:center; padding-top:15px; margin-left:-5px; font: bold 1.8em "標楷體"; height:66px; color:#ffffff; background: url(http://p4.p.pixnet.net/albums/userpics/4/4/172344/491d08a4803d2.gif) no-repeat center top; width:270px; } /*--單一功能區塊內容--*/ .box-text { width: 240px; margin:-15px 0px 13px 5px; overflow:hidden; padding:0px 5px 13px 5px; text-align:left; background: #ffffff url(http://p4.p.pixnet.net/albums/userpics/4/4/172344/491d3bacb6024.jpg) no-repeat center bottom; } /*--單一功能區塊超連結--*/ .box-more{ text-align:right; } /*--誰來我家+我去誰家--*/ #visitor ul, #crumb ul{ overflow: hidden; _overflow: none; _height: 1%; } #visitor li, #crumb li{ float: left; } #visitor li a img, #crumb li a img{ width: 35px; height: 35px; border: 1px solid #ccc; padding: 1px; } #visitor ul a:hover img, #crumb ul a:hover img{ filter:alpha(opacity=60);opacity:0.6;-moz-opacity:0.6; } #visitor .box-text li a, #crumb .box-text li a{ display:block; } #visitor .box-text, #crumb .box-text { width:218px; padding-left:27px; } /*--碎碎唸--*/ #murmur { position:absolute; top:48px; margin-left:-78px; font-size:12px; font-family: Verdana,Tahoma, SimSun, Arial, Helvetica, sans-serif; } /*--碎碎唸標頭--*/ #murmur .box-title { display:none; font-size:0px; font-family:Verdana; } /*--碎碎唸內容區塊--*/ #murmur .box-text { width:304px; height:34px; overflow:auto; line-height:140%; color:#112f9f; background:url(http://p4.p.pixnet.net/albums/userpics/4/4/172344/491cef3ea2222.gif) repeat scroll 0% 0%; } #murmur .box-more { position:absolute; top:33px; margin-left: 125px; width:150px; } #murmur .box-text li {display:inline;} /*--碎碎唸內發表時間--*/ #murmur .murmur-time{ font: 10pt "Georgia"; color: #8A5656; position:absolute; top:32px; margin-left: 28px; } /*--碎碎念聯播--*/ #broadcast .box-text ul{ overflow: hidden; _overflow: none; _height: 1%; font-size:10px; border-bottom: 1px dashed #eee; } #broadcast .box-text ul a:hover {color: #07115e; background: #ecebec;} /*--好友的頭像--*/ .broadcast-photo{ float:left ; padding: 2px; } .broadcast-photo img{ width:31px; height:31px; margin: 2px; border: 1px solid #eee; } /*--好友的碎碎唸發表時間--*/ .broadcast-time{ font-family: Georgia, Tahoma, SimSun, Arial, Helvetica, sans-serif; font-size:11px; } /*--最新文章--*/ #recent-article{} #recent-article .box-text{ text-align:left; overflow:hidden; font-size:11px; } #recent-article .box-title{} #recent-article .box-text li a{ display: block; color: #666; overflow:hidden; } #recent-article .box-text li a:hover{text-align: right;} /*--參觀人氣--*/ #counter .box-title { display:none; font-size:16px; font-family:Verdana, Tahoma, SimSun, Arial, Helvetica, sans-serif; } #counter { position:absolute; top:238px; margin-left:-690px; font-size:16px; padding-top:15px; font-family:Georgia, Verdana, Tahoma, SimSun, Arial, Helvetica, sans-serif; } #counter .box-text { background:url(http://p4.p.pixnet.net/albums/userpics/4/4/172344/491cef3ea2222.gif) repeat scroll 0% 0%; color:#ffffff; } #counter .box-text li{display: inline;} /*--文章分類--*/ #category{} #category .box-title{} #category .box-text{ padding-left:20px; width:225px; font-size:14px; line-height:120%; } #category .box-text a{} #category .box-text h6{} #category .box-text li {padding-top:3px;} #category .box-text .box-more{display: none;} #category-list{} #category .box-text li a:hover {color: #07115e; background: #cdc7c8;} /*--最新迴響--*/ #latest-comment .box-text { font-family: "Century Gothic"; color: #48A4CF; } #latest-comment span {} #latest-comment a { display:block; color: #888; } #latest-comment .box-text li a:hover{text-align: right;} /*--文章搜尋--*/ input#search-submit{ color: #666; background: #eee; font-size:12px; margin:5px 0px 0px 195px; } input#search-target{margin-left:25px; width:182px;} /*--月曆--*/ #calendar{} #calendar .box-title{} #calendar .box-text{ line-height:16px; font-family: Verdana,Tahoma, SimSun, Arial, Helvetica, sans-serif; } #calendar table{ text-align:center; width:240px; } #calendar th{ text-align: center; line-height:16px; background: #F4F9FB; } #calendar .calMonthNav{} #calendar .calMonthHeader{} #calendar td { text-align:center; } #calendar td a{ text-align:center; text-decoration:none; color: #fff; background: #6FCAF4; } /*--人氣文章--*/ #hot-article{ position:absolute; top:134px; margin-left:-82px; font-size:11px; color: #112f9f; } /*--人氣文章標頭--*/ #hot-article .box-title {display:none;} /*--人氣文章內容區塊--*/ #hot-article .box-text{ text-align:left; width:308px; height:58px; color: #112f9f; overflow: auto; background:url(http://p4.p.pixnet.net/albums/userpics/4/4/172344/491cef3ea2222.gif) repeat scroll 0% 0%; } /*--人氣文章文章標題--*/ #hot-article .box-text a{color: #112f9f;} #hot-article .box-text a:hover {color: #07115e; background: #ffffff;} /*--文章精選--*/ #archive .box-text select{ font-size: 12px; width:180px; font-family: Verdana,Tahoma, SimSun, Arial, Helvetica, sans-serif; } #archive .box-more{ text-align: right; padding:10px 5px 0px 0px; } /*--最新訂閱--*/ #subscription .box-text{line-height:140%;} #subscription .box-text a{ display: block; text-align: left; font-size: 11px; } #subscription .box-text li{ width: 100%; text-align: right; font-size: 11px; color: #7A038F; font-size: 11px; } #subscription .box-text li a:hover {color: #07115e; background: #ecebec;} /*---POWERED BY---*/ #powered .box-text{text-align:center;} /*--我的收藏--*/ #favorite .box-text{text-align:center;} /*--新聞交換rss--*/ #feed .box-text{text-align:center;} /*---麻吉交流---*/ #headshot .box-text{text-align:center;} /*--------------------------- 頁尾 ---------------------------*/ #footer{ clear: both; text-align: left; height: 90px; background: url(http://i46.photobucket.com/albums/f102/wakaka_214/share1/Footer_share_1003X90_08-11-07-10.jpg) no-repeat center top; } /*--頁尾-pixnet連結--*/ #footer #bottom{ text-align: right; padding:40px 20px 0 0; line-height: 160% ; }