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

Nov 22 Sat 2008 11:14
樣式│elegance

又是個簡單的樣式...
其實也不是我想做這些樣式, 它們的出現都有不得已的苦衷...
哈哈哈哈... 但, 是什麼我就不便多說了

反正喜歡的朋友自己帶回去用吧,
套用後有問題請回報, 3Q

●預覽圖(點圖可看完整大圖):

elegance - by standinghere

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

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

/*--------------------------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*/

HTML {
	SCROLLBAR-FACE-COLOR:  ;
	SCROLLBAR-HIGHLIGHT-COLOR: ;
	SCROLLBAR-SHADOW-COLOR: ;
	SCROLLBAR-3DLIGHT-COLOR:  ;
	SCROLLBAR-ARROW-COLOR: ;
	SCROLLBAR-TRACK-COLOR:  ;
	SCROLLBAR-DARKSHADOW-COLOR: ; 
	overflow-x:;	}
body {
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	background:#333;
	}
a {color:#333;}
a:hover {color:#ccc;}

/*--------------------------authority*/

#authority{
	background:#222;
	line-height:25px;
	text-align:center;
	}
#authority a{
	margin:0 5px;
	padding:0 5px;
	color:#fff;
	}
#authority a:hover{
	color:#aaa;
	}

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

#container{
	background: url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/492771b0b4575.png) left top repeat-x;
	}
#container2{
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/492771b187ebe.png) left top repeat-y;
	width: 900px;
	margin: 0px auto 20px;
	position: relative;
	}

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

#header{
	height: 190px;
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/492771b486061.png) left top no-repeat;
	}
#login-bar{
	position: absolute;
	right: 10px;
	top: 130px;
	color:#555;
	font-size:11px; *font-size: 10px;
	}
	#login-bar a{color:#555;}
	#login-bar a:hover{color:#aaa;}
#banner{
	position: absolute;
	left: 150px;
	top: 35px;
	width: 700px;
	height: 70px;
	overflow: hidden;
	}
#banner h1 a{
	font-size: 25px;
	color:#fff;
	font-family: Simhei;
	letter-spacing: -2px;
	}
#banner h1 a:hover{
	color:#000;
	}
#banner h2{
	margin-top: 5px;
	font-size:11px; *font-size:10px;
	}
#banner .skiplink,
#banner #blog-category{
	display: none;
	}

/*--------------------------navigation*/

#navigation{
	position: absolute;
	left: 151px;
	top: 120px;
	}
#navigation li{
	float: left;
	height: 34px;
	font-size:0;
	text-indent: -5000px;
	}
#navigation a{
	display: block;
	width: 100%;
	height: 100%;
	border-bottom: 5px solid #212121;
	}
#navigation a:hover{
	border-bottom: 5px solid #000;
	}
#navigation #link-album{width: 80px;}
#navigation #link-blog{width: 65px;}
#navigation #link-guestbook{width: 134px;}
#navigation #link-profile{width: 90px;}

/*--------------------------main*/

#main{
	overflow: hidden;
	_overflow: none;
	_height: 1%;
	}

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

#content{
	overflow: hidden;
	float: left;
	width: 605px;
	margin-left: 30px;
	display:inline;
	}

#spotlight{
	background:#f6f6f6;
	margin-bottom: 10px;
	}
#spotlight h5{
	padding: 5px 10px;
	background:#bbb;
	color:#fff;
	border-bottom: 1px solid #999;
	}
#spotlight-text{
	border-top: 1px solid #fff;
	padding: 5px 10px 10px 10px;
	font-size: 11px; *font-size:10px;
	line-height: 18px;
	}

#article-area .article-area-title,
#view-mode{
	line-height: 18px;
	}

#article-box{}
.article{
	margin:20px auto;
	} 
.article-head{
	padding-left: 23px;
	min-height: 35px;
	_height: 35px;
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/492771b38063f.png) left top no-repeat;
	margin-bottom: 10px;
	} 
.publish {
	text-transform:uppercase;
	font: bold 11px Arial, Helvetica, sans-serif;
	color: #ff9900;
	height: 15px;
	}
.title{
	height: 20px;
	line-height: 20px;
	font-size:15px;
	}
.title img{display:none;}
.title a{color:#000;}
.title a:hover{color:#ccc;}

.article-body{
	line-height: 160%;
	margin-left: 20px;
	}
.article-content{
	font-size:13px;
	letter-spacing: 1px;
	color:#666;
	line-height: 170%;
	margin: 10px 0;
	} 
.bookmark,
.author,
.forward{
	text-align: right;
	color:#555;
	} 
	.author a,
	.forward a{color:#aaa;}
	.bookmark img{
		width: 12px;
		height: 12px;
		}

.article-footer{
	margin: 10px 0 0 20px;
	background:#f6f6f6;
	padding: 5px;
	line-height: 160%;
	}
	.article-footer a{color:#666;}
	.article-footer a:hover{color:#aaa;}
.history{
	float: right;
	width: 280px;
	}
.refer{
	float: left;
	width: 280px;
	} 
.back-to-top{
	clear: both;
	text-transform: uppercase;
	font: 10px Century Gothic;
	letter-spacing:0;
	text-align: right;
	} 
	.back-to-top a{
		background:#eee;
		padding: 0px 3px;
		line-height: 20px;
		color:#ccc;
		}
	.back-to-top a:hover{
		background:#bbb;
		color:#fff;
		}

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

.main-list {
	width: 605px;}
.main-list table{
	width: 100%;
	margin: 10px 0;	
	}
.main-list h3 {}
.main-list th{
	line-height: 25px;
	color:#fff;
	background:#aaa;
	padding: 2px 5px;
	border-bottom: 2px solid #fff;
	}
.main-list td{
	font-size:11px; *font-size:10px;
	line-height: 25px;
	padding: 0px 10px;
	background:#eee;
	border-bottom:2px solid #fff;
	border-right:2px solid #fff;
	}
	.main-list td a{color:#888;}
	.main-list td a:hover{color:#3cc;}
.list-num{display:none;}
td.list-date {
	background:#ccc;
	font: 9px Tahoma;
	width: 50px;
	color:#fff;
	letter-spacing:0;
	padding: 0 5px;
	}
.list-title img{float: right;
	margin-left:3px;
	}
#murmur-list td.list-date {
	padding: 5px;
	}
.list-visit,
.list-comment{
	width: 40px;
	}

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

.user-post-box{
	margin: 20px auto;
	width: 605px;
	} 
.user-post-title{
	background: url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/492771b2bbac1.png) left top no-repeat;
	height: 30px;
	padding-left: 10px;
	line-height: 30px;
	font-size: 15px;
	color:#fff;
	margin-bottom: 10px;
	}

.post-comment{
	width: 135px;
	height: 45px;
	background: url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/492771b51a15d.png) left top no-repeat;
	font-size: 0;
	text-indent: -5000px;
	margin: 10px 10px 20px 455px;
	}
#content .post-comment a{
	display: block;
	width: 100%;
	height: 100%;
	}

.single-post{
	overflow: hidden;
	_overflow: none;
	_height: 1%;
	width: 550px;
	margin: 10px auto 20px;
	font-size: 11px; *font-size:10px;
	line-height: 18px;
	letter-spacing: 0.05em;
	}
.post-info{
	background: url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/492771b32224b.png) left top no-repeat;
	padding-left: 20px;
	margin-left: 70px;
	height: 20px;
	margin-bottom: 5px;
	border-bottom: 1px solid #eee;
	}
		.post-info .floor {
			color:#666;
			font-weight: bold;
			}
		.post-info img {visibility: hidden; width: 10px; height: 10px;}
		.post-info a {
			color:#666;
			background:#666;}
		.post-info a:hover {
			background: #ccc;
			}
		.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;}
.post-photo{
	float: left;
	width: 70px;
	margin-top: -25px;
	}
.post-photo img{
	width: 45px;
	height: 45px;
	border:5px solid #eee;
	}
.post-text{
	float: right;
	width: 480px;
	}
.reply-text{
	float: right;
	width: 480px;
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px solid #eee;
	color:#888;
	}
.reply-text p{
	text-align: right;
	}
.single-post.secret{
	background:#eee;
	}
.single-post.secret .post-text{
	float: none;
	width: auto;
	padding: 5px;
	}

#trackback-box {}
#trackback-box h3 {}
#trackback-box SPAN {}
#trackback-box #trackback-url{
	text-align: right;
	}
#trackback-box #trackback-url input{
	border: 0;
	font-size:11px; *font-size:10px;
	height: 20px;
	line-height: 20px;
	margin-right: 3px;
	background:#eee;
	color:#888;
	}
#trackback-box input#trackback-input{
	width: 350px;
	font: 9px Tahoma;
	height: 13px;
	padding-top: 5px;
	border:1px solid #ddd;
	background:#fff;
	letter-spacing: 1px;
	padding-left: 5px;
	color: #aaa;
	}
#trackback-text {}
#trackback-text .single-post {} 
#trackback-text .post-info {
	margin-left:0;
	}
#trackback-box  .post-text{
	width:auto ;
	float:none ;
	}

/*--------------------------comment-form */
#comment-form {
	background: #fff;
	border: 1px solid #eee;
	padding: 5px;
	width: 540px;
	margin: 10px auto;
	}	
#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;
	line-height: 25px;
	}
#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;
	font-family: Arial;
	font-size: 12px;
	color: #444;
	border: none;
	border-bottom: 1px solid #ddd;
	background: none;
	width: 99%;
	}
#comment-form input.radio {
	border: none; width: auto;	background: none;margin:0; padding:0;
	}
#comment-form input#blogcommenttext_name{
	width: 95.5%; 
	}
#comment-form input#send-comment{
	width: 100px;
	background:#ccc;
	color: #fff;
	border:0;
	margin-right: 7px;
	}
#comment-form textarea {
	width: 99%;
	height: 90px;
	font-family: Arial;
	font-size: 11px;
	line-height: 18px;
	color: #000;
	border: 0px solid #ccc;
	background: #eee;
	}	
	
/*--------------------------pages*/
	
.page{
	margin: 10px 0px;
	font-size:11px;
	font-family: Arial;
	text-align: center;
	}
.page a{
	margin: 0 10px;
	color:#555;
	padding: 0 3px;
	}
.page a:hover,
.page span{
	background:#aaa;
	padding: 0 3px;
	color:#fff;
	}

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

#links{
	overflow: hidden;
	float:right;
	width: 235px;
	margin-right: 14px;
	display: inline;
	margin-top: 20px;
	}
	#links a{color:#333;}
	#links a:hover{color:#fff;}
	#links select{
		border:1px solid #aaa;
		width: 200px;
		font-size:12px;
		font-family: arial;
		}
.box{
	margin-bottom: 20px;
	}
.box-title{
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/492771b132185.png) left top no-repeat;
	height: 35px;
	line-height: 35px;
	padding-left: 20px;
	font-size:15px;
	color:#fff;
	font-weight: bold;
	overflow: hidden;
	}
.box-text {
	margin: 10px 0 10px 10px;
	line-height: 160%;
	color:#666;
	letter-spacing:1px;
	}
.box-more{
	text-align: right;
	font-size:11px; *font-size:10px;
	margin: 5px;
	}
	.box-more a{
		padding:1px 3px;
		border:1px solid #fff;
		border-right: 1px solid #aaa;
		border-bottom: 1px solid #aaa;
		}
	.box-more a:hover{
		border:1px solid #fff;
		border-left: 1px solid #aaa;
		border-top: 1px solid #aaa;
		}
#headshot ul{
	overflow: hidden;
	_overflow: none;
	_height: 1%;
	}
#headshot li{
	float: left;
	width: 100px;
	}
#headshot li#headshot-img img{
	border:1px solid #fff;
	}
#recent-article img{
	display: none;
	} 
#calendar table{
	width: 80%;
	margin: 10px;
	}
#calendar th,
#calendar td{
	text-align:center;
	font-size:11px;
	border:1px solid #ccc;
	background:#aaa;
	}
#calendar .calMonthHeader{}
#calendar a{
	display: block;
	background:#eee;
	}
.murmur-time{
	font-size:11px;
	color: #111;
	}
.murmur-text{}

#visitor,#crumb{}
#visitor ul,#crumb ul{
	overflow: hidden;
	_overflow: none;
	_height: 1%;
	}
#visitor li,#crumb li{
	float: left;
	line-height:0;
	margin: 1px 1px 0 0;
	}
#visitor li img,
#crumb li img {
	width: 40px;
	height: 40px;
	}
#visitor .box-more{}

#broadcast{}
#broadcast ul{
	overflow: hidden;
	_overflow: none;
	_height: 1%;
	}
#broadcast li{}
#broadcast .broadcast-photo{
	float:left;
	width: 45px;
	}
#broadcast .broadcast-photo img{
	border:1px solid #eee;
	}
#broadcast .broadcast-time{
	float: right;
	width: 175px;
	font-size:11px;
	}
#broadcast .broadcast-time a{
	color:#fff;
	background:#bbb;
	padding: 0px 3px;
	}
#broadcast .broadcast-time span{}
#broadcast .broadcast-text{
	float: right;
	width: 175px;
	}

#search ul{
	overflow: hidden;
	_overflow: none;
	_height: 1%;
	}
#search li{
	float: left;
	}
#search input#search-target{
	border:1px solid #aaa;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
	height: 20px;
	width: 150px;
	margin-right: 3px;
	}
#search input#search-submit{
	border:1px solid #eee;
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	height: 22px;
	width: 50px;
	margin-top: 3px;
	}
#category li{
	margin-left: 15px;
	}
#category .box-more {}

#latest-comment li,
#latest-trackback li,
#subscription li{
	margin-bottom: 3px;
	}
#latest-comment a,
#latest-trackback a,
#subscription a{
	display: block;
	width: 99%;
	}

#mylink {}
#mylink .inner-box{
	padding-bottom:2px;
	margin-bottom: 2px;
	border-bottom:1px dashed #ddd;
	}
#mylink .inner-box h6{	}
#mylink .inner-box li{
	font-size:11px;
	margin-left: 10px;
	}

#counter{}
#counter SPAN{}

.folder{}
.folder .box-title{}
.folder .box-text{}

#powered{}

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

#footer{
	clear:both;
	height: 35px;
	background:url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/492771b2531a6.png) left top no-repeat;
	padding-left: 30px;
	padding-top: 65px;
	overflow:hidden;
	}
#footer p{
	font-size:11px;
	} 
#bottom a{
	color:#666;
	}

/*--------------------------extradiv*/

#extradiv11{
	position: absolute;
	width: 50px;
	height: 210px;
	background: url(http://p2.p.pixnet.net/albums/userpics/2/5/39825/492771b1e9c99.png) no-repeat;
	left: -50px;
	top: 0px;
	}

Posted by standinghere at 痞客邦 PIXNET Comments(85) Trackback(0) Hits(8068)

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

Global Category:Design
Personal Category:部落格の樣設計_
Previous post in this category: 樣式│simple blue
Next post in this category: 樣式│merry xmas

▲top

Trackbacks (0)

Comments (85)

Post Comment

#1 n39246145 on 2008/11/22 12:15
謝謝史老師的分享喔~我帶走囉~~謝謝~

#2 mao2 on 2008/11/22 12:16
（第一個？）

好厲害噢老師妳真的好利害噢 :D
做得好好看噢真的好厲害

妳好棒噢史老師

#3 lynn1128 on 2008/11/22 12:22
謝謝分享，簡簡單單，很喜歡
帶走哩~

#4 pclover on 2008/11/22 13:12
@@
帶回家養

#5 pclover on 2008/11/22 13:17
呃...那個老師
文章的背景= =
沒有白白的一片
是我的錯覺嗎...(小聲)
我看是正常...妳那是會有一條一條還是什麼狀況嗎?
(是用筆電看的嗎?)
方便的話要不要printscreen 給我看?
standingherereplied on 2008/11/22 13:36

#6 pclover on 2008/11/22 14:06
用chrome的瀏覽器
http://farm4.static.flickr.com/3236/3049782478_e9ce970303_o.jpg

用火狐的瀏覽器
http://farm4.static.flickr.com/3218/3049782498_7b6dce6999_o.jpg

我是用筆電看的@@
呃呃呃, 我找到原因了 XD
原來是我有2張圖沒有換到正確的圖片網址...
妳再重複製一次吧, sorry 啊...
standingherereplied on 2008/11/22 14:20

#7 pclover on 2008/11/22 14:39
有！這樣就ok了
太感謝你啦！

#8 ginisky on 2008/11/22 14:49
謝謝分享

Private Comment

#10 cmh5937 on 2008/11/22 15:45
帶走了，感謝分享：）

#11 seki on 2008/11/22 16:35
謝謝史老師
很喜歡這個版面....
簡簡單單的fiu'~
打包帶走囉 :") 感謝分享

#12 wen on 2008/11/22 16:45
這...不是.....那個嘛?
莫非是...半路喊停了?
@@"
哈哈, 妳還記得耶!! 沒錯, 就是那個...
不過沒有半路喊停啦,
只是有些曲折...
能喊停的話, 我自己倒是蠻想停的哈哈哈
standingherereplied on 2008/11/23 14:15

#13 angel0517 on 2008/11/22 17:26
謝謝分享

#14 tomarrow on 2008/11/22 18:23
謝謝分享，樣式就帶走了ˇ

#15 irenemmo on 2008/11/22 21:16
謝謝分享^^
打包帶走囉~

Private Comment

#17 ClaireKevin on 2008/11/22 21:44
哇...新的耶!!!
每次都很期待你的作品..^^
謝謝你的分享,樣式帶走囉。

#18 ping2s on 2008/11/22 22:01
好看耶～
史大啊～人家想換樣式了耶
嘿嘿.....
哈哈, 屏, 我最近太忙了,
可能沒辦法幫你喔...
我自己也超想改的說 XD
--
不然你可以自己設計平面,
我再幫你寫CSS囉...
standingherereplied on 2008/11/23 14:03

#19 aviel on 2008/11/22 22:43
感謝史大的分享!帶走了!
有修改banner的字型和大小! thanks!

#20 portiachieh on 2008/11/23 00:09
感謝分享^^~帶走囉~謝!

#21 diarylife on 2008/11/23 01:17
史老師我帶走囉!!!謝謝

#22 shihchieh on 2008/11/23 10:26
THANKS :)

#23 princesswow on 2008/11/23 10:32
我沒有要帶走樣式～
只是純粹來關心一下你不得已的苦衷......XD
阿巧...妳...妳...妳....
唉...
我真是"有口難言" XD
standingherereplied on 2008/11/23 14:01

#24 AZUKI on 2008/11/23 12:14
我也拿走囉~
謝謝史大大~~

#25 buddy23506 on 2008/11/23 13:23
拿走囉!　謝謝

#26 keisha on 2008/11/23 13:36
感謝分享唷~~~

#27 moda on 2008/11/23 23:48
老師~謝謝您~

#28 colachi on 2008/11/24 01:57
感謝史老師…
雖然簡單但是整體卻讓人覺得舒服。:)

#29 R on 2008/11/24 08:28
謝謝老師唷~~

#30 noirpitfall on 2008/11/24 11:35
謝謝分享,感激

Private Comment

#32 ayu91035 on 2008/11/24 17:26
痾...怎麼這麼好看啦> <
害我的相形見絀
有...那麼好看嗎 = =?
老實說我沒有很喜歡這個耶,
原本想再弄得華麗一點或換個花形,
但...懶惰了....
沒想到還受不少人青睞...(掩)
但比起來我還比較喜歡你現在用的丂丂
standingherereplied on 2008/11/24 23:23