樣式│have dinner @ 站在這裡

前不久同事小黃提供了一批手繪風的素材, 覺得很可愛,
一時興起就挑了刊頭的北極小熊, 做了這個樣式...
反正也很久沒在部落格發表樣式了, 回饋一下大家好了, 哈哈~~
簡單簡單的, 幾乎都是色塊...
喜歡的朋友自己領回家囉。

用了很多圓角效果,
所以用firefox/chrome/safari 會有最佳瀏覽效果喔~~

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

/*---------------------------------------------------------------
!!! 僅適用於pixnet痞客模版 !!!
PIXNET  blog template - have dinner
visual & css design by standinhgere 2009 / 10
http://standinghere.pixnet.net
Feel free to use and modify but please provide credits.
----------------------------------------------------------------*/

*{ 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;	}
br{letter-spacing: normal;}

/*--------------------------all setting*/

HTML {overflow-x:;	}
body {
	background:#2c201c;
	font-size:12px;
	font-family: arial;
	color:#555;}
a {color:#a0827a}
a:hover {color:#e6cb8a}
a:focus {outline:none;}
/*--------------------------authority*/

#authority{
	width: 800px;
	margin:0 auto;
	background:#2c201c;
	line-height:25px;}
#authority a{
	margin:0 5px;
	padding-left:12px;
	font-size:11px; font-size:10px\9;
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4aebc858b5de2.gif) 0px 4px no-repeat;
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4aebc858b5de2.gif) 0px 2px no-repeat\9;
	}
#authority a:hover{color:#fff;}
#authority a#newpost {}
#authority a#backstage {}

/*--------------------------container*/

#container{
	width: 100%;
	background:#231815 url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4aebc85969ff6.gif) left top repeat-x;}
#container2{
	width: 800px;
	margin:0 auto;
	position:relative;}

/*--------------------------header*/

#header{
	height:300px;
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4aebc85a2dde5.gif) left top no-repeat;
	position:relative;}
#login-bar{
	text-align: right;
	padding:5px 10px;
	font-size:11px; font-size:10px\9;
	color:#655652;
	margin-bottom:40px;}
#login-bar .separator{
	color:#333;
	padding:0 2px;}
#login-bar a{color:#655652;}
#login-bar a:hover{color:#999;}
#banner{
	margin-left: 300px;
	overflow:hidden;
	height:120px;}
#banner h1 a{
	color:#ffaa00;
	font:bold 15px arial;}
#banner h2{
	margin:5px 0;
	color:#ccc;
	width:500px;}
#banner .skiplink {display:none;}
#banner #blog-category{

font-size:11px; font-size:10px\9;
	color:#666;}
#banner #blog-category a{padding:0 2px;
	color:#666;}
#navigation{
	position: absolute;
	left:310px;
	top:220px;
	}
#navigation li{
	float: left;
	height: 25px;
	margin-right:20px;
	display:inline;}
#navigation a{
	display:block;
	width:100%;
	height:100%;
	font-size:0; text-indent: -5000px;}
#navigation #link-album{width:65px;}
#navigation #link-blog{width: 60px;}
#navigation #link-guestbook{width:130px;}
#navigation #link-profile{width: 90px;}

/*--------------------------content*/

#content{
	overflow: hidden;
	float: left;
	width: 590px;}
#spotlight{
	margin:10px 0px 10px 10px;
	border-bottom:1px dashed #333;}
#spotlight h5{
	padding: 5px 0;
	color:#693;}
#spotlight-text{
	line-height: 150%;
	padding-bottom:10px;}
#article-area{}
h3.article-area-title,
#view-mode{
	text-align: right;
	line-height:150%;
	color:#666;} 
#article-box{}
.article{
	margin:10px 0 20px;} 
.article-head{
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4aebc85bd2ec5.gif) left top no-repeat;
	overflow:hidden; _overflow:none;
	height: 40px;} 
.publish {
	color:#fff;
	font: 10px Century Gothic;
	text-transform:uppercase;
	width: 70px;
	text-align: center;
	float: left;
	height: 35px;
	padding-top: 5px;}
	.publish .time, .day{display:none;}
	.year{display:block;}
.title{
	float: right;
	height: 40px;
	width: 500px;
	line-height: 40px;}
.title a{
	font:bold 15px arial;
	color:#fff;
	line-height: 40px;}
.title img{display:none;}
.article-body{
	margin:15px 0;
	text-align: right;
	line-height:160%;
	color:#cc9966;}
	.article-body a{color:#cc9966; }
	.article-body a:hover{color:#996633;}
.article-content{
	color:#ccc;
	text-align: left;
	font-size:13px;
	letter-spacing:1px;
	font-family: Simsun, arial;
	line-height: 170%;
	margin: 10px 0;} 
.article-content .more{
	text-align: right;} 
.bookmark{} 
.author{} 
.forward{} 
.article-footer{
	margin:15px 0;}
.history{
	margin-top:1px;
	padding:10px;
	color:#999;
	background:#2e211e;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;}
	.history a{color:#999;}
.refer{
	background:#2e211e;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding:10px;
	color:#9a9077;} 
	.refer a{color:#9a9077;}
.back-to-top{
	text-align: right;
	text-transform:uppercase;
	font:10px Century Gothic;
	margin-top:5px;} 
.back-to-top a{
	padding:0 4px;
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background:#fa0;
	color:#543026;}
.back-to-top a:hover{color:#fff;}

/*--------------------------list*/

.main-list{
	margin:15px 0;
	background:#1b120f;
	padding:10px;
	-khtml-border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;}
.main-list table{
	width:100%;
	margin:0 auto;}
.main-list th{
	font-size:12px;
	line-height:20px;
	padding:5px;
	color:#693;}
.main-list td{
	font-size:11px; font-size:10px\9;
	border-bottom:1px dashed #333;
	line-height:20px;
	padding:5px;}
.list-num{width:30px;
	text-align: center;}
.list-date{width:100px;}
.list-title{}
.list-comment,
.list-visit{width:50px;}

/*--------------------------post-box*/

.user-post-box{
	margin:20px 0;} 
#trackback-box{}
#comment-box{}
.user-post-title{
	height:25px;
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4aebc85b23edb.gif) no-repeat;
	margin-bottom:10px;
	font-size:0;text-indent: -5000px;}
#comment-box .user-post-title{
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4aebc85b23edb.gif) left bottom no-repeat;}
.post-comment{
	width: 270px;
	height: 60px;
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4aebc85c92716.gif) left top no-repeat;
	margin:10px 0 30px 300px;	}
.post-comment a{
	display:block;
	width: 100%;
	height: 100%;
	font-size:0; text-indent: -5000px;
	color:#666;}

.single-post{
	margin:10px 0 20px 0px;
	font-size:11px;
	line-height:150%;
	position: relative;
	padding:0px 10px 5px 55px;}
.post-info{
	padding-bottom:5px;
	color:#963;
	border-bottom:1px solid #332521;}
.floor{
	display:block;
	font:bold 15px Century Gothic;
	color:#fa0;
	padding-right:10px;
	position:absolute;
	left:0px;
	top:0;
	border:1px dashed #3d2c28;
	background:#332521;
	text-align: right;
	width: 35px;
	height: 35px;
	line-height: 35px;
	-khtml-border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;}
.post-info img{
	width:10px; height:10px;}
.post-photo{display:none;}
.post-text{
	color:#aaa;
	padding: 5px 0;}
.reply-text{
	border:1px solid #4a3833;
	padding:5px 10px;
	color:#695752;
	margin:5px 0;
	-khtml-border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;}
.reply-text p{
	text-align: right;
	color:#a0827a}
.single-post.secret{}
.single-post.secret .post-text{
	float: none;width: auto;
	border:0;
	background:#1b120f;
	-khtml-border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	padding:5px 10px;}

#trackback-box {}
#trackback-box h3 {}
#trackback-box SPAN {}
#trackback-box #trackback-url { 
	margin: 10px 0; 
	text-align: center;}

#trackback-box #trackback-url input {
		border: 1px solid #3e2f2a;
		background: #2c201c;
		-khtml-border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding: 5px; padding: 2px 0 0 0 \9;
		margin-right: 5px; 
		color: #963;}
 
	#trackback-box input#trackback-input {
		width: 350px; padding: 4px 5px\9;
		font: 10px arial;
		letter-spacing:0.05em;
		color: #ccc; }

/*--------------------------comment-form */

#comment-form {
	-khtml-border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	background:#3e2f2a;
	margin: 10px 10px 10px 50px;
	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: #999;
	vertical-align: top;
	border: none;
	padding: 2px 5px;}
#comment-form table th {
	color: #999;
	vertical-align: top;
	width: 70px;
	border: none;
	padding: 2px 5px;
	text-align: right;}
#comment-form table th font { display: none; }
#comment-form input {
	height: 17px;
	background: #71605b;
	font-family: Arial;
	font-size: 11px;
	color: #ccc;
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	width: 95%;
	border: 1px solid #71605b;}
#comment-form input.radio {
	border: none; width: auto;	background: none;margin:0; padding:0;}
#comment-form input#blogcommenttext_name{width: 91%; width:89.5%\9; }
#comment-form input#send-comment{
	border:0;
	width: 50px;
	background:#963;
	-khtml-border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	color:#fff;
	height:auto;
	padding:5px;}
#comment-form textarea {
	width: 95%;
	height: 90px;
	font-family: Arial;
	font-size: 11px;
	line-height: 18px;
	color: #fff;
	border: 1px solid #333;
	border-right:1px solid #8d7974;
	border-bottom:1px solid #8d7974;
	background: #71605b;
	-khtml-border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	overflow:auto;}
	
/*--------------------------pages*/

.page {
	margin: 20px;
	font-size: 10px;
	font-family: Arial;
	text-align: right; }
 .page a {
	margin: 0;
	color: #555;
	padding: 0 5px; }
.page a:hover,
.page span {
	background: #52352d;
	padding: 2px 5px;
	color: #999;
	margin: 0;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; }
.page span {
	border-right: 1px solid #111;
	border-bottom: 1px solid #111; }

/*--------------------------links*/

#links{
	width:200px;
	float: right;
	overflow: hidden;
	margin-top: 20px;}
.box{
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4aebc85788bbf.gif) left top no-repeat  #2c201c;
	margin-bottom:10px;}
.box-title{
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4aebc858b5de2.gif) 10px 15px no-repeat;
	padding:5px 10px 0 25px;
	font:bold 13px arial;
	line-height:25px;
	color:#fc0;
	overflow:hidden;}
.box-text {
	padding:10px;
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/4aebc858404f3.gif) left bottom no-repeat;
	line-height:160%;
	color:#666;}
	.box-text  a{color:#6b824f;}
	.box-text  a:hover{color:#99cc00;}
.box-more{
	text-align: right;
	margin:5px;}
.box-more a{
	font-size:11px; font-size:10px\9;}
#headshot ul{
	overflow: hidden;_overflow: none;_height: 1%;}
#headshot li{
	float: right;
	width:80px;}
#headshot li#headshot-img{
	float: left;}
#headshot li#headshot-img img{
	border:1px solid #000;}

#recent-article li{
	border-bottom:1px dotted #444;
	line-height:180%;}
#recent-article img{
	display:none;}

#calendar table{
	width: 90%;
	margin:0px auto;}
#calendar th,
#calendar td{
	text-align: center;
	font-size:11px; font-size:10px\9;
	border:2px solid #2c201c;
	line-height: 20px;}
#calendar .calMonthHeader{}
#calendar td a{
	background:#963;
	color:#fff;
	display:block;
	-khtml-border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;}
#calendar td b{
	background:#693;
	color:#fff;
	display:block;
	-khtml-border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;}
.murmur-time{
	font-size:10px;font-family:century Gothic;
	background:#7d6a64;
	width: 100px;
	margin-left:80px;
	-khtml-border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	color:#eee;
	text-align: center;
	margin-bottom:5px;}
#visitor ul,#crumb ul{
	overflow: hidden;_overflow: none;_height: 1%;
	margin-left: 7px;}
#visitor li,#crumb li{
	float: left;
	line-height:0;
	margin:0 2px 2px 0;
	display:inline;}
#visitor li img,#crumb li img{
	width: 50px;
	height:50px;
	border: 1px solid #333; }
#broadcast ul {
	overflow: hidden;
	_overflow: none;
	_height: 1%;
	margin-bottom: 2px; }
 #broadcast .broadcast-photo {
	float: left;
	width: 42px; }
 #broadcast .broadcast-photo img {
	width: 40px;
	height: 40px;
	border: 1px solid #333; }
 #broadcast .broadcast-time {
	float: right;
	width: 130px;
	line-height: 20px;
	margin-bottom: 3px; }
#broadcast .broadcast-time a {
	font: 9px Century Gothic;
	color: #fff;
	background: #746e5f;
	padding: 1px 5px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	line-height: 20px; }
#broadcast .broadcast-time span {
	display: none;
	color: #756b56; }
 #broadcast .broadcast-text {
	float: right;
	width: 130px;
	line-height: 15px; }
#search ul{
	overflow: hidden;
	_overflow: none;
	_height: 1%;}
#search li{	
	float: left;}
#search input{
	border:0;
	background:#fff;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding:5px;}
#search input#search-target{
	margin-right:5px;
	display:inline;
	width:110px;}
#search input#search-submit{
	background:#963;
	color:#Fff;
	padding:4px;}
#latest-comment li,
#latest-trackback li,
#subscription li{
	border-bottom:1px dotted #444;
	line-height:180%;} 
#latest-comment li a,
#latest-trackback li a,
#subscription li a{
	display:block;
	width:99%;}

#links select{
	width: 180px;
	margin:0 0 5px 0;
	border:1px solid #333;
	background:#7d6a64;
	padding: 3px;
	color:#fff;
	font:11px arial;}
#links select option{
	padding:0 5px;}
#mylink h6{
	padding-left:5px;
	border-left:5px solid #963;
	height:15px;
	line-height:15px;
	margin-bottom:5px;
	color:#963;}
#category h6{color:#963;}
#category li,
#mylink .inner-box li{
	margin-left:10px;}
#mylink .inner-box{
	margin-bottom: 5px;}
#category .box-more {display:none;}
#powered .box-text{
	text-align: center;}

/*--------------------------footer*/

#footer{clear:both;
	text-align: center;
	padding: 30px 0;
	_height:1%;
	line-height:20px;}
#footer p{color:#aaa;} 
#bottom a{color:#963; padding:0 2px;}
#bottom a:hover{color:#693;}

Posted by standinghere at 痞客邦 PIXNET Comments(42) Trackback(0) Hits(1286)