Jertsai's blog:樣式 | 部落格黃綠紅

<< 改版 | 基本款灰白藍 | 回blog首頁 | 生活 | 有沒有要這麼累 >>

August 27,2007

樣式 | 部落格黃綠紅

部落格版型：上一版的版型釋出啦，其實是因為史老提起，才想說要來個分享(我真不是一個自動自發的小孩)；IE6及FireFox瀏覽正常，最佳瀏覽建議1024*768以上。相關細節應該不用多說了，反正你們大概也看了他10幾天，另外，我覺得我還是放棄官方樣式貢獻好了(痞客模組目前好像也不能上傳)，因為我實在懶得寫其他的參數(懶鬼啊)。留言板版形補上。

1.參數標籤只用看得到的，所以請您務必斟酌使用。
2.請別叫我再做另外修改，沒那麼多時間為您訂做。
3.您可以自行作細部修改，但請勿再做投稿或分享。
4.如您在使用上有套用的問題，歡迎在留言版告知。
5.公告區請盡量輸入兩行以上，已達最佳瀏覽感覺。
6.私密留言被隱藏了，也就是他人是看不到有顯示。
7.僅使用在Pixnet的部落格CSS模組，別亂丟地方。

/* ------------------------------------------------------
Pixnet Blog CSS
Name:     YGR CSS
Designer: Jertsai
URL:      http://blog.pixnet.net/jertsai
Date:     18 Aug 2007
------------------------------------------------------ */

body {
margin: 0px;
font-family: "Century Gothic";
font-size: 12px;
line-height: 18px;
color: #333333;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187246989.jpg) repeat-y fixed 50% top;
overflow-x: hidden;
}

img {
border: 0px solid #ffffff;
}

a {
color: #618961;
text-decoration: none;
}

a:hover {
color: #c40000;
}

#container {
margin: 0px auto 0px;
width: 800px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187337727.jpg) no-repeat 0px top !important;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187337727.jpg) no-repeat 1px top;
}

#header {
height: 130px;
}

#banner {
height: 110px;
}

h1 a {
position: relative;
top: 30px;
left: 0px;
padding-top: 33px;
padding-left: 30px;
width: 140px;
height: 50px;
font-family: "Arial";
font-size: 15px;
font-weight: bold;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1188256417.jpg) no-repeat 1px top;
display: block;
}

#navigation{
position: absolute;
top: 95px;
margin-left: 325px;
}

#navigation li{
display: inline;
float: left;
}

#navigation a {
font: 0pt verdana;
display: block;
height: 50px;
margin-right: 10px;
color: #ffffff;
}

#navigation #link-album a {
width: 50px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187441352.gif) no-repeat left top;
}

#navigation #link-blog a {
width: 50px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187441353.gif) no-repeat left top;
}

#navigation #link-guestbook a {
width: 50px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187441354.gif) no-repeat left top;
}

#navigation #link-profile a {
width: 50px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187441355.gif) no-repeat left top;
}

.post-comment a {
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187331392.jpg) no-repeat 0px 0px;
margin: 10px 0px 10px 0px;
}

.post-comment a:hover {
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187331393.jpg) no-repeat 0px 0px;
}

#content {
margin-top: -15px;
width: 560px;
float: right;
}

#spotlight {
margin-left: 7px;
width: 450px;
}

h5 {
height: 34px;
font-family: "Century Gothic";
font-size: 0px;
color: #ffcc66;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187337728.jpg) no-repeat left top !important;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187337728.jpg) no-repeat 1px top;
}

#spotlight-text {
padding: 0px 0px 30px 20px;
color: #666666;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187337729.jpg) no-repeat left bottom !important;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187337729.jpg) no-repeat 1px bottom;
}

#article-area {
margin: 15px 0px 0px 25px;
width: 520px;
}

.article-area-title {
margin-bottom: 15px;
font-size: 13px;
color: #547fb2;
}

#display {
margin-bottom: 15px;
padding-bottom: 15px;
font-size: 13px;
color: #547fb2;
border-bottom: 2px dashed #ffcc66;
}

#display a {
color: #c40000;
}

#display a:hover {
color: #993300;
}

.article {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px dashed #ffcc66;
}

.article-head {
padding-left: 55px;
height: 48px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187337730.jpg) no-repeat left top;
}

.publish {
height: 15px;
font-size: 11px;
color: #666666;
}

.title {
margin-top: 3px;
font-size: 18px;
}

.title a {
color: #c40000;
}

.title a:hover {
color: #993300;
}

.article-body {
padding: 0px 10px 0px 10px;
}

.bookmark {
text-align: right;
}

.bookmark img {
width: 10px;
}

.article-content {
padding: 10px 0px 10px 0px;
font-size: 13px;
text-align: justify;
text-justify: inter-ideograph;
line-height: 200%;
letter-spacing: 1px;
}

.article-content:first-letter {
float: left;
margin-right: 5px;
font-weight: bold;
font-size: 380%;
line-height:100%;
}

.article-content br {
letter-spacing: 0px;
}

.author {
padding: 3px 10px 3px 0px;
font-family: "Arial";
fon-size: 10.5px;
color: #aaaaaa;
text-align: right;
}

.refer {
margin: 10px 0px 0px 20px;
font-family: "Arial";
fon-size: 10.5px;
color: #547fb2;
}

.history a, .refer a, .author a {
color: #aaaaaa;
}

.history a:hover, .refer a:hover, .author a:hover {
color: #ffcc66;
}

.history {
margin: 0px 0px 10px 20px;
font-family: "Arial";
fon-size: 10.5px;
color: #547fb2;
}

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

.main-list table th {
border: 1px solid #ffcc66;
color: #ffcc66;
padding: 3px;
}

.main-list table td {
border: 1px solid #ffcc66;
padding: 3px;
}

.list-num {
text-align: center;
width: 25px;
}

.list-date {
text-align: center;
}

.list-title {
width: 60%;
}

.page {
margin-top: 15px;
margin-bottom: 15px;
text-align: center;
}

#trackback-url {
margin: 5px 0px 20px 0px;
padding: 0px 20px 15px 0px;
text-align: right;
border-bottom: 2px dashed #ffcc66;
}

#trackback-box input{
background: #fff;
border: 0;
font: 12px "Century Gothic";
color: #999999;
height: 15px;
}

.user-post-title {
height: 20px;
}

#trackback-title {
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187331395.jpg) no-repeat left top;
}

#comment-title {
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187331394.jpg) no-repeat left top;
}

.post-comment a {
display: block;
width: 126px;
height: 50px;
font-size: 0px;
text-indent: -5000px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187331392.jpg) no-repeat 0px 0px;
margin: 10px 0px 10px 0px;
}

.post-comment a:hover {
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187331393.jpg) no-repeat 0px 0px;
}

.single-post {
width: 450px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187328985.jpg) no-repeat left bottom;
padding-bottom: 45px;
}

.single-post:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
clear: both;
}

.post-info {
height: 17px;
padding-top: 25px;
padding-right: 20px;
color: #618961;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187328986.jpg) no-repeat left bottom;
text-align: right;
}

.post-info a {
background: #618961;
}

.post-info a:hover {
background: #c40000;
}

a.user-name, a.reply-message, a.user-name:hover, a.reply-message:hover {
border: none;
background: none;
}

.post-info img {
visibility: hidden;
width: 7px;
height: 7px;
}

.post-photo {
float: left;
padding-left: 9px;
width: 110px;
}

.post-photo img {
width: 90px;
height: 90px;
border: 5px solid #fff;
}

.post-text {
float: left;
color: #666666;
width: 300px;
text-align: justify;
text-justify: inter-ideograph;
line-height: 20px;
letter-spacing: 1px;
}

.post-text p {
padding: 0px 0px 10px 10px;
color: #547fb2;
}

.reply-text {
clear: both;
padding: 10px 5px 5px 5px;
margin: 0px 50px 0px 40px;
color: #ffffff;
border-top: 1px dashed #ffffff;
}

#trackback-text .post-text {
width: 400px;
padding: 3px 0px 0px 25px;
}

#links {
width: 224px !important;
width: 225px;
float: left;
}

h4.box-title{
height: 23px;
padding: 19px 0px 0px 20px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1187481026.jpg) no-repeat right top;
font-size: 15px;
color: #ffffff;
font-weight: bold;
}

.box-text {
padding: 5px 5px 10px 5px;
width: 200px;
color: #666666;
}

.box-text a {
height: 18px;
color: #618961;
}

.box-text a:hover {
color: #c40000;
}

#murmur .murmur-time {
font-size: 11px;
}

#murmur .murmur-text {
text-align: justify;
text-justify: inter-ideograph;
}

#broadcast ul {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 3px;
border-bottom: 1px dashed #ffcc66;
}

#broadcast .broadcast-photo {
margin-right: 5px;
float: left;
width: 32px;
height: 32px;
}

#broadcast .broadcast-photo img	{
width: 30px;
height: 30px;
border: 1px solid #99cc99;
}

#broadcast .broadcast-time {
width: 150px;
font-size: 11px;
line-height: 15px;
color: #aaaaaa;
}

#broadcast .broadcast-time a {
font-size: 13px;
display: block;
}

#broadcast .broadcast-text {
clear: both;
}

#broadcast .broadcast-text a {
color: #888888;
}

#broadcast .broadcast-text a:hover {
color: #65320C;
}

#latest-comment li, #category li ,#recent-article li, #hot-article li {
padding: 3px 0px 3px 0px;
border-bottom: 1px dashed #ffcc66;
}

#counter ul, #powered ul {
padding-left: 50px;
}

#footer {
clear: both;
}

#bottom a {
color: #aaaaaa;
}

.who {
padding-top: 5px;
text-align: center;
}

.who a {
display: none;
font-size: 0px;
color: #ffffff;
}

#banner h2, #authority, #login-bar, p.skiplink, p#blog-category, #latest-comment img, #category img, #recent-article img, .title img, .more, .back-to-top, h6, .reply-text p, .secret, img.pixnet-user, .user-ip, .user-post-title span, .user-post-title img, .blogpatrol, #bottom { display: none; }

#latest-comment a, #category a, #recent-article a, #hot-article a { display: block; }

圖片預覽：點擊，進入flickr的圖片頁面，會有區塊解說。

Posted by jertsai at 樂多Roodo! │23:30 │回應(29) │引用(0)

工具：編輯本文

引用URL

http://cgi.blog.roodo.com/trackback/8099945

回應文章

好害羞我的留言在上面XD"

IE7可以正常瀏覽你可以補上去~~((大笑*

Posted by yoyocat24 at August 28,2007 01:48

god!
好好看的版型呀!
拿走css語法囉,謝謝 :)

Posted by Jwalker at August 28,2007 18:55

看起來挺不錯的耶~酷喔~^^

Posted by weihan180 at August 29,2007 04:39

你好XD....
我套用囉!! 還不錯^^+
謝囉^^

Posted by sadnesswei at August 29,2007 04:44

喔耶這個顏色好!
大家努力做版型吧!
我要開心的到後台複製貼上(笑).
酷!規則的句點好整齊!
還有圖片預覽那行也排的太剛剛好了吧..
齁!怎麼有人這麼深得我心XD

Posted by rainingsky at August 29,2007 08:41

呵呵^^

Posted by faiyo at August 29,2007 08:56

小妞偷偷試用一下哦^^
呵呵~

Posted by faiyo at August 29,2007 09:37

我套用惹 !
謝謝捏 !
:)
很愛這個版 .

Posted by pink81629 at August 30,2007 18:18

抱歉 ,
我有個問題想問你 ,
http://blog.roodo.com/pink_81629/6f6c2777.jpg
我想把個圖的紅框那改成橫的 ,
可是我不知道可不可以改 ,
如果可以 ,
你可以給我語法嗎 ?!
麻煩你囉 !

Posted by pink81629 at August 30,2007 18:38

當然可以啦!因為只是小變動..
而且很抱歉!剛好這個參數我沒寫到=A=
在CSS語法最後加上這段吧~
#visitor li { padding-right: 5px; display: inline; }
--
另外,您的Category,裡面的HTML連結語法出錯了喔!修改一下吧^^

Posted by jertsai at August 30,2007 23:01

Category裡面的HTML連結語法出錯 ,
這是什麼意思 ,
哈 *
因為語法的東西我都還不是很懂 ,
是沒辦法顯示嗎 ?!

Posted by pink81629 at August 31,2007 08:52

=..= 好..那沒事,我多心了~

Posted by jertsai at August 31,2007 10:35

呵 *
我還以為沒辦法顯示呢 !
:)

Posted by pink81629 at August 31,2007 11:02

隨意逛到這的部落格
我帶走嚕，感謝分享^^

Posted by 豬大妞 at September 1,2007 07:54

帶走~Y~A

Posted by a611486 at September 1,2007 09:41

悄悄帶走你的樣式囉我很喜歡~

Posted by lynmusic at September 3,2007 09:05

可以借用嗎？感謝

Posted by 小俊 at September 5,2007 04:12

謝謝分享,很清爽

Posted by inmiddleman at September 5,2007 08:16

好喜歡…很清爽呢！
打包走了、多謝分享。

Posted by hsiu825 at September 6,2007 12:47

很不錯呢~
我帶走了謝謝了 ^口^

Posted by iriscarousel at September 7,2007 04:15

如果要把繼續閱讀顯示
要怎麼用呢？

Posted by any53083 at September 13,2007 16:56

CSS中找出 .more 刪除即可~

Posted by jertsai at September 13,2007 23:11

謝謝分享:)
喜歡這個樣板，在下帶走了w

Posted by ycls at September 21,2007 01:20

謝謝分享^^

Posted by buddy23506 at September 24,2007 10:26

套用囉，整個看起來很清爽呢。

謝謝分享囉!!

Posted by heart1808 at January 5,2008 20:12

謝謝你的分享:))) 我拿走了

Posted by jennifer1033 at April 28,2008 11:17

在你開放你目前的樣式之前，我就先用這個樣式吧
噢　真是太太太漂亮了：Ｄ
而且我很喜歡成色系呢：Ｄ

Posted by 哈哈，喜歡這個樣式：Ｄ at June 28,2008 17:12

有修改了喔：Ｄ

Posted by 哈哈，喜歡這個樣式：Ｄ at June 29,2008 04:42

Extivaamivils Coonderee

Posted by Claikediskems at April 27,2009 08:38

姓名 :
Email :
URL :
回應狀態:	公開私密
	記住我的資訊
回應內容 :

回最上方

Jertsai's blog

August 27,2007

樣式 | 部落格 黃綠紅

引用URL

樣式 | 部落格黃綠紅