Jertsai's blog:樣式 | 部落格灰白藍

October 28,2007

樣式 | 部落格灰白藍

2007-11-01 更新：
對於文章標題過長的同學們，應該會發現邊欄的最新文章會出現怪異現象！
所以如果覺得很難看，在語法最後加上這個吧：
#recent-article li { overflow: hidden; }
不過有個缺點，無法顯示全部的標題，但就美觀來說，是不錯的暫時頂替方法。

剛跟史老師請教，發現問題出在哪了，真是對不起各位！
發生在.box-text a的height:18px上，就這麼簡單？對！就是這樣！
(好丟臉喔！要分享，結果還沒把語法弄好，真是失敗，我會去面壁思過。)
其實我很少會去動到連結的高度設定，除非特定的位置，所以校查時我根本沒注意！
語法修正了，如果怕麻煩，就各位親自到.box-text a把height:18px設定刪除即可。
我現在還是很care當初為什麼要設定這個height:18px？？

部落格版型：上一版的版型釋出。相關連結：基本款-灰白藍；
IE6及FireFox瀏覽正常，最佳瀏覽建議1024*768以上。
可能會覺得跟我前幾天的版型感覺不一樣，其實這是原型啦，
因為後來被我改成符合我需求的感覺，但大致上沒有太大差異，
大概就是BANNER部份比較高，這個可以大家自己塞圖片，如果需要的話。
另外，部落格標題圖片我沒辦法一一為大家製作，最後，換成了文字連結；
其他我沒有使用到的參數也補上了，所以請安心服用！
當然如果有遇到bug歡迎回報，我會立即處理。

1.參數標籤只用看得到的，所以請您務必斟酌使用。
2.請別叫我再做另外修改，沒那麼多時間為您訂做。
3.您可以自行作細部修改，但請勿再做投稿或分享。
4.如您在使用上有套用的問題，歡迎在留言版告知。
5.僅使用在Pixnet的部落格CSS模組，別亂丟地方。

/* ------------------------------------------------------
Pixnet Blog CSS
Name:     GWB CSS
Designer: Jertsai
URL:      http://blog.pixnet.net/jertsai
Date:     28 Oct 2007
------------------------------------------------------ */

body {
margin: 0px;
font-family: "Arial";
font-size: 11px;
line-height: 18px;
color: #888888;
background: #fafafa;
}

img {
border: 0px solid #ffffff;
}

a {
color: #547fb2;
text-decoration: none;
}

a:hover {
color: #993300;
}

#container{
margin: 0px auto 0px;
width: 800px;
}

#header {
margin-top: 10px;
margin-bottom: 10px;
height: 180px;
border: 1px solid #efefef;
}

#banner {
width: 778px;
height: 158px;
border: 10px solid #ffffff;
}

h1 a {
position: relative;
top: 50px;
left: 80px;
font-size: 18px;
padding-left: 5px;
font-weight: bold;
color: #547fb2;
border-left: 22px solid #547fb2;
}

h1 a:hover {
color:#c40000;}

#navigation{
position: absolute;
top: 160px;
margin-left: 575px;
}

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

#navigation a {
font: 0pt verdana;
display: block;
height: 15px;
color: #ffffff;
}

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

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

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

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

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

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

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

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

#content{
float: left;
width: 560px;
}

#spotlight-text {
margin-bottom: 10px;
padding: 10px;
color: #888888;
background: #ffffff;
border: 1px solid #efefef;
}

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

#display a {
color: #c40000;
}

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

.article {
margin-bottom: 10px;
padding: 10px;
background: #ffffff;
border: 1px solid #efefef;
}

.publish {
font-size: 11px;
color: #cccccc;
}

.title {
padding-left: 10px;
border-left: 15px solid #547fb2;
font-size: 15px;
}

.bookmark {
text-align: right;
}

.bookmark img {
width: 10px;
}

.article-content {
padding: 10px 3px 10px 3px;
font-size: 13px;
color: #333333;
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: #cccccc;
text-align: right;
}

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

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

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

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

.main-list table {
margin-top: 10px;
background: #ffffff;
width: 100%;
}

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

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

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

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

.list-title {
width: 60%;
}

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

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

#trackback-url {
margin-bottom: 10px;
padding: 10px;
text-align: right;
background: #ffffff;
border: 1px solid #efefef;
}

#comment-box {
margin-bottom: 10px;
}

.post-comment a {
display: block;
width: 170px;
height: 15px;
font-size: 0px;
text-indent: -5000px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1188265915.gif) 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/1188265916.gif) no-repeat 0px 0px;
}

.single-post {
margin: 0px auto 10px;
padding: 10px;
width: 450px;
background: #efefef;
border: 1px solid #cccccc;
}

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

.post-info {
height: 17px;
color: #cccccc;
text-align: right;
}

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

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

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

a.user-name { color: #aaaaaa; }
a:hover.user-name { color: #c40000; }

.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 #cccccc;
}

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

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

.reply-text {
clear: both;
padding: 10px 10px 5px 10px;
margin: 0px 50px 0px 40px;
color: #000000;
text-align: justify;
text-justify: inter-ideograph;
line-height: 20px;
letter-spacing: 1px;
border-top: 1px dashed #cccccc;
}

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

#links {
width: 230px;
float: right;
}

h4.box-title {
padding: 1px 10px 0px 10px;
font-size: 11px;
font-weight: bold;
color: #ddd;
text-align: right;
border-top: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-left: 1px solid #dddddd;
background: #efefef;
}

.box-text {
margin-bottom: 10px;
padding: 0px 10px 10px 10px;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-left: 1px solid #dddddd;
background: #efefef;
}

.box-text a {
color: #aaaaaa;
}

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

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

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

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

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

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

#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;
}

#calendar a{
display: block;
width: auto;
border: 0px;
padding: 0px;
color:#aaa;
}

#calendar a:hover{
color:#547fb2;
background: #fff;
}

#calendar table{
margin: 0px  auto 10px;
width: 90% ;
text-align:center ;
}

#calendar th ,#calendar td {
color: #666;
text-align:center ;
}

#visitor li, #counter li {
display: inline;
}

#category h6 {
margin-bottom: 5px;
padding-bottom: 3px;
border-bottom: 1px dashed #cccccc;
}

#category a {padding-left: 10px;}

#latest-comment li, #category li ,#recent-article li, #hot-article li, #latest-trackback li, #subscription li, #mylink li {
margin-bottom: 5px;
padding-bottom: 3px;
border-bottom: 1px dashed #cccccc;
}

#footer {
clear: both;
}

input {
padding: 3px;
font-family: "arial";
font-size: 10.5px;
letter-spacing: 1px;
color: #999999;
border: 1px solid #dddddd;
background: none;
}

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

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

#latest-comment a:hover, #category a:hover, #recent-article a:hover, #hot-article a:hover, #latest-trackback a:hover, #subscription a:hover, #mylink a:hover { background: #dddddd; }

Posted by jertsai at 樂多Roodo! │01:54 │回應(64) │引用(0)

工具：編輯本文

引用URL

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

回應文章

我偷偷的來~正如我偷偷的把版型帶走~感恩啊

Posted by a611486 at October 28,2007 02:47

我也要用了，感謝。

Posted by 小俊 at October 28,2007 05:00

如果所願的捏 ! 我帶走了啦 !
超級無敵霹靂感謝你的分享阿 ! :)

Posted by talk at October 28,2007 10:12

很簡單也很好看：）帶走囉，謝謝分享～

Posted by breakaway at October 28,2007 10:45

簡單的版型真好看...
帶走了,感恩感恩!

Posted by Jwalker at October 28,2007 20:10

哇~這個應該超多人在等的,終於千呼萬喚使出來了吧!!讚喔!!

Posted by lovejie2005 at October 29,2007 00:56

很棒的版型，但我是大懶人一枚～
手殘懶得動，放在心裡收藏！！！（笑）

Posted by coffeeirene at October 29,2007 03:24

簡簡單單，粉喜歡!謝謝你的分享^^"

Posted by SweetChild at October 29,2007 05:01

我帶走了，下次出粉紅色的啦！哈哈~*

Posted by queensmaki at October 29,2007 06:27

我帶走囉~謝謝^^

Posted by Anniesui at October 29,2007 08:52

粉紅色OK啊!我連粉紫色都做過,沒在怕!
只是...怕沒新的點子和時間做 = ="

Posted by jertsai at October 29,2007 09:14

超讚的~
有沒有其他同款顏色哈?
真的很棒~套用啦!
CSS 達人~ 真羨慕妳~
我只會改人家的XD"

Posted by michaelzune at October 29,2007 09:53

拿走噢 !
謝謝摟

Posted by nan1108 at October 29,2007 10:59

▍目前沒有要拿　（（　被八 ****
▍做的很好嘎　！
▍要換版時會用看看　***** 踹　！

Posted by wpu0425 at October 29,2007 12:24

拿走囉
感謝你的分享^^

Posted by Kidwow777 at October 30,2007 00:55

拿走囉
感謝你的分享^^

Posted by Kidwow777 at October 30,2007 00:55

很簡單的版型耶，可是我很喜歡這種的版型
所以說那麼一大堆就是...我也有打包，謝謝^^

Posted by bluemomo at October 30,2007 01:27

維尼太可愛不適合我
這個剛好~
辛苦啦~^^

Posted by apoisapple at October 30,2007 08:58

簡單有型：）　帶走囉～

Posted by iamroli at October 30,2007 12:54

ie7有個問題~
就是這個~
http://s190.photobucket.com/albums/z234/applein/orther/?action=view&current=-1-1.jpg
常出現在回覆留言裡~
但你不會~只出現在文章列表這

Posted by apo at October 31,2007 02:28

這是我的疏失= =" 因為我抓的邊寬是回覆的底限!
但..沒想到..原來你們的標題更長=口=

Posted by jertsai at October 31,2007 10:53

ㄎㄎ~是為了我嗎?XD
我用了~但其實還是看的到唷~硬要說的話啦XD
但應該沒人會發現滴~:P

Posted by apoisapple at November 1,2007 03:18

如果還是看得見,把line-height設定大於18px看看..
這樣應該就可以了! 可是..這治標不治本~ =..=

Posted by jertsai at November 1,2007 03:25

謝謝您的分享~ 因為還有質感, 所以帶走並套用嚕! ：）

Posted by rinichou at November 1,2007 05:10

帶走了，謝謝。

Posted by ycls at November 1,2007 07:36

我拿了! 謝謝噢^^
很"簡單"的感覺，讚!!

Posted by sadnesswei at November 2,2007 15:36

呵
真是辛苦哩
我還想說怎麼會跳回來了
原來~ㄚ~~

Posted by apoisapple at November 3,2007 14:08

這個叫犯錯小孩,掩蓋不了內心的罪過=A=

Posted by jertsai at November 3,2007 23:34

謝謝你我帶走了
就是喜歡這簡單的感覺

Posted by h0926 at November 4,2007 10:58

感謝:)
我拿了很簡單俐落呢

Posted by rice0926 at November 4,2007 13:57

感謝你，我拿去用囉:)
是符合我想要的面板，感謝你:D

Posted by joy20 at November 7,2007 03:24

我帶回去套用了
也作了一些更動喔
謝謝你

Posted by natsuki777 at November 7,2007 07:35

不客氣^^a
話說你家livly寵物跟我同種耶!而且那個暗黑娃娃我也有敗說~

Posted by jertsai at November 7,2007 11:15

真的啊? 好巧喔
你可以告訴我你的島名嗎?

Posted by natsuki777 at November 9,2007 09:37

@Ｂｕｓｈｉｄａｏ

Posted by jertsai at November 10,2007 15:59

拿走了
謝謝你的分享

Posted by suncharlotte at November 29,2007 08:55

謝謝分享很棒唷：）

Posted by lemonjuice at December 7,2007 10:06

謝謝分享

Posted by ginisky at December 12,2007 06:32

偷偷的帶回家享用哩:"D
簡簡單單的很喜歡!
謝謝囉^^

Posted by maggi at January 1,2008 09:39

我拿走了:)
很清新呢!:D

Posted by lonesome1222 at January 3,2008 15:14

做的很好，謝謝分享

Posted by 葉抄 at January 6,2008 13:40

拿走囉，謝謝分享囉：）

Posted by heart1808 at January 11,2008 13:36

謝謝你這樣式很好看我把它帶走了

Posted by growing2007 at January 26,2008 07:36

帶走囉! 謝謝^^

Posted by buddy23506 at January 27,2008 10:22

很棒的簡約風格~
帶走囉，感謝分享!!

Posted by cmh5937 at February 1,2008 16:02

很喜歡這種簡單又清爽的風格~ 打包帶走囉~
也順便帶走了咖灰色留言板 :)

Posted by ce5271024 at February 2,2008 01:29

謝謝你的分享~

我套用之後，
回到BLOG頁面
發現找不到"發表新文章"和"我的後台"
方便告訴我在什麼地方嗎Q_Q

Posted by luffy0805 at March 4,2008 08:43

被我隱藏掉了XD 所以不會顯現..
如果不介意很醜..就把#authority,刪除吧=口=

Posted by jertsai at March 4,2008 14:13

謝謝，我知道了^^
但是那個不會很醜啊，
隱藏有點不方便XD

對了，
我如果套用，能改些小細節嗎?
我不會拿去發布的~囧
祇是自己用而已...

Posted by luffy0805 at March 4,2008 17:24

可以啊! 反正這些也都只是我原本的版型..
很多東西我都沒有設定..你可以依照自己喜歡做更改..

Posted by jertsai at March 4,2008 23:58

謝謝你:")
沒想到你這麼快就回覆了啊..
我以為要等很久呢..
總之，謝謝你提供這個版型呀
看起來整齊舒服~:)

能把你加入蒐藏或者好友裡面嗎？

Posted by luffy0805 at March 5,2008 07:25

OK啊! 反正加好友也不用錢=口=

Posted by jertsai at March 6,2008 04:36

恩，我確定拿這款了喲!!
謝謝啦~~
這種樣式簡簡單單最好看了~~

Posted by olivecats at March 8,2008 16:22

拿走囉 :)
自己有在修改一下文章內容字體大小... =ˇ=

Posted by snoopy0219 at March 12,2008 14:19

我把這樣式帶走囉感恩!
很喜歡你做的樣式!

Posted by lynmusic at March 14,2008 06:01

50 帶走囉(!)
整個感覺很舒服呀，謝謝你的分享 =)

Posted by realization at March 17,2008 04:05

你好,我帶走這樣式了,謝謝

Posted by katukiyoli at March 18,2008 13:35

最喜歡這種減簡單單的樣式了 ^^
帶走摟>ˇ< 謝謝妳^^

Posted by 彌紗子 at March 19,2008 20:44

你好
我帶走樣式喔
我修改了一些地方

Posted by NANA at March 24,2008 07:37

J大,灰灰帶走了!
有個小小問題想問一下J大...
就是畫面上怎麼看不到進入後台以及發新文章的按鈕呢?是J大刻意隱藏起來的嗎?

Posted by xfnzza5 at March 31,2008 03:18

找到「 #authority, 」, 刪除就會出現了,神奇吧XD
(好瞎喔我 =..= )

Posted by jertsai at March 31,2008 03:38

J大,謝謝囉 :)

Posted by xfnzza5 at March 31,2008 03:49

可能會做些更改(寬度、背景字體大小之類)

謝謝分享：D

Posted by mikuoyu at April 12,2008 10:44

很喜歡，帶走摟，謝謝分享=ˇ=

PING:
TITLE: weight loss tips
BLOG NAME: weight loss tips
Thank you. weight-loss-pages.com

PING:
TITLE: [改版]灰白藍
BLOG NAME: Be Happy ::PIXNET BLOG::
樣式名稱：灰白藍設計者：Jertsai整體而言就是白!!喔喔!好白好白~(轉圈)我會試著做些小改變......可能的話...

Posted by price0093 at May 31,2008 06:32

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

回最上方

Jertsai's blog

October 28,2007

樣式 | 部落格 灰白藍

引用URL

樣式 | 部落格灰白藍