close
這是利用其中一張自繪的涅羅同人圖修改加工後的版面,

修改完後我感到非常的滿意>﹏<!

我覺得還挺漂亮的,

這是我第一次把相簿也改成自己畫的,

啊啊~自己畫的果然好(啥)。

CCS存檔如下 :










/*---
css design by kitten in 2007/12/01 best view is IE6 & FF1.5 1024x768 up copy right pixnet
---*/

html {
scrollbar-face-color: #000;
scrollbar-highlight-color: #000;
scrollbar-shadow-color: #000;
scrollbar-3dlight-color: #000;
scrollbar-arrow-color: #000;
scrollbar-track-color: #000;
scrollbar-darkshadow-color: #000;
}

body {
font-size: 12px;
font-family: verdana;
background: #000;
margin: 0px;
cursor:crosshair;
}

ul {
padding: 0px;
margin: 0px;
}

li {
list-style: none;
padding: 0px;
margin: 0px;
}

img {
border: none;
}

a {
color: #777;
text-decoration: none;
}

a:hover {
color: #ccc;
cursor:n-resize;
}

#container {
position: relative;
width: 750px;
background: #5f0000;
margin: 0px auto;
}

#pageHeader {
padding: 0px;
margin: 0px;
}

.navBarLink {
position: relative;
top: 2px;
left: 0px;
height: 18px;
text-align: right;
color: #5f0000;
background: #5f0000;
padding: 0px;
font-size: 5px;
}

.navBarLink a {
color: #999;
margin: 0px;
font-size: 12px;
}

.navBarLink a:hover {
position: relative;
top: 1px;
left: 1px;
color: #ccc;
font-size: 12px;
}

.adblock {
text-align: center;
padding: 10px 0px 0px 0px;
}

.adblock a {
color: #999;
}

#headerBody {
position: absolute;
top: 5px;
height: 106px;
margin: 20px 0px 0px 0px;
}

#albumPanel {
background:#000 url(http://img209.imageshack.us/img209/4937/12ga0.png) no-repeat 0px 0px;
width: 750px;
height: 250px;
border-top: 5px solid #8f0000;
border-bottom: 5px solid #8f0000;
padding: 0px;
margin: 0px;
}

#albumName {
font-family: arial;
width: 735px;
padding: 5px 15px 0px 0px;
text-align:right;
}

#albumName a {
vertical-align: middle;
font-size: 20px;
color: #fff;
}

#albumName a:hover{
font-size: 20px;
color: #777;
}

#albumTopic {
text-align: right;
display: block;
color: #ccc;
width: 725px;
height: 180px;
word-break: break-all;
padding: 0px 0px 10px 10px;
background:none;
overflow:auto;
}

#userPanel {
position: absolute;
top: 260px;
left: 0px;
width: 360px;
font-family: Georgia;
}

#userPanel span {
display: block;
float: right;
background:#8f0000;
text-align:right;
margin-right: 3px;
margin-top: 0px;
}

#userPanel a {
display: block;
width: 60px;
height: 20px;
color: #aaa;
font-size: 13px;
letter-spacing: 0px;
background:#8f0000;
border-bottom: 5px solid #000;
padding: 3px 0px 0px 0px;
}

#userPanel a:hover {
color: #eee;
padding: 10px 0px 0px 0px;
border-bottom: 5px solid #000;
}

#userPanel a span {
width: auto;
}

#userPanel span.link-separator {
display: none;
}

#userFriends {
position: absolute;
top: 260px;
left: 5px;
text-align:right;
}

#userFriends a{
display: block;
width: 95px;
height: 20px;
color: #aaa;
font-size: 13px;
letter-spacing: 0px;
background:#8f0000;
border-bottom: 5px solid #000;
padding: 1px 2px 2px 0px;
}

#userFriends a:hover{
color: #eee;
padding: 10px 2px 0px 0px;
border-bottom: 5px solid #000;
}

#pageBody {
width: 750px;
padding: 10px 0px 30px 0px;
margin-top: 160px;
}

#contentHeader {
padding: 10px 0px 0px 0px;
}

#breadCrumb {
width: 740px;
text-align: left;
margin: 10px 0px 10px 0px;
padding: 5px 0px 5px 10px;
font-size: 15px;
background:#7f0000;
}

#breadCrumb a {
color: #bbb;
}

#breadCrumb a:hover {
color: #eee;
position: relative;
top: 1px;
left: 1px;
}

.albumCount {
text-align: right;
}

.albumCount span {
color: #999;
text-align: center;
}

.pageSelector {
float: right;
width: 750px;
height: 20px;
text-align: center;
padding: 0px;
margin: 0px;
background:#7f0000;
}

.pageSelector li {
float: left;
margin: 0px 0px 0px 2px;
}

.pageSelector li span {
display: block;
color: #fff;
background: #5f0000;
padding: 3px 6px;
}

.pageSelector a {
display: block;
background: #000;
padding: 2px 5px;
}

.pageSelector a:hover {
background: #9f0000;
padding: 2px 5px;
}

.pageSelector a span {
color: #999;
background: none;
padding: 0px;
}

.pageSelector a:hover span {
color: #ccc;
}

#funcLinks {
float: right;
width: 165px;
height: 20px;
padding: 0px 0px;
margin-top: 5px;
}

#funcLinks li {
float: left;
}

#funcLinks li a {
display: block;
width: 75px;
text-align: center;
color: #999;
background: #000;
padding: 2px 0px;
margin: 0px 0px 0px 5px;
}

#funcLinks li a:hover {
color: #fff;
background: #9f0000;
}

#contentBody {
clear: both;
text-align: center;
padding-top: -2px;
margin: 10px 0px 5px 0px;
}

.albumFunctions {}

.albList {
width: 700px;
height: auto;
margin: 0px auto;
padding: 10px 0px 0px 0px;
}

.albBox {
width: 290px;
height: 120px !important;
margin: 0px 0px 10px 0px;
border: 1px solid #000;
padding: 0px;
}

li.albBoxOdd {
float: left;
margin-left: 20px;
}

li.albBoxEven {
float: right;
margin-right: 20px;
}

.albThumb {
float: left;
width: 95px;
height: 90px;
text-align: center;
background: none;
padding: 0px;
margin: 10px 0px 0px 5px;
_margin: 10px 0px 0px 5px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
-moz-opacity: 0.7;
}

.albData {
float: right;
width: 170px;
height: 110px;
text-align: left;
padding: 0px;
margin: 10px 0px 0px 0px;
_margin: 10px 0px 0px 0px;
}

.albTitleDiv {
height: 20px;
line-height: 20px;
overflow: hidden;
color: #777;
padding: 0px 0px 0px 5px;
margin: 0px 0px 10px 0px;
background: #000;
font-family: Georgia;
}

.albDesc {
padding: 0px ;
height: 70px;
overflow: auto;
color: #fff;
font-size: 10px;
margin-top: -5px;
border: 0px solid #555;
scrollbar-face-color: #5f0000;
scrollbar-highlight-color: #5f0000;
scrollbar-shadow-color: #5f0000;
scrollbar-3dlight-color: #5f0000;
scrollbar-arrow-color: #000;
scrollbar-track-color: #5f0000;
scrollbar-darkshadow-color: #5f0000;
}

.albInfo img {
display: none;
}

.hits {
color: #999;
margin: 15px 0px 0px 0px;
font-size: 11px;
font-family: Georgia;
}

.thumbList {
width: 610px;
margin:0px;
}

li.thumbBox {
float: left;
padding: 0px;
margin-top: 10px;
}

.thumbImg {
width: 120px;
height: 120px;
text-align: center;
padding: 0px;
margin: 0px 0px 5px 0px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-moz-opacity: 0.8;
}

.thumbImg a img.thumb {
border: none;
vertical-align: middle;
}

.thumbImg img.thumbSpacer{
width: 0px;
height: 80px;
vertical-align: middle;
}

.thumbTitle {
width: 120px;
height: 15px;
overflow: hidden;
text-align: center;
word-break: break-all;
color: #ccc;
background: none;
padding: 0px;
margin: -32px 0px 0px 0px;
}

#imageBox {}

#imageTitle {
color: #fff;
font-size: 12px;
margin: 0px 0px 5px 0px;
}

#imageFrame {}

#imageFrame img {
margin-top: 10px;
}

#imageCaption {
color: #999;
padding: 10px;
}

#thumbStrip {
clear: both;
width: 750px;
height: 150px;
border-top: 1px dotted #ccc;
margin: 0px auto;
}

#thumbStrip ul li {
float: left;
width: 130px;
height: 130px;
margin: 10px 0px 0px 10px;
}

#thumbStrip .thumbFrame {
position: relative;
width: 110px;
height: 110px;
text-align: center;
background: none;
padding: 0px;
margin: 10px auto;
border: 1px solid #555;
}

#thumbStrip .thumbAd {
color: #fff;
}

#thumbStrip span.adFlag {
display: block;
height: 15px;
}

.thumbFrame img {
vertical-align: middle;
}

#thumbStrip .thumbSpacer {
width: 0px;
height: 110px;
vertical-align: middle;
}

#commContainer {
display: none;
}

#contentFooter {
clear: both;
}

#pageFooter {
display: none;
}

div.menu {
position: absolute;
visibility: hidden;
width: 130px;
left: 0px;
top: 0px;
z-index: 500;
font-size: 10pt;
border: 1px solid #555;
border-bottom: none;
background: #000;
}

div.menu ul li {
list-style-type:none;
display: block;
border-bottom: 1px solid #000;
}

div.menu ul li center {
padding: 6px 0px;
}

div.menu a {
text-decoration: none;
white-space: nowrap;
display: block;
padding: 4px;
line-height:20px;
}

div.menu a:link {
color: #aaa;
}

div.menu a:visited {
color: #aaa;
}

div.menu a:hover {
color: #bbb;
background: #333;
}

div#tipDiv {
position:absolute;
visibility:hidden;
left: 0px;
top: 0px;
z-index: 10000;
background: #000;
border: 1px solid #555;
width: 130px;
padding: 6px;
font-size: 10pt;
line-height: 130%;
}

div.ttHead {
font-size: 10pt;
margin-bottom: 5px;
font-weight: normal;
color: #ccc;
}

div.ttBody {
color: #666;
}

div.fmenu {
position:absolute;
visibility:visibility;
left:-100px;
top: -100px;
z-index: 500;
background:#eee;
border:1px solid #ccc;
overflow-y:auto;
overflow-x:hidden;
width:175px;
max-height:320px;
height:expression( this.scrollHeight > 320? "320px" : "auto" );
font-size:12px;
}

div.fmenu ul {
margin:0px;
padding:0px;
}
div.fmenu ul li {
position:relative;
list-style-type:none;
display:block;
}

div.fmenu ul li.friendCat {
display:block;
font-size:12px;
color:white;
background:#000;
font-family:Arial;
font-weight:bold;
text-decoration:none;
padding:2px;
}

div.fmenu ul li.friendLink a{
display:block;
width:100%;
padding:2px 4px;
background: #000;
}

div.fmenu ul li.friendLink a:hover{
background: #5f0000;
}

div.fmenu ul li.friendLink img {
padding:2px;
vertical-align:top;
border:0px;
}

div.fmenu ul li.friendLink span.friendAvatar {
display:block;
width:34px;
height:34px;
background:#000;
text-align:center;
border:1px solid #555;
}

div.fmenu ul li.friendLink span.friendID {
margin-top:-33px;
margin-left:43px;
display:block;
text-decoration:none;
}

div.fmenu ul li.friendLink span.friendDesc {
margin-left:43px;
margin-bottom:5px;
display:block;
font-size:10px;
color:#999999;
font-family:Arial;
text-decoration:none;
}











arrow
arrow
    全站熱搜

    chhianna 發表在 痞客邦 留言(0) 人氣()