樣式│merry xmas @ 站在這裡 :: 痞客邦 PIXNET ::

Dec 14 Sun 2008 00:30
樣式│merry xmas

雖然沒有要過聖誕節(反正今年照常上班),
但還是應景做了一個聖誕節樣式。
本來週末要去遊玩的啊, 但臨時取消了, 無聊之餘就造福一下各位好了...

喜歡的捧油拿回去裝飾一下唄, 丂丂。
有問題也歡迎回報, 3Q

★★★ 預覽圖(點圖可看完整大圖)

merry xmas - by standinghere

★★★ 語法下載: (按滑鼠右鍵, 或 Ctrl+C 複製語法)

/*---------------------------------------------------------------
!!! 僅適用於pixnet痞客模版 !!!
PIXNET  blog template - xmas
visual & css design by standinhgere
2008 / 12
----------------------------------------------------------------*/

/* -- reset.css -------------------------------------- */

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; }
.article-content p {margin-bottom: 1em; }
br{letter-spacing: normal;}
a{text-decoration: none;color:#6699cc;}
a:hover{color:#aaa;}
body{
	font-size:12px;
	font-family: arial;
	background:#fff;
	color:#333;
	line-height: 160%;
	}
#body-div{
	width: 100%;
	background: url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4943daad95a5b.jpg) left bottom repeat-x;
	}
#authority{
	background: #0b1f46;
	line-height: 25px;
	text-align: center;
	}
	#authority a{
		margin: 0 5px;
		color:#fff;
		}
	#authority a:hover{
		color:#3d93cc;
		}
	
#container{
	width: 100%;
	background: url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4943daa9a5340.jpg) center top repeat-x;
	}
#container2{
	width: 830px;
	margin: 0 auto;
	position: relative;
	}
#header{	
	height: 410px;
	overflow:hidden;
	background: url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4943dab430103.jpg) left top no-repeat;
	}
#login-bar{
	position: absolute;
	right: 40px;
	top: 60px;
	font-size:11px;
	color:#fff;
	}
	#login-bar a{color:#fff;
		padding: 0px 1px;
		}
	#login-bar a:hover{color:#000;}
#banner{	
	width: 330px;
	position: absolute;
	top: 200px;
	left: 200px;
	}
#banner p{
	display: none;
	}
#banner h1{
	font-size:20px; *font-size:19px;
	font-weight: bold;
	font-family: MS Gothic;
	letter-spacing: -2px;
	margin-bottom: 5px;
	}
	#banner h1 a{color:#fff}
	#banner h1 a:hover{color:#00ccff}
#banner h2{
	font-size: 11px; *font-size:10px;
	color:#eee;
	line-height: 15px;
	margin-left: 2px;
	}
#navigation{
	width: 350px;
	height: 50px;
	position: absolute;
	left: 405px;
	top: 0px;
	}
#navigation li{
	float: left;
	height: 50px;
	width: 73px;
	font-size:0; text-indent: -5000px;
	}
	#navigation li a{
		display: block;
		width: 100%;
		height: 100%;
		}
	#navigation li a:hover{
		
		}
#main{
	overflow:hidden; _overflow: none; _height: 1%;
	margin-top: 10px;
	}
#content{
	width: 550px;
	float: left;
	overflow: hidden;
	margin-left: 15px;
	display: inline;
	}
#spotlight{
	margin-bottom: 20px;
	background:#f6f6f6;
	padding: 10px;
	border: 5px solid #eee;
	line-height: 18px;
	}
#spotlight h5{
	font-weight: bold;
	color:#36a;
	letter-spacing:0
	}
.article{
	margin: 10px auto 20px;
	}
.article-head{
	background: url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4943daaee158f.jpg) left top no-repeat;
	height: 55px;
	padding-top: 5px;
	padding-left: 70px;
	margin-bottom: 30px;
	}
	.publish{
		color:#690;
		font-size:10px;
		letter-spacing: 1px;
		text-transform: uppercase;
		margin-bottom: 5px;
		}
	.title{
		font-size:15px;
		padding-left: 5px;
		}
		.title a{
			color:#fff;
			font-weight: bold;
			}
		.title a:hover{color:#0066ff;}
		.title img{
			position: relative;
			top: 2px;
			}
		
.article-content{
	margin: 10px 0;
	line-height: 180%;
	letter-spacing:1px;
	}
	.article-content a{
		border-bottom: 1px dashed #afd6f6;
		}
	.article-content .more{
		text-align: right;
		}
	.article-content .more a{
		border: 0;}
	.bookmark,
	.author,
	.forward{
		text-align: right;
		font-size:11px; *font-size:10px;
		line-height: 16px;
		}
	.bookmark img{
		width: 12px;
		height: 12px;
		}
.google-adsense#article-adsense{
	margin: 10px 0;
	}
.article-footer{ 
	line-height: 155%;
	color:#666;
	overflow: hidden;
	_overflow: none; _height: 1;
	border-top: 1px dotted #afd6f6;
	font-size: 11px; *font-size:10px;
	padding-top: 10px;
	margin-top: 10px;
	}
		.article-footer a{color:#669966; margin-left: 5px;}
		.article-footer a:hover{color:#c33; }
.refer{
	float: left;
	width: 270px;
	}
.history{
	float: right;
	width: 270px;
	}
	.back-to-top{
		font-size: 10px; 
		font-family: Century Gothic;
		clear: both;
		text-transform: uppercase;
		letter-spacing: 0;
		text-align: right;
		}
		.back-to-top a{
			background:#eee;
			padding: 1px 3px;
			color:#369
			}
		.back-to-top a:hover{
			color:#aaa;
			}
#blog-main .article{
	position: relative;
	}
#blog-main .refer{
	position: absolute;
	top: 65px;
	right: 5px;
	float: none;
	padding:0;
	margin:0;
	width: auto;
	}		
.main-list table{
	width: 100%;
	margin-bottom: 20px;
	}
.main-list table th{
	line-height: 25px;
	border-right: 2px solid #fff;
	color:#fff;
	background:#459bd1;
	padding-left: 5px;
	}
	.main-list table .list-num{display: none;}
	.main-list table .list-date{width: 100px;}
	#murmur-list .list-date{width: 130px;}
.main-list table td{
	line-height: 25px;
	border-bottom: 1px solid #eee;
	font-size:11px; *font-size:10px;
	color:#aaa;
	padding-left: 5px;
	}
	.main-list table td a{color:#24477d;}
	.main-list table td a:hover{color:#999;}
.main-list table .list-visit,
.main-list table .list-comment{
	width: 50px;
	}
#murmur-list .list-date{
		width: 100px;
		}
.user-post-title{
	height: 25px;
	background: url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4943daae15d20.jpg)  no-repeat;
	font-size: 15px; 
	font-weight: bold;
	margin: 10px 0;
	padding-left: 27px;
	line-height: 25px;
	color:#339933;
	}
.user-post-title img{
	display: none;
	}
.single-post{
	border:5px solid #eee;
	background:#f6f6f6;
	padding: 5px 10px 10px 10px;
	margin-bottom: 10px;
	overflow: hidden; _overflow: none; _height: 1%;
	font-size:11px; *font-size:10px;
	line-height: 18px;
	}
	.post-photo{
		float: left;
		width: 70px;
		}
	.post-photo img{
		width: 60px;
		height: 60px;
		border: 5px solid #eee;
		position: relative;
		top: -40px;
		}
	.post-info{
		color:#c33;
		padding-bottom: 5px;
		border-bottom:1px solid #ddd;
		margin-bottom: 5px;
		padding-left: 80px;
		}
	.post-text{
		float: right;
		width: 440px;
		color:#666;
		}
		.post-info .floor {
			color:green;
			font-weight: bold;
			}
		.post-info img {visibility: hidden; width: 10px; height: 10px;}
		.post-info a {
			color:#c33;
			background:#c33;}
		.post-info a:hover {background: #666;}
		.post-info a.user-name, 
		.post-info a.reply-message,
		.post-info a.user-name:hover,
		.post-info a.reply-message:hover {background: none;}
		.hidden-message,.pixnet-user, .user-ip {display: none;}

.reply-text{
		float: right;
		padding: 5px 10px 5px 10px;
		width: 420px;
		margin-top: 10px;
		background:#fff;
		}
	.reply-text p{display: none;}
	.secret .post-text{
		float: none;
		color:#555;
		}
#trackback-box  #trackback-url{
	margin: 15px 0;
	}
	#trackback-box  #trackback-url input{
		background:#fafafa;
		border: 1px solid #ddd;
		margin-right: 5px;
		width: 80px;
		color:#aaa;
		padding: 3px; *padding: 2px 3px 0;
		}
	#trackback-box  #trackback-url input#trackback-input{
		width: 350px !important;
		padding: 5px 5px;
		font: 9px Tahoma;
		letter-spacing: 1px;
		color:#666;
		}
	#trackback-box .single-post .post-info,
	#trackback-box .single-post .post-text{
		float: none !important;
		padding:0;
		}
	#trackback-box .single-post .post-text p a{
		color:#ffae00;}

.post-comment{
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4943dab518bee.jpg) no-repeat;
	width: 140px;
	height: 45px;
	margin: 10px auto;
	font-size:0; text-indent: -5000px;
	}
	.post-comment a{
		display: block;
		width: 100%;
		height: 100%;
		}
	
#comment-form{ 
	
	background: url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4943daabebf1b.jpg) left top no-repeat; 
	margin: 10px 0px; 
	}
#comment-form p{ 
	margin:0px 10px 10px 10px; 
	padding: 10px 90px 0px 0px ; 
	color:#3e7bac; 
	text-align: right;
	}
#comment-form table{ border: 0; width: 95%; }
#comment-form td , #comment-form th{ border: 0; padding: 3px 5px;}
#comment-form th{ width: 70px; vertical-align: top; text-align: right; 
	color:#3b8fc8;
	}
#comment-form th font,
.comment-form-title{ display: none;}
#comment-form input {
	padding: 1px 5px;
	font-family: arial;
	font-size: 11px;
	*font-size: 10px;
	color: #666;
	border: none;
	width: 300px;
	background: none;
	border-bottom: 1px solid #fff;
	}
#comment-form input.radio {
	border: none;
	width: auto;
	background: none;margin:0; padding:0;
	}
input#blogcommenttext_name{
	width: 285px;
	}
#comment-form td textarea{
	width: 90%;
	height: 100px;
	border: 1px solid #eee;
	padding: 5px;
	color:#666;
	height: 100px;
	font: 11px arial; *font: 10px arial;
	background:#fff;
	}
input#send-comment {
	font-family: Arial;
	font-size: 11px;
	*font-size: 10px;
	color: #fff;
	background: #999;
	border: 0;
	width: 50px !important;
	height: 20px;
	line-height: 20px;
	}
.page{
	font-size: 10px;
	text-align: center;
	}
.page span,
.page a{
	padding: 0px 3px;
	line-height: 15px;
	margin: 0 2px;
	}
.page a:hover{
	background:#eee;
	}
	
#links{
	float: right;
	width: 240px;
	margin-right: 10px;
	display: inline;
	margin-bottom: 20px;
	}
.box{
	width: 240px;
	overflow: hidden;
	background: url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4943daaa4a90c.jpg) left bottom no-repeat #eee;
	padding-bottom: 15px;
	margin-bottom: 10px;
	}
.box-title{
	background: url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4943daaaec51e.jpg) left top no-repeat;
	height: 50px;
	padding: 15px 60px 0 25px;
	color:#c36;
	font-size:15px;
	font-weight: bold;
	font-family: MS Gothic, Gulim;
	letter-spacing: -2px;
	}
.box-text{
	width: 210px;
	padding: 0 15px 1px 15px;
	margin: 0 auto;
	line-height: 160%;
	}
	.box-text a{color:#3399cc;}
	.box-text a:hover{color:#333;}
.box-more{
	text-align:right;
	}
	.box-more a{
		font-size:11px; *font-size:10px;	
		border: 1px solid #fff;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		padding: 1px 5px;
		color:#7ea5c7
		}
	.box-more a:hover{
		border: 1px solid #fff;
		border-left: 1px solid #ccc;
		border-top: 1px solid #ccc;
		}
#visitor ul, #crumb ul{overflow: hidden; _overflow: none; _height: 1%;}
#visitor li, #crumb li{
	float:left;
	line-height:0;
	}
#visitor li img, #crumb li img{
	margin: 0 2px 2px 0;
	display: inline;
	width: 50px;
	height: 50px;
	}
#broadcast ul{
	overflow: hidden; _overflow: none; _height: 1%;
	margin-bottom: 3px;
	}
#broadcast .broadcast-photo{
	float: left;
	width:40px;
	margin-right:5px;
	display: inline;
	line-height:20px;
	}
#broadcast .broadcast-time,
#broadcast .broadcast-text{
	float: right;
	width: 160px;
	}
#headshot ul{
	overflow: hidden; _overflow: none; _height: 1%;
	}
#headshot li{
	width: 100px;
	float: right;
	}
#headshot li a{
	padding:2px; 
	background:#ddd;
	}
#headshot-img{
	float: left !important;
	width: 110px !important;
	}
#headshot-img img{
	border: 5px solid #ddd;
	}
#search ul{
	overflow: hidden; _overflow: none; _height: 1%;
	}
	#search li{float: left;}
	#search li input{
		border: 1px solid #fff;
		border-left: 1px solid #ccc;
		border-top: 1px solid #ccc;
		background: none;
		margin-right: 5px;
		height: 20px;
		width: 120px;
		}
	#search li input#search-submit{
		border: 1px solid #fff;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		height: 22px;
		width: 50px;
		padding:0;
		}
#calendar table{
	width: 80%;
	margin: 0  auto;
	}
	#calendar table th{
		text-align: center;
		}
	#calendar table td{
		font-size:10px;
		text-align: center;
		border:1px solid #eee;
		background:#fff;
		line-height: 20px;
		}
		#calendar table td a{
			background:#aaa;
			display: block;
			color:#fff;
			}
#category li{margin-left: 15px;}
#archive select{
	width: 200px;
	margin-bottom: 5px;
	background:#fff;
	border:1px solid #ccc;
	font: 11px arial;
	}
#murmur .murmur-time{
	color:#666;
	font: 11px Century Gothic;
	}
#murmur .murmur-text{
	padding: 5px 0;
	}
#latest-comment li,
#subscription li,
#latest-trackback li{
	margin-bottom: 2px;
	color:#666;
	}
#latest-comment a,
#subscription a,
#latest-trackback a{
	display: block;
	width: 99%;
	}
	
#footer{
	clear: both;
	height: 40px;
	padding-top: 10px;
	overflow: hidden;
	line-height:18px;
	color:#333;
	text-align: center;
	}
#footer a{
	color:#fff;	
	}
#extradiv9{
	display: block;
	width: 85px;
	height: 110px;
	position: absolute;
	left: -85px;
	top: 300px;
	background: url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4943daac838f8.jpg) no-repeat;
	}
#extradiv10{
	display: block;
	width: 85px;
	height: 110px;
	position: absolute;
	right: -85px;
	background: url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4943daad22dee.jpg) no-repeat;
	top: 300px;
	}

Posted by standinghere at 痞客邦 PIXNET Comments(36) Trackback(0) Hits(8549)

Recommend to Front page Forward by E-mail Forward to Guestbook

Global Category:Design
Personal Category:部落格の樣設計_
Previous post in this category: 樣式│elegance
Next post in this category: 樣式│new year

Posts on this date

2006: 記錄│基督城生活-22
2004: 手寫文(12):沒力虧司馬斯

▲top

Trackbacks (0)

Comments (36)

Post Comment

#1 Raining on 2008/12/14 01:20
是我不討厭的藍色耶(笑)
很好，非常之讓我想換來用看看XD
喔不我困擾了！ >因為這個人沒在寫PIX

#2 portiachieh on 2008/12/14 02:20
帶走囉^^~謝謝你

#3 shihchieh on 2008/12/14 09:30
THANKS :)

#4 Fly on 2008/12/14 10:51
好看耶!
帶走囉~

Private Comment

#6 icebearpapa on 2008/12/14 15:58
謝謝史老師呢!!
拿去用ˇ嘍!!
3Q

#7 chickuan on 2008/12/14 17:20
換好了喲~~ ^^
可愛

#8 阿綠 on 2008/12/14 18:48
甘溫蛤~~m(_._)m

#9 moda on 2008/12/14 21:51
我也來應景~史老師謝謝你~

#10 patty30925 on 2008/12/14 21:57
謝謝～打包收藏XD

#11 sakura2007 on 2008/12/15 00:20
謝謝分享喔^^
期待您下次的大作

#12 crystal08 on 2008/12/15 03:52
我使用了，謝謝你的分享哦

#13 princesswow on 2008/12/15 10:58
阿巧好喜歡側欄的福蝶結喔～可愛的內！
龍真的很愛在留下迴響區塊搞花樣～看起來亂精緻的～
素材素材, 全都是素材湊出來的啦 XD
迴響區塊做下去, 質感馬上加10分... 哈哈哈哈
我好假掰... 其實也就只是一張圖而已...
standingherereplied on 2008/12/15 23:03

#14 winterc on 2008/12/15 13:38
wooooooo 好可愛唷
哈哈 ^罒^
話說不是有位姑娘要幫你做樣式的嗎丂丂
standingherereplied on 2008/12/15 22:59

#15 cull77amy on 2008/12/15 15:36
工作沒放假
心情還是要過節呦
感恩的季節
祝福你
也謝謝你的設計
換上嚕!
謝謝文珠姐的捧場囉!! :D
standingherereplied on 2008/12/15 22:53

#16 s10335 on 2008/12/15 16:29
謝謝史老師
帶走了XD

#17 sgdyang on 2008/12/15 18:26
真不賴! 這個樣式的套用數應該會很可觀 XD
東遠哥不套用,
再可觀都是無意義的....(黯然飄走...)
standingherereplied on 2008/12/15 22:53

#18 simmy426 緋音 on 2008/12/15 18:45
謝謝史老師 ^^
越來越冷會越有聖誕味了，
提前祝你聖誕快樂 >ˇ<

#19 rosemask on 2008/12/16 00:23
謝謝~~好有聖誕節的氣氛~~^^

#20 lyc0306 on 2008/12/16 10:12
帶走嚕，每次都有不錯的樣式!
蠻應景，有時也蠻適合心情!!
謝謝嚕^^

#21 Azuki1988 on 2008/12/17 09:26
感~~~~謝~~~~~您~~~~~啦!!
帶走啦!!謝謝!!
我超愛聖誕節，
也超愛史丹丁出手的版型。
哈哈哈!!整個做口碑的這樣。
XD

史老師，聖誕快樂耶!! 。V。
你喜歡就好^^
聖誕快樂~~~ ヽ•´з`•ノ♬
standingherereplied on 2008/12/22 11:02

#22 sweetpocky on 2008/12/17 18:40
龍龍我想要悲傷的聖誕節樣版！！這太....開朗了>"<

#23 bluestar1832 on 2008/12/17 19:34
耶帶走謝啦 =)))))

#24 ariel on 2008/12/17 22:34
謝謝您的分享

#25 kimi0317 on 2008/12/19 22:23
大感謝:D

#26 qqamigo8752201 on 2008/12/20 17:10
板主~聖誕節快樂唷~
不好意思~冒昧請問一下~(跟此篇文章無關的問題><)
如何將一張照片切成四等份或多張等份呢~???
一般網路都是教將多張照片組成一張~我希望有相反的效果~感恩^^
不知道你用的是什麼影像處理軟體?
如果只是要簡單的分割,
其實開一個圖層,
在上頭加上白線, 就好啦... (可以用鉛筆書或形狀工具拉... 線會比較"實" ) ^^
standingherereplied on 2008/12/22 10:41

#27 blackdream on 2008/12/21 11:07
很可愛喔:) 帶走

#28 bluemomo on 2008/12/21 20:02
我也來帶，常常來帶樣式
謝謝史老師

那個最新一篇文章的封面做的很好看:)
謝謝你唷
standingherereplied on 2008/12/22 10:17

#29 seki on 2008/12/21 21:46
謝謝史老師~ 我帶走囉!!!
來裝飾下自己的blog, 讓它有聖誕節的fiu'
:")

#30 Mars on 2009/01/11 22:03
挖屋~~~真漂亮
我帶走囉呵呵

#31 Mars on 2009/01/11 22:25
我想請問依下史大大
請問你的圖片是怎麼弄的可以在部落格頁面放放大縮小?
可否敎我ㄧ下呢?
那個效果叫做highslide
這裡有教學, 可以來看看... 不過有一點小麻煩喔...
http://ayu91035.pixnet.net/blog/post/8364376

standingherereplied on 2009/01/12 10:11

#32 lasting on 2009/01/18 19:40
帶走了
謝謝唷

#33 juilypink on 2009/01/22 17:21
史老師~~~
我套用了你以前的一個作品~
但是我都找不到介紹他的文章
可以請你去我網誌看看嗎~
哦對~
我要說的是不知道可不可以請你交教我
1.如何把"名片、部落格、相簿、留言"的連結拿掉
2.或是改連結的網址(因為我不想放名片，我自己有打一篇文章充當連結，我想要點"名片"的時候可以連到那篇文章)
以上
如果不方便的話就不要理我了>口<
嗯... 其實要改成你要的樣式, 有點麻煩...
我解釋一下方法, 你照著做, 看成不成囉?!
--
(1)
先在部落格描述中加上
<a id="mylink" href="文章網址">名片</a>

(2)
到CSS中加上以下內容
#navigation #link-profile{display:none;}
#banner h2 a#mylink{ position:absolute;top:-25px;right:5px;background:#eee;font-size:12px;color:#476175;}
#banner h2 a#mylink:hover{color:#333; border-bottom: 1px dashed #aaa; }

(3)
在CSS中將
#banner{}
#banner h2{} 中的 overflow:hidden; 刪掉... 這樣應該就可以囉....
standingherereplied on 2009/01/25 16:24

#34 juilypink on 2009/01/26 00:39
似乎是不行Q^Q
不過還是謝謝你唷^^

#35 juilypink on 2009/01/26 00:42
哦哦!!
那可以直接把整個"相簿、部落格、留言、名片""
全部拿掉嗎??就是連字都不要了~整個上面都空白~
可以嗎??麻煩你了>口<
到CSS中將 #navigaition 中加上 display:none;
然後把 #header 的 background 中的網址改成下列這行就行
http://p2.p.pixnet.net/albums/userpics/2/5/39825/497c9bba24b8d.jpg

standingherereplied on 2009/01/29 16:54