本文发表在 rolia.net 枫下论坛pbase不错，它的几个预设css效果也挺好，能个性化一下相册。个人喜欢alexc和webdev。但是觉得他们都有不足，昨天晚上把这两个css取长补短，按照俺的喜好融合了一下，喜欢的朋友可以试试。

alexc的特点是字体说明鲜亮。webdev有点在于使用了css filter效果，能产生鼠标移动到缩略图上的动态效果，但是标题和说明文字都是暗灰色，看起来很费劲，加上是为英文定制的字体大小，中文字看着更难受。

不过pbase提供了可以自定义的css，进入Gallery的设置界面，在style sheet一栏，有个edit style sheets。点击进入，用creat a new style sheet先取一个名字，然后点击new css，这时出现一个文本框里面是最基本的css。

我修改过的如下：

<!--


A, TD.A, A:link {
color: #FFCC00;
text-decoration: none;
}
A:hover { color: #FFFF66; text-decoration: underline; }
A:visited { color: #FFCC66; }
A:active { color : #d5ae83; }

a.td.thumbnail, a.td.thumbnail:link, a.td.thumbnail:visited, a.td.thumbnail:active {
border: rgb(0, 0, 0) 1px solid;
margin-bottom: -45px;
padding-top: 5px;
width: 172px;
display: block;
background: rgb(35, 35, 35);
height: 197px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
}
a.td.thumbnail:hover {
border: rgb(95, 121, 216) 1px solid;
margin-bottom: -45px;
padding-top: 5px;
width: 172px;
display: block;
background: rgb(32, 32, 32);
height: 197px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
body{
margin-bottom: 20px;
margin-top: 0px;
background: rgb(45, 45, 45);
}
div, th, tr, table, font, li, ul, form, blockquote, p, b, i, h1, h2, h3, h4, h5, font, center {
font-family: verdana, arial, sans-serif;
font-size: 10pt;
color: white;

}
font {
margin-left: 4px;
margin-right: 4px;
width: 170px;
display: block;
color: rgb(255, 255, 255);
font: 12px Verdana, Tahoma, Helvetica, sans-serif;
letter-spacing: 0px;
}
h1{
border: rgb(95, 121, 216) 1px dotted;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
margin-bottom: 1em;
margin-left: -10px;
margin-right: 0px;
padding: 5px;
width: 100%;
display: block;
background: rgb(0, 0, 0);
color: #ffcc00;
font-size: 18px;
font-weight: bold;
letter-spacing: 4px;
text-align: right;
height: 21px;
position: relative;
filter:
progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr
='#000000',endColorstr='#2D2D2D');
}

h2
{
font-size: 12pt;
font-weight: normal;
text-align: right;
letter-spacing: 8px;
padding-top: 15px;
padding-bottom: 15px;
margin-left: 2px;
margin-right: 2px;
background-color: black;
color: white;
}

h2:first-letter
{
color: #d5ae83;
font-style: bold;
font-size: 22pt;
}


h3 {
border-bottom: rgb(0, 0, 0) 1px dotted;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
padding: 2px;
width: 400px;
display: block;
background: rgb(40, 40, 40);
color: rgb(255, 255, 255);
font: 14px;
font-weight: normal;
letter-spacing: 0px;
text-align: center;
}
h5 {
padding-left: 2px;
width: 150px;
display: block;
color: rgb(204, 204, 255);
font-size: 14px;
font-weight: normal;
filter:
progid:DXImageTransform.Microsoft.gradient(gradientType=1,enabled='true',startColorstr
='#000000',endColorstr='#2D2D2D');
}
i{
display: none;
}
img{
border: rgb(0, 0, 0) 1px none;
}
img.thumbnail {
border: rgb(0, 0, 0) 1px solid;
margin: 0px;
padding: 0px;
background: rgb(45, 45, 45);
vertical-align: middle;
}input {
border: rgb(0, 0, 0) 1px solid;
}
table.thumbnail {
width: 10%;
}
td {
border: 1px none;
background: none;
border-collapse: collapse;
empty-cells: show;
}
td.message_body {
border-bottom: rgb(0, 0, 0) 1px dotted;
border-left: 1px none;
border-right: 1px none;
border-top: 1px none;
display: block;
background: rgb(40, 40, 40);
}
.caption {
color: rgb(95, 121, 216);
font-size: 14px Verdana, Tahoma, Helvetica, sans-serif;
font-style: italic;
}
.display {
border: rgb(0, 0, 0) 1px solid;
margin-top: 1em;
background: rgb(0, 0, 0);
filter:
progid:DXImageTransform.Microsoft.Shadow(color="#141414",Direction=135,Strength=5);
}
.lid{
background: rgb(55, 55, 55);
color: rgb(102, 102, 102);
font: 14px Verdana, Tahoma, Helvetica, sans-serif;
text-decoration: none;
}
.message_body {
margin: 5px 5px 10px;
color: rgb(255, 255, 255);
font: 12px Verdana, Tahoma, Helvetica, sans-serif;
}
.sb{
background: rgb(91, 91, 101);
color: rgb(204, 204, 255);
font: 14px Verdana, Tahoma, Helvetica, sans-serif;
text-decoration: none;
}



BODY { margin-top: 0px;}
HR { position : relative;}




BODY { margin-top: 0px;}
HR { position : relative;}

-->

将<!-- 和 -->中的内容（包括<!-- -->）复制到文本框中，然后update css。
这时页面效果将使用这个css。然后返回你的Gallery设置，在style sheet的下拉菜单中选择你刚才创建的css，update，enjoy。。。更多精彩文章及讨论，请光临枫下论坛 rolia.net