樣式│new year @ 站在這裡 :: 痞客邦 PIXNET ::

哈哈, 因為覺得【祝福│黑皮牛意兒】中用的圖片實在太可愛了!!
剛好手邊又有個前些天幫朋友寫好的基本版型, 然後閒著也是閒著...
所以馬上就用了原始檔改出一個版型....
切了圖(只用了4張喔), 將CSS的色碼換一下...就出現這個版了
但農曆年的主題, 不曉得會不會太遲?!
就當作是新年禮吧, 喜歡的捧油就自己帶走吧....

這是滿版的樣式, 如果你覺得太寬不適合閱讀,
可以將#container中的 width:100%; 改成 width: ＿px; (數字請低於1000)

有掛[我最三八]的使用者, 如果會蓋住發表新文章/管理介面
可以#authority a#newpost {margin-left: 10px;} 改成 margin-left: 150px;

如果喜歡這種滿版樣式, 或者過完節日就不想再用此樣式的朋友,
之後也會有灰白基本款釋出, 敬請期待囉...

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

new year - by standinghere

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

/*---------------------------------------------------------------
!!! 僅適用於pixnet痞客模版 !!!
PIXNET  blog template - new year
visual & css design by standinhgere
2009 / 01
----------------------------------------------------------------*/

/*--------------------------reset*/
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;}
a {	text-decoration: none;		}
/*a:focus { -moz-outline-style: none; }*/
br{letter-spacing: normal;}
/*--------------------------all setting*/

HTML {
	SCROLLBAR-FACE-COLOR:  ;
	SCROLLBAR-HIGHLIGHT-COLOR: ;
	SCROLLBAR-SHADOW-COLOR: ;
	SCROLLBAR-3DLIGHT-COLOR:  ;
	SCROLLBAR-ARROW-COLOR: ;
	SCROLLBAR-TRACK-COLOR:  ;
	SCROLLBAR-DARKSHADOW-COLOR: ; 
	overflow-x:hidden;	}
body {
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/497c9c458acc2.jpg) left top repeat-y #fffbdb;
	color:#222;
	font-size: 12px;
	font-family: arial;
	}
a {color:#000}
a:hover {color:#ccc}

/*--------------------------authority*/
#authority{
	background:#ffcc33;
	border-bottom: 1px solid #ffaa00;
	line-height: 25px;
	}
#authority a{
	padding:0px 5px;
	}
#authority a:hover{
	background:#ffaa00;
	color:#fff;
	}
#authority a#newpost {
	margin-left: 10px;
	}

/*--------------------------container*/
#container{
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/497c9c481db22.jpg) left top no-repeat;
	position: relative;
	width: 100%;
	padding-top: 10px;
	}
/*--------------------------header*/

#header{
	margin: 0px 20px 10px 310px;
	background:none;
	position: relative;
	padding: 10px 0 0 0;
	}
#login-bar{
	text-align: right;
	font-size:11px;
	color:#aaa;
	text-transform: uppercase;
	margin-right: 170px;
	}
	#login-bar a{
		color:#aaa;
		padding: 0px 1px;
		}
	#login-bar a:hover{color:#000;}

#banner{
	margin-top:10px;
	background:#ffaa00;
	padding: 10px;
	border: 1px dashed #e7da8a;
	}
#banner h1 a{
	font: bold 16px arial;
	color:#fff;
	padding: 2px 5px;
	}
	#banner h1 a:hover{
		color:#000;
		}
#banner h2{
	padding: 2px 5px;
	color:#c00;
	margin-top: 5px;
	}
#banner .skiplink,
#banner #blog-category{display: none;}

/*--------------------------navigation*/
#navigation{
	position: absolute;
	right: 10px;
	top: 10px;
	overflow: hidden;
	_overflow: none;
	_height: 1%;
	}
#navigation li{
	float: left;
	border-left: 1px solid #ccc;
	padding: 0px 5px;
	}
/*--------------------------main*/
#main{
	overflow: hidden;
	_overflow: none;
	_height: 1%;
	}

/*--------------------------content*/
#content{
	margin-left: 310px;
	overflow: hidden;
	}
#spotlight{
	margin: 5px 20px 10px 0;
	background:#fef7cb;
	border: 1px dashed #e7da8a;
	padding: 5px 10px;
	}
#spotlight h5{
	color:#f60;
	font-size:13px;
	font-weight: bold;
	line-height: 25px;
	}
#spotlight-text{
	color:#000;
	}
.article{
	margin: 20px 20px 20px 0;
	} 
.article-head{
	border-bottom: 1px solid #e1d58d;
	position: relative;
	height: 30px;
	} 
.publish {
	text-transform: uppercase;
	font: bold 10px Tahoma;
	line-height: 15px;
	color:#963;
	background:#e1d58d;
	width: 100px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	position: absolute;
	left: 0; top:0;
	}
	.publish .day,
	.publish .time{display: none}
.title{
	position: absolute;
	left: 110px; top:0;
	}
.title a{
	font-size: 15px;
	line-height: 30px;
	color:#c33
	}
.title a:hover{
	color:#663
	}
.article-body{	
	margin: 10px 0;
	line-height: 140%;
	}
.article-content{
	margin: 10px 0;
	color:#333;
	font-size: 13px;
	line-height: 160%;
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/497c9c4532ba1.jpg) right bottom no-repeat;
	min-height:150px;
	_height:150px;
	padding: 10px 0;
	letter-spacing: 0.05em;
	} 
	.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;
		color:#996633;
		}
	.bookmark a,
	.author a,
	.forward a{
		color:#966
		}
	.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;
	padding: 10px;
	margin-top: 10px;
	background:#fef7cb;
	}
		.article-footer a{color:#565656; margin-left: 5px;}
		.article-footer a:hover{color:#c33; }
.refer{
	float: left;
	width: 45%;
	}
.history{
	float: right;
	width: 45%;
	}
	.back-to-top{
		font-size: 10px; 
		font-family: verdana;
		clear: both;
		text-transform: uppercase;
		letter-spacing: 0;
		text-align: right;
		}
		.back-to-top a{
			padding: 1px 3px;
			color:#999
			}
		.back-to-top a:hover{
			color:#f60;
			}

/*--------------------------list*/
.main-list{
	margin: 10px 10px 10px 0;
	}
.main-list table{
	width: 100%;
	margin-bottom: 20px;
	}
.main-list table th{
	line-height: 25px;
	border-right: 2px solid #fffbdb;
	color:#c60;
	background:#e3d999;
	padding-left: 5px;
	}
	.main-list table .list-num{display: none;}
	.main-list table .list-date{width: 100px;}
.main-list table td{
	line-height: 25px;
	border-bottom: 1px solid #e3d999;
	color:#aaa;
	padding-left: 5px;
	}
.main-list table .list-visit,
.main-list table .list-comment{
	width: 50px;
	}
td.list-date{
		font: 11px Century Gothic;
		}
/*--------------------------post-box*/

.user-post-box{
	margin: 10px 20px 10px 0;
	} 
.user-post-title{

padding: 5px 10px;
	background:#ffaa00;
	border: 1px dashed #e7da8a;
	}
#trackback-box .user-post-title{}
#comment-box .user-post-title{}

.post-comment{
	text-align: right;
	margin: 20px 0;
	width: 150px;
	height:50px;
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/497c9c48aa45b.jpg) no-repeat;
	font-size:0; text-indent: -5000px;
	}
	.post-comment a{
		display: block;
		width: 100%;
		height: 100%;
		}
.single-post{
	overflow: hidden;
	_overflow: none;
	_height: 1%;
	margin: 10px 0;
	border-bottom: 1px solid #ece18a;
	position: relative;
	padding-bottom: 10px;
	min-height: 100px;
	_height: 100px;
	}
.post-info{
	margin-left: 110px;
	line-height: 20px;
	color:#111;
	}
.post-photo{
	position: absolute;
	left:0;
	top:0;
	}
.post-photo img{
	padding: 3px;
		border: 1px solid #fff;
		border-right: 1px solid #e4d573;
		border-bottom: 1px solid #e4d573;
	}
.post-text{
	margin-left: 110px;
	color:#555;
	line-height: 160%;
	}
.reply-text{
	margin-top: 10px;
	background:#f7eeb7;
	color:#8e7c4c;
	padding: 10px;
	line-height: 150%;
	margin-left: 110px;
	border: 1px dashed #d1c476;
	}
.reply-text p{
	text-align: right;
	}
.single-post.secret{
	min-height: 20px;
	_height:20px;
	}
.single-post.secret .post-text{
	float: none;
	width: auto;
	}

#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-text .single-post {
	min-height: 50px;
	_height: 50px;
	} 
#trackback-text .post-info {
	margin:0;
	}
#trackback-box  .post-text{
	margin:0;
	width:auto ;
	float:none ;
	}

/*--------------------------comment-form */
#comment-form {
	background: #fffdef;
	margin: 10px 0;
	padding:10px;
	}	
#comment-form p {
	color: #bbb;
	text-align: right;
	margin: 0px 10px 5px;
	}
#comment-form table {
	width: 100%;
	border: none;
	}
#comment-form table tr.comment-form-title { display: none; }
#comment-form table td {
	color: #333;
	vertical-align: top;
	border: none;
	padding: 0px 5px;
	line-height: 25px;
	}
#comment-form table th {
	color: #666;
	vertical-align: top;
	width: 70px;
	border: none;
	padding: 0px 5px;
	text-align: right;
	line-height: 25px;
	}
#comment-form table th font { display: none; }
#comment-form input {
	height: 17px;
	font-family: Arial;
	font-size: 11px;
	color: #000;
	border: none;
	border-bottom: 1px solid #ddd;
	background: none;
	width: 90%;
	}
#comment-form input.radio {
	border: none; width: auto;	background: none;margin:0; padding:0;
	}
#comment-form input#blogcommenttext_name{
	width: 88%; 
	}
#comment-form input#send-comment{
	width: 80px;
	height: 20px;
	background:#aaa;
	color:#fff;
	}
#comment-form textarea {
	width: 99%;
	height: 90px;
	font-family: Arial;
	font-size: 11px;
	line-height: 18px;
	color: #000;
	border: 1px solid #ddd;
	background: #fff;
	}	
	
/*--------------------------pages*/
.page{
	margin: 10px 0;
	font-size: 10px;
	}
.page span,
.page a{
	padding: 0px 3px;
	line-height: 15px;
	margin: 0 2px;
	}
.page a:hover{
	background:#eee;
	}

/*--------------------------links*/
#links{
	position: absolute;
	left: 0;
	top: 0;
	width: 250px;
	overflow: hidden;
	margin-top: 330px;
	}
.box{
	border-bottom: 1px solid #fff;
	padding: 0;
	margin-bottom: 15px;
	}
.box-title{
	margin: 10px auto;
	width: 200px;
	font: bold 13px arial;
	color:#c30;
	background:#ffcc33;
	padding:5px 10px;
	}
.box-text {
	margin: 0px auto;
	width: 220px;
	padding:10px 15px 20px 15px;
	line-height: 160%;
	border-bottom:1px solid #e4d573;
	}
	.box-text a{color:#333;}
	.box-text a:hover{color:#c33;}
.box-more{
	text-align:right;
	}
	.box-more a{
		font-size:11px; *font-size:10px;	
		border: 1px solid #fff;
		border-right: 1px solid #e4d573;
		border-bottom: 1px solid #e4d573;
		padding: 1px 5px;
		color:#666
		}
	.box-more a:hover{
		border: 1px solid #fff;
		border-left: 1px solid #e4d573;
		border-top: 1px solid #e4d573;
		color:#f60
		}
#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:50px;
	display: inline;
	line-height:0px;
	}
#broadcast .broadcast-photo img{
	padding: 3px;
	border: 1px solid #eee;
	border-right: 1px solid #e4d573;
	border-bottom: 1px solid #e4d573;
	}
#broadcast .broadcast-time,
#broadcast .broadcast-text{
	float: right;
	width: 165px;
	line-height: 20px;
	}
#broadcast .broadcast-time span{display:none;}
#broadcast .broadcast-time a{
	background:#faf3c7;
	color:#963;
	padding: 1px 3px;
	font: 11px TAhoma;
	border-right:1px solid #e8dc94;
	border-bottom:1px solid #e8dc94;
	}
#headshot ul{
	overflow: hidden; _overflow: none; _height: 1%;
	}
#headshot li{
	width: 110px;
	float: right;
	}
#headshot li a{
	padding:2px; 
	background:#e4d573;
	color:#fff;
	}
#headshot-img{
	float: left !important;
	width: 110px !important;
	}
#headshot-img img{
	padding: 3px;
	border: 1px solid #fff;
	border-right: 1px solid #e4d573;
	border-bottom: 1px solid #e4d573;
	}
#search ul{
	overflow: hidden; _overflow: none; _height: 1%;
	}
	#search li{float: left;}
	#search li input{
		border: 1px solid #fff;
		border-left: 1px solid #e4d573;
		border-top: 1px solid #e4d573;
		background: none;
		margin-right: 5px;
		height: 20px;
		width: 150px;
		font: 12px arial;
		}
	#search li input#search-submit{
		border: 1px solid #fff;
		border-right: 1px solid #e4d573;
		border-bottom: 1px solid #e4d573;
		height: 22px;
		width: 50px;
		padding:0;
		}
#calendar table{
	width: 75%;
	margin: 10px;
	}
	#calendar table th{
		text-align: center;
		}
	#calendar table td{
		font-size:10px;
		text-align: center;
		background: none;
		line-height: 20px;
		border:1px solid #f7eeb7;
		}
		#calendar table td a{
			background:#fff;
			display: block;
			color:#963;
			border-right:1px solid #e4d573;
			border-bottom:1px solid #e4d573;
			}
#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:#888;
	}
#latest-comment a,
#subscription a,
#latest-trackback a{
	display: block;
	width: 99%;
	}
/*--------------------------footer*/

#footer{
	clear:both;
	margin:10px 20px 10px 310px;
	padding: 20px 0;
	color:#666;
	line-height: 160%;
	border-top: 1px dashed #ccc;
	}

Posted by standinghere at 痞客邦 PIXNET Comments(21) Trackback(0) Hits(6679)