[部落格]痞客模版基本樣式 :: 淺灰白(左側欄,主視覺窄)

痞客模版基本樣式 :: 淺灰白(左側欄,主視覺窄)
主視覺圖片預設為 650 X 350
欲加入圖片,
請在CSS中找到 #banner{background: url() left top no-repeat;}
在 ( ) 中加上圖片網址即可。

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

/*主視覺請在此更換*/
#banner{background: url() left top no-repeat;}

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

body {
	font-size: 12px;
	font-family: arial, verdana;
	color: #555;
	line-height: 160%; 
	background:#fff;}
 
a { color: #333; }
a:hover { color: #ccc; }
 
#body-div {  }
 
/*--------------------------authority*/
#authority {
	background: #eee;
	border-bottom: 1px dotted #ddd;
	text-align: center;
	line-height: 25px; }

#authority a{margin:0px 5px}
/*--------------------------container*/
 
#container2 {
	width: 900px;
	margin: 0px auto; 
	position: relative;
	background:url(http://p1.p.pixnet.net/albums/userpics/1/9/434419/4a76b3301b093.gif) left top repeat-y;}
 
/*--------------------------header*/
#header {
	
	padding-top: 50px;
	width: 650px;
	margin-left: 240px;
	height: 390px;
	background: #f6f6f6; }
 
#login-bar {
	color: #666;
	position: absolute;
	right: 20px;
	top: 415px;
	text-align: right; }
 
#login-bar .separator { color: #ccc; }
 
#banner {
	height: 350px;
	width: 650px;
	border-top: 5px solid #fff;
	border-bottom: 5px solid #fff;}
 
	#banner h1 {
		position: absolute;
		left: 255px;
		top: 5px;
		height: 25px; }
 
	#banner h1 a { font: bold 15px arial; }
 
	#banner h2 {
		position: absolute;
		left: 255px;
		top: 25px;
		height: 20px;
		line-height: 20px;
		width: 630px;
		overflow: hidden; }
 
	#banner .skiplink { display: none; }
 
	#banner #blog-category {
		display: none;
		position: absolute;
		left: 10px;
		top: 415px;
		width: 150px;
		height: 20px;
		line-height: 20px; }
 
/*--------------------------navigation*/
#navigation {
	position: absolute;
	left: 255px;
	top: 415px;
	*top: 416px;
	width: 200px;
	height: 20px; }
 
	#navigation li {
		float: left;
		height: 20px; }
 
	#navigation a {
		display: block;
		line-height: 20px;
		padding: 0px 3px; }
 
	#navigation a:hover {
		background: #aaa;
		color: #fff; }

/*--------------------------main*/
#main {
	padding-top: 20px; }
 
/*--------------------------content*/
#content {
	overflow: hidden;
	float: right;
	width: 650px; 
	margin-right: 10px;
	display: inline;}
 
#spotlight {
	background: #eee;
	margin: 0 0 10px 0;
	padding: 10px;
	border-bottom: 2px solid #ccc; }
 
#article-area h3{margin-left: 10px}
#view-mode { margin-bottom: 20px;
	margin-left: 10px;}

.article { margin-bottom: 20px; }
 
.publish {
	text-transform: uppercase;
	font-size: 11px;
	color: #fff;
	height: 12px;
	line-height: 12px;
	padding: 5px 10px;
	background:#aaa;}
 
.title {
	background: #eee;
	margin: 0 0 10px 0;
	padding: 5px 10px ;
	border-bottom: 2px solid #ccc; }
.title  a{
	font:bold 15px arial;
	color:#222;}
.article-body { 
	text-align: right; 
	margin: 10px;}
 
.article-content {
	font-size: 13px;
	line-height: 180%;
	letter-spacing: 0.05em;
	text-align: left;
	
	color: #444; }
 
.article-content a { border-bottom: 1px dotted #aaa; }
.more a { border: 0; }
 .bookmark,.author,.forward { color: #999; }
 
.article-footer {
	border: 1px dashed #ddd;
	padding: 5px 10px;
	_height: 1%;
	color: #666;
	margin: 10px;
	background:#f6f6f6;}
 
	.article-footer a { color: #999; }
 	.article-footer a:hover { color: #636363; }
 
.back-to-top {
	text-transform: uppercase;
	text-align: right; }
 
	.back-to-top a {
		padding: 0px 3px;
		background: #aaa;
		color: #fff;
		font: 11px verdana; }
 
/*--------------------------list*/
.main-list table {
	width: 95%;
	margin: 10px auto;}
 
.main-list th {
	background: #eee;
	color: #333;
	padding: 3px; }
 
.list-num { width: 30px; }
.list-date { width: 120px; }
 .list-comment {
	width: 50px;
	background: #ccc; }
 .list-visit {
	width: 70px;
	background: #ddd; }
 .main-list td {
	padding: 3px;
	border-bottom: 1px solid #fff; }
 
/*--------------------------post-box*/
.user-post-box { margin: 20px 0; }
 
.user-post-title {
	margin: 10px 0;
	background: #999;
	color: #fff;
	padding: 5px 10px; }
 
.post-comment {
	width: 100px;
	text-align: center;
	height: 25px;
	line-height: 25px;
	margin: 10px auto;
	background: #ccc; }
 
#content .post-comment a {
	display: block;
	width: 100%;
	height: 100%; }
 
.single-post {
	overflow: hidden;
	_overflow: none;
	_height: 1%;
	border: 1px dashed #ccc;
	padding: 5px;
	margin: 10px auto;
	position: relative; 
	width: 600px;}
 
.post-info {
	background: #eee;
	height: 50px;
	margin-bottom: 5px;
	padding-left: 60px;
	line-height: 25px; }
 
.post-time {
	position: absolute;
	left: 80px;
	top: 25px; }
 
.post-photo {
	position: absolute;
	left: 5px;
	top: 5px;
	width: 50px;
	height: 50px; }
 
	.post-photo img {
		width: 50px;
		height: 50px; }
 
.post-text { padding: 5px; }
 
.reply-text {
	border-top: 1px dashed #ccc;
	text-align: right;
	color: #999;
	padding: 5px; }
 
.single-post.secret .post-text {
	float: none;
	width: auto; }
 
#trackback-box #trackback-url {
	margin:10px;}
#trackback-text .post-info {
	padding: 5px;
	height: 25px; }
#trackback-box  .post-text {
	width: auto ;
	float: none ; }
 
/*--------------------------comment-form */
#comment-form {
	background: #eee;
	padding: 5px;
	width: 600px;
	margin: 10px auto; }
 
	#comment-form p {
		color: #aaa;
		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: #666;
		vertical-align: top;
		width: 80px;
		border: none;
		padding: 2px 5px;
		text-align: right; }
 	#comment-form input {
		height: 17px;
		font-family: Arial;
		font-size: 11px;
		color: #000;
		border: none;
		border-bottom: 1px solid #ccc;
		background: none;
		width: 90%; }
 
	#comment-form input.radio {
		border: none;
		width: auto;
		background: none;
		margin: 0;
		padding: 0; }
 
	#comment-form input#blogcommenttext_name { width: 87%; }
	#comment-form input#send-comment {
		border: 0;
		width: 80px;
		background: #999;
		color: #fff; }
 	#comment-form textarea {
		width: 99%;
		height: 90px;
		font-family: Arial;
		font-size: 11px;
		line-height: 18px;
		color: #000;
		border: 1px solid #ccc;
		background: #fff; }
 
/*--------------------------pages*/
.page { margin: 10px 0; 
	text-align: center;}
.page a {  
	padding:0px 5px;}
 .page SPAN {  
	background:#aaa;
	padding:0px 5px;
	color:#fff;}
 
/*--------------------------links*/
#links {
	margin-top: -460px;
	overflow: hidden;
	float: left;
	width: 220px; 
	margin-left:10px;
	display:inline;}
 
.box {
	background: #eee;
	margin-bottom: 5px; }
 
.box-title {
	background: #ccc;
	padding: 10px;
	font: bold 13px arial;
	color: #333;
	border-bottom: 1px solid #aaa}
 
.box-text { padding: 10px; border-top:1px solid #fff;}
 .box-more { text-align: right; 
	margin:5px 0;}
 
	.box-more a {
		padding: 2px 5px;
		background: #ddd;
		border: 1px solid #bbb; }
 
#visitor ul, #crumb ul {
	overflow: hidden;
	_overflow: none;
	_height: 1%; }
 
 #visitor li, #crumb li {
	float: left;
	line-height: 0; }
 
#visitor li a, #crumb li a { border: 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: 10px; }
 
#broadcast .broadcast-photo {
	float: left;
	width: 40px;
	margin-right: 5px;
	display: inline;
	line-height: 20px; }
 
#broadcast .broadcast-time,
#broadcast .broadcast-text {
	float: right;
	width: 150px;
	line-height: 20px !important; }
#broadcast .broadcast-text a { color:#767676; line-height: 20px }
#broadcast .broadcast-time a {
	color: #fff;
	padding: 2px 3px;
	background: #999;
	font: 10px verdana;
	line-height: 20px; }
#broadcast .broadcast-time span { display: none; }
 
#headshot ul {
	overflow: hidden;
	_overflow: none;
	_height: 1%; }
 #headshot li {
	width: 100px;
	float: right; }
 #headshot li a { padding: 2px; }
 
#headshot-img {
	float: left !important;
	width: 110px !important; }
#headshot-img img { border: 3px solid #eee; }
 
#search ul {
	overflow: hidden;
	_overflow: none;
	_height: 1%; }
#search li { float: left; }
#search li input {
	border: 1px solid #ddd;
	border-left: 1px solid #999;
	border-top: 1px solid #999;
	background: none;
	margin-right: 5px;
	height: 20px;
	width: 120px; }

#search li input#search-submit {
	border: 1px solid #ddd;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	height: 22px;
	width: 50px;
	padding: 0;
	color: #666; }
 
#feed a {
	margin-bottom: 5px;
	padding: 5px;
	width: 90%; }
 
#calendar table {
	width: 80%;
	margin: 0 auto; }
 
#calendar table th { text-align: center; }

#calendar table td {
	font-size: 10px;
	text-align: center;

line-height: 20px; }

#calendar table td a {
		background: #999;
		display: block;
		color: #fff;
		border: 0;
		-khtml-border-radius: 7px;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px; }
 
#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;
	font-size: 12px; }
 
#latest-comment a,
#subscription a,
#latest-trackback a {
	display: block;
	width: 99%; }
 
/*--------------------------footer*/
#footer {
	clear: both;
	background: #ddd;
	padding: 20px 0;
	text-align: center;
	margin-left: 240px;
	width: 650px;
	_height: 1%; }

themes

FINE LOOK in PIXNET

themes 發表在痞客邦留言(9) 人氣( 2643 )

全站分類：視覺設計
個人分類：痞客樣式研究院

▲top

請先登入以發表留言。

FINE LOOK in PIXNET

痞客邦樣式部落格

痞客哈燒好樣

研究院新發表

部落格小技巧

自訂導覽

參觀人氣

換樣式。拿獎金

部落格樣式

相簿樣式

FINE LOOK in PIXNET