Jertsai's blog:部落格 | last friends

April 21,2008

部落格 | last friends

首圖做的很認真，下面都亂亂來，虎頭蛇尾啊！我應該是O型的。
本來是想一張圖把圖片全完結，可是好懶得再統整，因為我元件是一個一個弄。

* 版型上的相片，版權屬出版商及其個人所有，如有侵權歡迎告知，會立即處理。

1.請別叫我再做另外修改，沒那麼多時間為您訂做。
2.您可以自行作細部修改，但請勿再做投稿或分享。
3.如您在使用上有套用的問題，歡迎在留言版告知。
4.僅使用在Pixnet的部落格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;
}

/* ------------------------------------------------------
Pixnet Blog CSS
Name:     last friends CSS
Designer: Jertsai
URL:      http://blog.pixnet.net/jertsai
Date:     21 Apr 2008
------------------------------------------------------ */

body {
margin: 0px;
font-family: Century Gothic;
font-size: 11px;
*font-size: 9px;
color: #000;
letter-spacing: 1px;
background: #edf6fd;
}
br {
letter-spacing: 0px;
}
a {
color: #666;
text-decoration: none;
blr:expression(this.on<x>focus=this.blur());
}
a:focus {
-moz-outline-style: none;
}
a:hover {
color: #c40000;
}
input {
margin-left: 5px;
padding: 0px 5px;
font-family: Century Gothic;
font-size: 11px;
*font-size: 9px;
line-height: 13px;
color: #999;
border: 1px solid #ccc;
background: none;
}

#body-div {
margin: 0px auto;
width: 950px;
background: #edf6fd url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208773379.jpg)

repeat-y 0px 0px;
}

#container {
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208773668.jpg) no-repeat 0px

0px;
}

#container2 {
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208773381.jpg) no-repeat 4px

bottom;
}

#authority {
position: absolute;
top: 295px;
margin-left: 90px;
}
#authority a {
display: inline;
float:left;
font-size: 0px;
color: a40200;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
}
a#newpost {
display: block;
width: 65px;
height: 25px;
}
a#backstage {
margin-left: 18px;
display: block;
width: 75px;
height: 25px;
}

#header {
height: 370px;
}

#banner {
position: absolute;
top: 20px;
margin-left: 80px;
width: 130px;
height: 160px;
}
#login-bar {
display: none;
}
h1 {
position: absolute;
top: 0px;
margin-left: 270px;
}
h1 a {
display: block;
width: 500px;
height: 295px;
font-size: 0;
color: #a40200;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
}
.skiplink {
margin-bottom: 5px;
}
#blog-category {
position: absolute;
top: 250px;
margin-left: 670px;
width: 180px;
}

#navigation {
position: absolute;
top: 305px;
margin-left: 565px;
}
#navigation li {
display: inline;
float: left;
}
#navigation a {
display: block;
font-size: 0;
color: #a40200;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
}
#link-album a {
width: 60px;
height: 25px;
}
#link-blog a {
margin-left: 15px;
width: 45px;
height: 25px;
}
#link-guestbook a {
margin-top: 3px;
margin-left: 15px;
width: 55px;
height: 25px;
}
#link-profile a {
margin-top: 5px;
margin-left: 15px;
width: 55px;
height: 25px;
}

#main {
padding: 0px 35px 0px 38px;
_height: 1%;
overflow: hidden;
_overflow: none;
}

#content {
width: 480px;
float: right;
line-height: 18px;
}

#spotlight {
margin-bottom: 20px;
padding-bottom: 10px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208764470.jpg) no-repeat 0px

0px;
border-bottom: 1px dashed #a40200;
}
#spotlight h5 {
clear: both;
padding-top: 18px;
padding-left: 75px;
font: 25px SimHei;
font-weight: bold;
color: #000;
letter-spacing: -2px;
}

#article-box {
_height: 1%;
overflow: hidden;
_overflow: none;
}

h3.article-area-title {
margin-bottom: 20px;
width: 50%;
float: left;
padding: 15px 0px;
color: #a40200;
line-height: 18px;
border-bottom: 1px dashed #a40200;
}
#view-mode {
margin-bottom: 20px;
width: 50%;
float: right;
padding: 15px 0px;
text-align: right;
line-height: 18px;
border-bottom: 1px dashed #a40200;
}
#display span { display: none; }

.article-head {
clear: both;
padding-left: 75px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208764470.jpg) no-repeat 0px

0px;
}
.publish {
font-size: 10px;
color: #999;
}
.title {}
.title a {
font: 25px SimHei;
font-weight: bold;
color: #000;
letter-spacing: -2px;
}
.title a:hover { color: #c40000; }

.article-content {
margin-top: 5px;
font-size: 12px;
color: #000;
line-height: 20px;
}
.article-content a {
border-bottom: 1px dotted #999;
}
.article-content a:hover {
color: #000;
border-bottom: 1px dotted #000;
}

.more { display: none; }
.author {
color: #aaa;
}

.bookmark {
margin-top: 20px;
text-align: right;
}

.author {
margin-top: 10px;
text-align: right;
}
.author a { color: #aaa; }
.author a:hover { color: #000; }

.forward {
margin-top: 30px;
border-top: 5px solid #ccc;
padding: 10px 0px 5px 10px;;
background: #eee;
}
.forward img { display: none; }

.article-footer {
margin-bottom: 30px;
_height: 1%;
overflow: hidden;
_overflow: none;
}
.article-footer img { display: none; }
.article-footer a { color: #666; }
.article-footer a:hover { color: #c40000; }

.refer {
float: left;
width: 50%;
overflow: hidden;
font-size: 0;
color: #fff;
line-height: 0px;
letter-spacing: -2px;
}
.refer li {
margin-left: 10px;
border-left: 3px solid #666;
}
.refer li a {
padding-left: 5px;
font-family: Century Gothic;
font-size: 11px;
*font-size: 9px;
letter-spacing: 1px;
line-height: 15px;
}

.back-to-top {
clear:both;
border-bottom: 1px dashed #a40200;
}
.back-to-top a {
display: block;
height: 10px;
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
}
.back-to-top a:hover {
color: fff;
}

.history {
width: 50%;
height: 45px;
overflow: hidden;
float: right;
color: #333;
line-height: 15px;
}
.history li { margin-right: 10px; }
.history h6 { display: none; }

.page {
font-size: 10px;
}
.page span {
padding: 0px 3px;
font-weight: bold;
color: #fff;
background: #a40200;
}

.page a {
padding: 0px 3px;
background: #eee;
}

.main-list table {
margin: 15px auto;
clear: both;
width: 480px;
color: #999;
}
.main-list table th {
padding: 3px;
color: #333;
background: #eee;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.main-list table td {
padding: 5px;
border-bottom: 1px solid #ccc;
}
.list-num {
width: 25px;
text-align: center;
}
.list-date {
text-align: center;
}
.list-visit {
text-align: center;
}
.list-comment {
text-align: center;
}
.list-title {
width: 60%;
}

#comment-title {
margin-bottom: 10px;
}
.post-comment a {
font-size: 0px;
color: a40200;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
display: block;
height: 75px;
width: 185px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208766427.jpg) no-repeat 0px

0px;
}
.post-comment a:hover {
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208766748.jpg) no-repeat 0px

0px;
}

.single-post {
clear: both;
_height: 1%;
overflow: hidden;
_overflow: none;
margin: 20px 0px;
padding-bottom: 15px;
color: #666;
border-bottom: 1px dashed #a40200;
}

.secret .post-text {
width: 385px !important;
text-align: center
}

.post-info {
clear: both;
height: 18px;
line-height: 15px;
padding-left: 65px;
}
.post-info a { background: #999; }
.post-info a:hover { background: #c40000; }
.floor {
font-size: 12px;
font-weight: bold;
}
.post-time { color: #999; }
.user-ip { display: none; }
img.pixnet-user { display: none; }
a.user-name, a.reply-message, a.user-name:hover, a.reply-message:hover {
border: none;
background: none;
}
.post-info img {
visibility: hidden;
width: 7px;
height: 7px;
}

.post-photo {
width: 60px;
float: left;
margin-top: -15px;
margin-bottom: 10px;
}
.post-photo img {
width: 45px;
height: 45px;
border: 3px solid #ccc;
}

.post-text {
width: 320px;
float: right;
line-height: 15px;
margin-bottom: 10px;
}
.post-text p {
color: #547fb2;
}
.post-text p img { display: none; }

.reply-text {
clear: both;
padding-left: 65px;
color: #ad8c65;
line-height: 15px;
}
.reply-text p { display: none; }

#trackback-url {
margin: 10px 0px 30px;
}
input#trackback-input {
width: 169px;
padding: 0px 5px;
font-family: Century Gothic;
font-size: 12px;
line-height: 13px;
color: #ccc;
border: 1px solid #ccc;
}
#trackback-text .post-info {
padding-left: 0px;
width: 380px !important;
overflow: hidden;
}
#trackback-text .post-text {
width: 380px !important;
}
#trackback-text .post-text p a {
color: #a40200;
}
#trackback-text .post-text p a:hover {
color: #000;
}

#links {
margin-top: 60px;
width: 388px;
float: left;
line-height: 18px;
color: #999;
_height: 1%;
overflow: hidden;
_overflow: none;
}
#links a {
color: #ad8c65;
}
#links a:hover {
color: #a40200;
}
#links-row-1 {
float: left;
width: 190px;
}
#links-row-2 {
float: right;
width: 190px;
}
.box {
margin-bottom: 20px;
}
.box-more {
margin-top: 5px;
text-align: right;
}

h4.box-title {
font: 16px Arial;
font-weight: bold;
color: #aaa;
}

#announce h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759723.jpg) no-repeat 0px

0px;
}

#archive h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759722.jpg) no-repeat 0px

0px;
}

#broadcast h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759721.jpg) no-repeat 0px

0px;
}
.broadcast-photo {
display: none;
}
.broadcast-text {
margin-bottom: 3px;
}

#category {
color: #ad8c65;
}
#category h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759739.jpg) no-repeat 0px

0px;
}
#category .box-more {
display: none;
}
.inner-box img {
display: none;
}
.inner-box h6 {
margin-left: 3px;
}

#counter h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759738.jpg) no-repeat 0px

0px;
}

#crumb h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759737.jpg) no-repeat 0px

0px;
}

#calendar h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759720.jpg) no-repeat 0px

0px;
}
#calendar table {
width: 100%;
}
.current-month {
text-align: center;
}
.cal-forward {
text-align: right;
}
.weekday {
background: #eee;
}

#favorite h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759736.jpg) no-repeat 0px

0px;
}

#feed h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759735.jpg) no-repeat 0px

0px;
}

#headshot h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759734.jpg) no-repeat 0px

0px;
}

#hot-article h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759733.jpg) no-repeat 0px

0px;
}

#latest-comment h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759732.jpg) no-repeat 0px

0px;
}

#latest-trackback h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759731.jpg) no-repeat 0px

0px;
}

#murmur {
position: absolute;
top: 360px;
width: 380px;
height: 70px;
overflow: hidden;
color: #666;
}
#murmur h4.box-title { display: none; }
.murmur-time {
display: none;
}

#mylink h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759725.jpg) no-repeat 0px

0px;
}

#powered h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759726.jpg) no-repeat 0px

0px;
}

#recent-article h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759727.jpg) no-repeat 0px

0px;
}

#search h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208761338.jpg) no-repeat 0px

0px;
}

#subscription h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759729.jpg) no-repeat 0px

0px;
}

#visitor h4.box-title{
font-size: 0px;
color: fff;
line-height: 0px;
letter-spacing: -2px;
text-indent: -5000px;
padding-top: 30px;
background: url(http://p4.p.pixnet.net/albums/userpics/4/9/72149/1208759730.jpg) no-repeat 0px

0px;
}

#recent-article a, #hot-article a, #latest-comment a, #category a, #latest-trackback a {
padding-left: 3px;
display: block;
}
#recent-article a:hover, #hot-article a:hover, #latest-comment a:hover, #category a:hover,

#latest-trackback a:hover {
color: #fff;
background: #a40200;
}

#visitor li, #crumb li, #search li {
display: inline;
}
#visitor .box-text img, #crumb .box-text img {
margin: 0 2px;
width: 33px;
height: 33px;
}

#footer {
margin-top: 20px;
}
#footer p {
color: #999;
text-align: right;
padding-right: 40px;
}
#bottom {
margin-top: 30px;
margin-left: 30px;
padding-bottom: 10px;
}

#article-main #links {
display: none;
}
#article-main #content{
width: 875px;
}
#article-main #article-box{
width: 480px;
float: right;
}
#article-main #user-post{
margin-top: 5px;
width: 385px;
float: left;
}
#article-main .back-to-top {
clear:both;
border-bottom: 5px solid #ccc;
}
#article-main .article-footer {
margin-bottom: 30px;
_height: 1%;
overflow: hidden;
_overflow: none;
background: #eee;
}

#article-main #spotlight {
width: 480px;
margin-left: 395px;
}

Posted by jertsai at 樂多Roodo! │11:34 │回應(11) │引用(0)

工具：編輯本文

引用URL

http://cgi.blog.roodo.com/trackback/8100135

回應文章

安可以跟妳做個朋友嗎^^
有空來我家討論日劇和Fashion的東西ㄚ
http://japan.goodideaa.com

Posted by kk at May 4,2008 08:55

我取走了此版型 & 將文章的標題縮小
謝謝你~!!

Posted by zn71305 at May 24,2008 16:39

這陣子我突然很想把版型改成一頁型
就是完全不用拉捲軸的那種

不過我還是無法捨棄回應、新文以及廣告啊囧

下次來研究看看把區塊弄到側欄好了
不過那樣應該會變成三欄的 = =|||

但是不用拉捲軸看起來會舒服一點吧!?

Posted by jannifer at June 6,2008 00:21

一頁型的,除非你抓800*600,
每個人解析度不同,就網頁設計來說,不太好~
--
拉不拉捲軸其實還好啦! (撇開單一廣告不說)
畢竟現在的網頁,大部分都要拉啊=A=

Posted by jertsai at June 7,2008 11:34

也是啦
可是不知道為什麼
最近不管是電腦還是家裡
我都想弄得簡單乾淨就好了= =a

Posted by jannifer at June 7,2008 11:35

乾淨好! 簡約風正盛行! 可以順便環保一下!

Posted by jertsai at June 7,2008 11:48

哈哈
等我會做CSS了
我應該會把板型弄得很乾淨吧

Posted by jannifer at June 7,2008 22:08

我好喜歡你現在這個黑白的橘色的樣式！
是不是應該要跟我分享嘛（誤）
可以跟你要ｃｓｓ嗎？
還是這個樣式暫時不跟大家分享？
謝謝喔：Ｄ

覺得你的樣式都很好看：Ｄ

Posted by 哈哈，喜歡這個樣式：Ｄ at June 28,2008 16:57

我帶走這個樣式囉
謝謝分享^^

Posted by RayNa at July 13,2008 17:12

樣式好漂亮喔
謝謝分享~

Posted by lynn1128 at August 6,2008 06:18

好好看，謝謝分享

Posted by fraderica at August 21,2008 07:17

姓名 :
Email :
URL :
回應狀態:	公開私密
	記住我的資訊
回應內容 :

回最上方