这个相册是怎么用css完成的?

html-css013

这个相册是怎么用css完成的?,第1张

恩,帮你用Firefox的firebug查看了一下,主要代码如下:

这是页面的HTML代码,包括其中的CSS样式调用:

<ul class="hoverbox">

<li>

<a href="#">

<img alt="description" src="img/photo01.jpg"/>

<img class="preview" alt="description" src="img/photo01.jpg"/>

</a>

</li>

</ul>

以下是关于图片相册的CSS代码:

//////CSS代码////

.hoverbox {

cursor:default

list-style-image:none

list-style-position:outside

list-style-type:none

}

.hoverbox a {

cursor:default

}

.hoverbox a .preview {

display:none

}

.hoverbox a:hover .preview {

display:block

left:-30px

position:absolute

top:-33px

z-index:1

}

.hoverbox img {

background:#FFFFFF none repeat scroll 0% 0%

border-color:#AAAAAA rgb(204, 204, 204) rgb(221, 221, 221) rgb(187, 187, 187)

border-style:solid

border-width:1px

color:inherit

height:75px

padding:2px

vertical-align:top

width:100px

}

.hoverbox li {

background:#EEEEEE none repeat scroll 0% 0%

border-color:#DDDDDD rgb(187, 187, 187) rgb(170, 170, 170) rgb(204, 204, 204)

border-style:solid

border-width:1px

color:inherit

display:inline

float:left

margin:3px

padding:5px

position:relative

}

.hoverbox .preview {

border-color:#000000

height:150px

width:200px

}

你去试试看哦,就是这样的。

#m_track a img{FILTER: Alpha(Opacity=100, FinishOpacity=5, Style=2, StartX=0, StartY=0, FinishX=0, FinishY=0) gray}

这是一个滤镜效果

如果想把相册弄成这样,找到相册主体的对应代码,加上以上括号内属性就可以了

那不系CSS能做到滴- -

你到高级设置中添加模块,有展览相册的模块,例如"最新照片",

"我的照片秀"啦,还有"关于我"模块中也可以添加相册展览...

那个特效都是百度自带的设置,你可以选择自己喜欢的效果和相框....