CSS @ 小拇芷's :: 痞客邦 PIXNET ::

30歲以前我叫小拇芷 / 29.5歲我升級叫小姑姑了

不知不覺的....媽我30歲了

Selected Category: CSS (2)

View Mode: Post List Post Summary

Mar 07 Fri 2008 13:26
我話我畫之 2008.手 (css)

圖是我在2006.畫的翻遍了我的畫本，發現這張圖好像比較方便處理
繼上次有人留言上寫著"下次試試不要有捲軸的那種"
一直在想捲軸該怎麼做咧?！><
好~所以這次就姑且試試

(不知效果如何啊英文太爛了所以研究這種對我來說很廢神/但是不動腦會變笨)

這個版面是絞盡腦力的(不然真的會變笨)

在 / 版面管理 → 樣式選擇 → 插畫.卡通/ 裡
還可以的話請記得給我鼓勵唷~ ^^
我會很開心

body{
font-size:small;
font-family:"Verdana" ;
background: #FF3300;
text-align: center;

}

#body-div {
background: url() repeat-y top right;
width: 870px;
margin:auto;
padding:5px 5px 0px 5px;
background: #FFFFFF url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204528983.jpg) no-repeat top center;
text-align: left;
}

#authority {/*新增文章+進入後台*/
padding: 10px 0px ;
text-align:center ;
}
}
#authority a{
background:#aaa;
padding:5px 10px ;
color: fff;
}
#authority a:hover{
background:#eee ;
padding:5px 10px ;
color: #333 ;
}

br {letter-spacing: 0px;}
a {text-decoration: none; color: #865F9F;}
a:hover {color: #000;}
#login-bar {display: none;}

#header{{/*頁首與天的間距*/}

#banner{/*基本介紹*/
width:550px;
height:330px;
color:#241131;
margin-left:100px;
}

#banner a {color:#333;font-size:9px;}

#banner h1 a{
font: 15px Simhei;/*粗字幕*/
font-weight:bold ;
color:#fff;
margin-left:120px;

}

#banner .skiplink,
#blog-category{
display:none;
}

#banner h2{}

/*功能表*/
#navigation{
position:absolute;
top:250px;
margin-left:650px;
}
#navigation a{
margin-left:5px;
font-size:0px;
letter-spacing:-5000px;
}
#navigation a:hover{}

#navigation a:focus{
outline:none ;
}

#navigation li{
display:inline ;float:left ;}

/*相簿+日誌+留言板+名片*/
#link-album a {
background:transparent url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204531776.jpg) no-repeat scroll 0px 0px;
display:block;
width:35px;
height:22px;
}
#link-blog a {
background:transparent url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204531776.jpg) no-repeat scroll -40px 0px;
display:block;
width:35px;
height:24px;
}
#link-guestbook a {
background:transparent url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204531776.jpg) no-repeat scroll -75px 0px;
display:block;
width:42px;
height:24px;
}
#link-profile a {
background:transparent url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204531776.jpg) no-repeat scroll -135px 0px;
display:block;
width:42px;
height:22px;
}
/*功能移動滑鼠*/
#link-album a:hover {
background:transparent url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204532016.jpg) no-repeat scroll 0px 0px;
}
#link-blog a:hover {
background:transparent url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204532016.jpg) no-repeat scroll -40px 0px;
}
#link-guestbook a:hover {
background:transparent url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204532016.jpg) no-repeat scroll -75px 0px;
}
#link-profile a:hover {
background:transparent url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204532016.jpg) no-repeat scroll -135px 0px;
}

.skiplink,#blog-category{display: none;}

#spotlight{
margin-bottom: 5px ;
border-bottom: 2px solid #F4F2F2;
}

#spotlight h5{
line-height: 20px;
padding: 10px;
FONT-SIZE: 9px;
margin: 20px 0px 0px 40px;
background:url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204538340.gif) no-repeat left ;
height:20px;
width: 339px;
padding-top:5px;
padding-left:120px;
color:#666666;
}

#spotlight-text{
color:#336699;
font: 13px Simhei;
padding: -20px 0px 10px;
padding-left:153px;
}

/*文章內容*/
#content {
background: #FFFFFF;
float: left;
color: #CCCFC5;
width:550px ;padding:10px;
margin-top:-150px;
}

.publish {width: 40px; line-height: 160%;}

#article-area{}

.article-area-title,
#display{
color:#333333;
text-align:right;
margin : 5px 0px ;
}
/*瀏覽方式*/
#display span{}
/*簡短摘要*/
#display a{}

/*文章日期*/
.month {
background:transparent url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204720572.gif) left top no-repeat;
display: block;
text-align: center;
width: 44px;
height: 16x;
line-height: 16px;
color: #FFD555;
font-size:10px;
text-transform : uppercase
}

.date {/*文章日期*/
background:transparent url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204720573.gif) left top no-repeat;
font-size: 17.5px;
display: block;
text-align: center;
width: 44px;
line-height: 25px;
color: #FF3300;}

.year,.time,.day {display: none;}

.title {/*內容抬頭*/
line-height: 20px; padding: 10px; FONT-SIZE: 15px;
margin: -50px -10px 0px 40px;
background:#FFFFFF url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204548967.jpg) no-repeat left top;
height:32px;
width: 500px;
padding-top:10px;
padding-left:50px;

}

.title a {text-decoration:overline underline; color:#A2D001;font-weight:bold;letter-spacing:3px;}
.title a:hover {text-decoration: none; color: #666;}

.article-body {
display: block; width: 500px;
margin: 0px 0px 0px 40px; background: #FFFFFF;
color:#999;
padding: 10px 10px 20px 20px;
overflow:hidden;
}
.article-content{
}

.back-to-top {
        font-size: 8pt;
        margin-top:-40px;
        margin-bottom:16px;
clear: both;
text-align: right;

}
.back-to-top a {color: #FF3300}

.author {/*文章內文底部文字*/
font-size: 8pt;
text-align:right;
margin: 10px 0px 5px 0px;
color:#666;
background:#E7E7E7;

}
.author a { text-decoration: none; color: #999;}
.author a:hover {text-decoration: none; color: #999;}
.author span {display:none}

.more a {
color:#FF0072;
display:block;
font-size:12px;
font-weight:normal;
width:97%;
margin-top:30px;
margin-bottom:20px;
text-align:right;
}
.more a:hover {
color:#207BF7;
}

.bookmark {
text-align: left;/*小連結加入書籤靠左*/
margin-top: 40px;
margin-right: 20px;
text-align: right;
}
.bookmark span {display: none;}
.bookmark a img {filter: alpha(opacity=50); -moz-opacity: 0.5; width: 12px; height: 10px;}
.bookmark a:hover img {filter: alpha(opacity=80); -moz-opacity: 0.8; width: 12px; height: 10px;}

.forward,.history {display: none;}

.article-footer {padding: 0px 0px 10px 0px;}

.refer {
color: #FF3300;
font-size: 0pt;
letter-spacing: -2px;
}
.refer a {
text-align: left;
border-left: 2px solid #FF3300;
padding-left: 5px;
font-size: 8pt;
letter-spacing: 1px;
line-height: 18px;
color: #FF3300;
margin-left: 40px;
}
.refer a:hover {
border-left: 2px solid #666;
color: #000;
}
#blog-main .refer{visibility:hidden}

#trackback-title,#comment-title {display: none;}
.user-post-title img,.user-post-title span {display: none;}

/*迴響*/
input{font-family: arial; border: none; color: #C4DAB2; font-size: 8pt;background:none;}

select{background:#FF3300;color:#FFFFFF;width:200px;}

#trackback-url {margin: 0px 0px 10px 40px; text-align: left;}

.page {margin-left:40px;}
.page a{color:#ccc;margin-left:2px;}
.page span {font-size:20px;color:#000}

#comment-box{
width:500px;
}

.single-post {
clear:both;
height:1%;
width:495px;
margin-left:10px;
margin-right:5px;
color:#666;
font-size:12px;
line-height:180%;
margin-bottom:15px;
margin-top:15px;
}

.single-post:after {
clear:both;
content:".";
display:block;
height:0pt;
overflow:hidden;
visibility:hidden;
}

.post-info {
color:#333;
font-size:12px;
padding-top:2px;
border-bottom:1px solid #000
}

.floor{font-size:20px;color:#333}

.post-info a {font-size:12px;}
.post-info img.hidden-message {}
.user-name {color:#eee}

.post-info img {}
.post-info img.pixnet-user {}
.homepage {}
.post-info.post-time {}
.show-message {}
.delete-message {}
.reply-message {}
.user-ip {display:none;}

.post-photo {
float:left;
margin:10px;
width:60px;height:60px;
padding:5px;
text-align:center;
}
.post-photo img {
height:60px;
width:60px;
filter: alpha(opacity=80); -moz-opacity: 0.8;
}
.post-text {
color:#8A8B77;
float:right;
width:380px;
overflow:hidden;
padding-top:10px;
padding-bottom:10px;
}

.reply-text {/*回覆*/
clear:both;
color:#FF3300;
overflow:hidden;
width:360px;
float:right;
padding:5px 10px;
width:365px;
background:#FFFFFF url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204717612.jpg) no-repeat left top ;
padding-top:45px;
}
.reply-text p {
display:none;
}
.reply-text a {
}
.single-post.secret {display:none}

.post-comment {/*請留言*/
FONT-SIZE: 0pt;
MARGIN: 20px 10px 0px 10px;
height:40px;
TEXT-ALIGN: right;
COLOR: #333333;
}
.post-comment A {
DISPLAY: block;
BACKGROUND: url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204543996.jpg) no-repeat 0px 0px ; WIDTH: 198px; COLOR: #ffffff;
HEIGHT: 45px;
TEXT-ALIGN: right
}
.post-comment A:hover {
COLOR: #ffffff;
}

/*右列連結*/
#links {
float: right;
width: 26%;
top: 0px;

margin-top: 0px;
font: 12px arial;
}
#links-row-1{}
#links-row-2{}

.box-title{
height: 50px;
font: 20px Simhei;/*旁邊字幕*/
margin-bottom: 5px ;
background: url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204528206.gif) left top no-repeat;) left top no-repeat;
padding-top: 20px;
padding-left: 50px;
color: #3399cc;/*旁邊字幕*/
}

.box-text {margin-bottom: 5px;
padding: 0px 10px 0px 10px;
background: url() no-repeat bottom left;
line-height:150%;
color:#207FC9
}
.box-text{
}
.box-text li{
margin: 3px 0px ;
border-bottom: 1px dotted #DDC8C8;
padding-bottom: 2px;
}
.box-text a{
}
.box-more{
text-align: right;
clear: both;
margin: 5px 0px;
}

#murmur{}
#murmur .box-title{}
#murmur .box-text{}

/*日曆*/
#calendar{text-align:center;}
#calendar table{width:95% ;color:#333;font-size:11px;}

#calendar a {
background:transparent url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204553757.gif) no-repeat center center;
border:0px none;
color:#999999;
display:block;
height:21px;
padding:0pt;
}

#calendar a:hover {
background:none;color:#FEF8D2
}

#calendar th {text-align:center;}

#calendar th a {background:none;color:#666}
#calendar th a:hover {background:none;color:#000}

.box-more {text-align: center;}
.box-more a {text-decoration: none;}
.box-more a:hover {text-decoration: none;}

#latest-comment a ,
#recent-article a ,
#category a,
#mylink a,
#hot-article a,
#broadcast .broadcast-text a,
#latest-trackback a,
#subscription a
{
display: block; border-bottom: 1px solid #333;
color:#333
}

#latest-comment a:hover,
#recent-article a:hover ,
#category a:hover,
#mylink a:hover ,
#hot-article a:hover,
#broadcast .broadcast-text a:hover,
#latest-trackback a:hover,
#subscription a:hover{
display: block;color: #000;
background:#FEF8D2;
}

.box a {text-decoration: none; color: #666;}
.box a:hover {text-decoration: none; color: #000;}

.broadcast-photo {float: left;}
.broadcast-photo img {width: 30px; height: 30px; border: 1px solid #666666; padding: 2px; margin: 2px; margin-top: 10px;}

.broadcast-time {font-size: 11px; color:#333; padding: 10px 0px 0px 5px;}
.broadcast-time a {display: block; text-decoration: none; color: #555; width: 125px;}

.broadcast-text a {width:210px;}
.broadcast-text {clear: both; width: 170px; border-bottom: 1px dotted #777; padding-bottom: 5px;}

#counter {color: #666;}
#powered .box-text {text-align: center;}

#mylink .box-text h6{margin-top:5px;}

#category .box-more {display:none;}

#category .box-text h6{color:#000033;padding-top:5px;border-bottom:1px solid #0A2E7F}
#category .box-text img {filter:xray}

.main-list{
display: block;
width: 500px;
margin: 0px 0px 0px 40px;
padding: 10px 10px 20px 10px;
overflow:hidden;
background:#FF3300;
color:#666
}

.main-list a {color:#999}
.main-list a:hover {color:#fff}

.list-num {display:none}
.list-date {width: 100px; text-align: center;}

#murmur-list td{
padding-top:5px;
border-bottom:1px dashed #666
}

#display {text-align: right; margin: 5px 5px 10px 40px;}
#view-mode{display:none}

/
*#murmur-main .article-area-title,#listall-main .article-area-title{
FONT-SIZE: 15px;
color:#FF3399;
margin: 0px 0px 0px 40px;
padding: 10px 10px 0px 10px;
line-height: 20px;
background:#000 url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1204548967.jpg) no-repeat left top;
height:30px;
width: 485px;
padding-top:20px;
padding-left:35px;
font-weight:bold;
}*/

#archives-main .article-area-title,#category-main .article-area-title{FONT-SIZE: 15px; color:#333;font-weight:bold;line-height:160%;height:40px;margin: 0px 0px 0px 40px;}

#footer{
text-align:center ;
clear:both ;
border-top: -10px solid #fff;
background:#FFF200 ;
padding:10px 10px ;
text-align:center ;
}

(Read More...)

Posted by ziyilee at 痞客邦 PIXNET Comments(0) Trackback(0) Hits(51)

Personal Category:CSS

▲top

Jan 14 Mon 2008 13:25
我話我畫之 2007.if (css)

自己設計的第一個pixnet 版面，在參考【Lisa 畫作樣式-非關愛情】之後
因為我英文很爛，看不懂css ><

這個版面是現學現賣的，在 / 版面管理 → 樣式選擇 → 插畫.卡通/ 裡
還可以的話請記得給我鼓勵唷~ ^^
我會很開心

body{
font-size:small;
font-family:"Verdana" ;
}

#body-div{}
/*登出登入字的顏色*/
a{
color: #333333;
text-decoration:none ;
}
a:hover{/*移動滑鼠*/
color: #c30;
text-decoration: underline;

}
select{width: 200px;}

#authority{
background:#333333;
padding: 10px 0px ;
text-align:center ;
border-bottom: 3px solid #ff0000;
}
#authority a{
background:#aaa;
padding:5px 10px ;
color: fff;
}
#authority a:hover{
background:#eee ;
padding:5px 10px ;
color: #333 ;
}

#container{
width:96% ;
margin: 10px auto 10px auto ;
background: url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1199455431.jpg) right top repeat-y #ececec ;
position: relative;

}

#container2{}
#container3{}

/*文章內容及上下捲軸*/
#main{

height:460px;
overflow:auto ;/*背景固定*/
SCROLLBAR-FACE-COLOR: #ffffff ;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #cccccc;
SCROLLBAR-3DLIGHT-COLOR: #cccccc ;
SCROLLBAR-ARROW-COLOR: #999999;
SCROLLBAR-TRACK-COLOR: #cccccc ;
SCROLLBAR-DARKSHADOW-COLOR: #999999;

}

#header{/*頁首與天的間距*/

margin-bottom: 5px;
argin-left: 30%;
width: 750px;
height: 230px;
}
#login-bar{/*登出登入*/
position: absolute;
left: 31%;
top: 0px;
font: 8pt verdana;
/*主題排列隱藏text-align:right ;*/
background:#ff3300;
width: 36%;
height: 25.5px;
padding: 10.5px;
border-bottom: 1px solid #fff;
}

#banner{/*基本介紹*/
position: absolute;
left: 61%;
top: 0px;
width: 49.5%;
height: 27px;
background:#ffcc00;
border-bottom: 1px solid #fff;
padding-top: 5px;
padding-left: 7px;
}
#banner h1 a{
font-size: medium ;
font-weight:bold ;
color:#fff;
}

#banner .skiplink,
#blog-category{
display:none;
}

#banner h2{}

#navigation{
position: absolute;
top: 0px;
left: 0px;
overflow:hidden ;
_overflow:none ;
_height:1% ;
padding: 10px ;
}

#navigation a{
display:block ;
width:120px ;
text-align:center ;
color:#333 ;
background:#888 ;
padding: 5px 0px ;
}
#navigation li{
float:left ;
margin: 0px 10px 0px 0px ;
}
#navigation #link-album a{/*相簿*/
background:#ffff00;
}
#navigation #link-blog a{/*部落格*/

background:#66ccff;
}
#navigation #link-guestbook a{/*留言板*/
position: absolute;
left: 0px;
top: 29px;
background:#ff6666;
}
#navigation #link-profile a{/*名片*/
position: absolute;
left:130px;
top: 29px;
background:#ccccc;
}
#navigation a:hover{
background:#999 !important;
color:#fff;
}

/*文章內容*/
#content{
width:540px ;
float: left;
margin-left:10px;
padding-left; 10px; overflow: hidden;
}

#spotlight{
margin-bottom: 5px ;
border-bottom: 2px solid #fafafa;
}

#spotlight h5{
color:#666;

text-align: left;
padding:3px 0px ;
}

#spotlight-text{
padding: 5px 0px 10px;
}

#article-area{

}

.article-area-title,
#display{
color:#333333;
text-align:right;
margin : 5px 0px ;
}

/*瀏覽方式*/
#display span{}
/*簡短摘要*/
#display a{}

.article{
border:1px solid #ccc;
border-right:1px solid #aaa;
border-bottom:1px solid #aaa;
background: #ffffff;

margin-bottom: 20px ;
padding:10px ;

}
.article-head{/*日期旁邊的符號*/
margin-bottom: 12px ;
padding-left: 45px;
background: url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1199459575.gif) left top no-repeat;
}

.publish{/*日期*/
font-size: x-small;
text-transform: uppercase;
margin-bottom: 5px;
}
.title h2 a{
font: 20px Simhei;/*大字幕*/
color: #666666;
}
.title h2 img{}

.article-body{
font-size: small;
background: #ffffff;
padding-right: 10px;
}

.bookmark{
text-align: left;/*小連結加入書籤靠左*/
/*text-align:right ;小連結加入書籤靠右*/
padding-right: 10px;
}

.article-content{/*文章內文文字*/
line-height: 140% ;
margin : 5px 0px ;
color:#999999;

}

.more{
text-align: right;
margin: 5px;
}

.author{/*文章內文底部文字*/
background: #666666;/*底色*/
/*text-transform: uppercase;*/
text-align:right ;
margin: 50px 0px 0px 0px ;
border-bottom: 1px solid #ccc;
padding-bottom: 5px ;
font: 12px arial;
color:#3399cc;
}

.article-footer{
}
.refer{
padding-bottom: 5px ;
margin: 5px 0px;
}
.history{
padding-bottom: 5px ;
margin: 5px 0px;
}
.forward,

.back-to-top{
text-align:right ;
padding-right: 10px;
}

/*引用回應*/
#user-post{
margin-bottom: 15px ;
}
#trackback-box{
margin-bottom: 20px;
}

#comment-box{}
.user-post-box{
}

#trackback-title{}
#comment-title{}

.user-post-title{/*引用發表*/
background:none;
color:#c30 ;
padding: 5px 10px ;
font-size: small ;
margin-bottom: 15px ;
}

#trackback-text{}
#comment-text{}

.user-post-text{}

.single-post{

background:#ffffff;
border-bottom: 1px solid #aaa;
border-right: 1px solid #aaa;
margin: 10px auto 10px;
padding: 10px ;
overflow:hidden ;
_overflow:none ;
_height: 1% ;
font: 12px arial;
color: #666;
}

.post-info{
border-bottom: 1px dashed #bbb ;
padding-bottom: 5px ;
margin-bottom: 10px ;
font-weight:bold ;
text-align: right;
}

.post-text{
width: 72% ;
float:right ;
margin-bottom: 10px ;
}
#trackback-box .post-text{
width: auto ;
float:none ;
}

.post-text p{}

.post-photo{
width:20% ;
float:left ;
text-align:Center ;
margin-bottom: 10px;
}
.post-photo img{
border: 3px solid #ccc;
}
.reply-text{
clear:both ;
border-top: 1px dashed #bbb ;
padding-top: 5px ;
}
.reply-text p{
display:none;
}

.secret{}

.post-comment{

margin: 5px 0px ;
font: 12px arial;

}

.main-list{

padding:10px ;
margin-bottom: 15px ;
}

.main-list table{
width:99% ;
}
　　
.main-list h3{
padding: 5px 10px ;
margin-bottom: 10px;
}
.main-list th{
border:1px solid #aaa ;
padding: 2px;
}
.main-list td{
border:1px solid #aaa ;
padding: 2px;
}
.main-list a{
}

#article-list{}
#category-list{}
#murmur-list{}

.page{
margin: 10px 0px;
letter-spacing: 0.3em;
}

/*右列連結*/
#links{

        float: right;
        width: 26%;
top: 0px;

margin-top: 0px;
font: 12px arial;
}
#links-row-1{}
#links-row-2{}

.box{
padding: 5px;
margin-left: 5px;
margin-bottom: 15px ;
clear: both;
}
.box-title{

height: 50px;
font: 20px Simhei;/*旁邊大字幕*/
margin-bottom: 5px ;
background: url(http://p6.p.pixnet.net/albums/userpics/6/4/632864/1199455646.gif) left top no-repeat;
padding-top: 20px;
padding-left: 50px;
color: #3399cc;/*旁邊大字幕*/
}
.box-text{
}
.box-text li{
margin: 3px 0px ;
border-bottom: 1px dotted #aaa;
padding-bottom: 2px;
}
.box-text a{
}
.box-more{
text-align: right;
clear: both;
margin: 5px 0px;
}

#murmur{}
#murmur .box-title{}
#murmur .box-text{}

#calendar{}
#calendar table{
width: 170px;
}
#calendar .calMonthNav{}
#calendar .calMonthHeader{}
#calendar th{
text-align: center;
padding: 2px;
}
#calendar td{
text-align: center;
padding: 2px;
}
#calendar td a{
font-weight: bold;
color:#666;
}

#latest-comment .box-text li a,
#latest-trackback .box-text li a,
#subscription .box-text li a{
display: block;
width: 99%;
}

#visitor li ,
#crumb li{
float: left;
margin: 2px;
}
#visitor li img ,
#crumb li img{
width: 30px;
height: 30px;
border: 1px solid #aaa;
}

#broadcast ul{
clear: both;
padding: 3px 0px;
border-bottom: 1px dotted #aaa;
}
#broadcast li{
border: 0;
}
#broadcast .broadcast-photo{
float: left;
margin-right: 10px;
width: 35px;
}
#broadcast .broadcast-photo img{
border: 1px solid #aaa;
}

#footer{
clear:both ;
border-top: -10px solid #fff;
background:#3399cc/*e6ce7a*/ ;
padding:10px 10px ;
text-align: right ;
}