代码简介：
用CSS制作一个ImageView，类似一个相册浏览的功能，重点研究一下层与布局。
代码内容：
View Code
"
-//W3C//DTD XHTML 1.0 Strict//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"
>
"
http://www.w3.org/1999/xhtml
"
xml:
lang=
"
zh-cn
"
lang=
"
zh-cn
"
>
"
Content-Type
"
content=
"
text/html; charset=utf-8
"
/>
一个简单漂亮的CSS相册代码 - www.webdm.cn
"
http://www.webdm.cn/images/20091005/urchin.js
"
type=
"
text/javascript
"
>
"
text/javascript
"
>
_uacct = " UA-780254-3 " ;
urchinTracker() ;
"
text/css
"
>
h2,ul,li{ margin: 0 ; padding:0;list-style:none;}
img{ border: 0 ; }
.imgview{
position: absolute ;
top: 30px ;
z- index: 80 ;
float: left ;
width: 857px ;
height: auto ;
min- height: 440px ;
}
.imgview a{
text- decoration: none ;
}
.imgview h2{
position: absolute ;
top: 10px ;
left: 10px ;
width: 290px ;
height: 30px ;
background- color: #FFFFFF ;
color: # 000000 ;
font- size: 1 .2em ;
text- indent: 10px ;
line- height: 30px ;
}
.imgview ul{
position: absolute ;
top: 48px ;
left: 10px ;
z- index: 90 ;
width: 290px ;
height: auto ;
min- height: 230px ;
background- color: #FFFFFF ;
}
.imgview ul li{
float: left ;
width: 82px ;
height: 59px ;
margin: 8px 6px 7px ;
border: 1px solid #DEDEDE ;
}
.imgview ul li strong{
display: none ;
}
.imgview ul li a: hover{
display: block ;
width: 100 % ;
height: 100 % ;
}
.imgview ul li a: focus strong,
.imgview ul li a: active strong{
display: block ;
position: absolute ;
top: 350px ;
left: 300px ;
z- indent: 100 ;
width: 537px ;
height: 30px ;
background- color: #FFFFFF ;
color: # 000000 ;
text- indent: 10px ;
line- height: 30px ;
}
.imgview ul li a: hover span img{
position: absolute ;
top: 240px ;
left: 1px ;
width: 200px ;
height: 140px ;
}
.imgview ul li a: active span img,
.imgview ul li a: focus span img{
position: absolute ;
top: -38px ;
left: 300px ;
z- index: 90 ;
width: 537px ;
height: 380px ;
}
.imgview ul li img{
width: 80px ;
height: 57px ;
}
.imgview .imgview- rep {
position: absolute ;
top: 287px ;
left: 10px ;
z- index: 10 ;
width: 201px ;
height: 140px ;
border: 1px solid # 999999 ;
color: #EFEFEF ;
font- size: 2em ;
text- align: center ;
line- height: 140px ;
}
.imgview .imgview-bgtext{
position: absolute ;
top: 9px ;
left: 309px ;
z- index: 10 ;
width: 537px ;
height: 380px ;
border: 1px solid # 999999 ;
color: #EFEFEF ;
font- size: 5em ;
text- align: center ;
line- height: 380px ;
}
.imgtag{
position: absolute ;
top: 130px ;
left: 10px ;
}
.imgtag .tagname{
float: left ;
width: 100px ;
height: 30px ;
text- align: center ;
line- height: 30px ;
cursor: pointer ;
}
.imgtag .tag1
.imgtag .tag2,
.imgtag .tag3{
position: absolute ;
left: 0 ;
width: 100px ;
}
.imgtag .tag1{
position: absolute ;
left: 0 ;
background- color: #BCC8C3 ;
}
.imgtag .tag1 .imgview{
left: 0 ;
background- color: #BCC8C3 ;
}
.imgtag .tag2{
position: absolute ;
left: 102px ;
background- color: #BFB6B4 ;
}
.imgtag .tag2 .imgview{
display: none ;
}
.imgtag . tag2: hover .imgview{
display: block ;
left: -102px ;
z- index: 80 ;
background- color: #BFB6B4 ;
}
.imgtag .tag3{
position: absolute ;
left: 204px ;
background- color: #CCC8BF ;
}
.imgtag .tag3 .imgview{
display: none ;
}
.imgtag . tag3: hover .imgview{
display: block ;
left: -204px ;
z- index: 80 ;
background- color: #CCC8BF ;
}
content: " . " ;
display: block ;
height: 0 ;
clear: both ;
visibility: hidden ;
}
< div class= " imgtag " >
< div class= " tag1 " >
< div class= " tagname " >分类一 div >
< div class= " imgview " >
< div class= " imgview-bgtext " >PhotoView div >
< div class= " imgview-rep " >PhotoView div >
div >
div >
< div class= " tag2 " >
< div class= " tagname " >分类二 div >
< div class= " imgview " >
< div class= " imgview-bgtext " >PhotoView div >
< div class= " imgview-rep " >PhotoView div >
div >
div >
< div class= " tag3 " >
< div class= " tagname " >分类三 div >
< div class= " imgview " >
< div class= " imgview-bgtext " >PhotoView div >
< div class= " imgview-rep " >PhotoView div >
div >
div >
div >
_uacct = " UA-780254-3 " ;
urchinTracker() ;
h2,ul,li{ margin: 0 ; padding:0;list-style:none;}
img{ border: 0 ; }
.imgview{
position: absolute ;
top: 30px ;
z- index: 80 ;
float: left ;
width: 857px ;
height: auto ;
min- height: 440px ;
}
.imgview a{
text- decoration: none ;
}
.imgview h2{
position: absolute ;
top: 10px ;
left: 10px ;
width: 290px ;
height: 30px ;
background- color: #FFFFFF ;
color: # 000000 ;
font- size: 1 .2em ;
text- indent: 10px ;
line- height: 30px ;
}
.imgview ul{
position: absolute ;
top: 48px ;
left: 10px ;
z- index: 90 ;
width: 290px ;
height: auto ;
min- height: 230px ;
background- color: #FFFFFF ;
}
.imgview ul li{
float: left ;
width: 82px ;
height: 59px ;
margin: 8px 6px 7px ;
border: 1px solid #DEDEDE ;
}
.imgview ul li strong{
display: none ;
}
.imgview ul li a: hover{
display: block ;
width: 100 % ;
height: 100 % ;
}
.imgview ul li a: focus strong,
.imgview ul li a: active strong{
display: block ;
position: absolute ;
top: 350px ;
left: 300px ;
z- indent: 100 ;
width: 537px ;
height: 30px ;
background- color: #FFFFFF ;
color: # 000000 ;
text- indent: 10px ;
line- height: 30px ;
}
.imgview ul li a: hover span img{
position: absolute ;
top: 240px ;
left: 1px ;
width: 200px ;
height: 140px ;
}
.imgview ul li a: active span img,
.imgview ul li a: focus span img{
position: absolute ;
top: -38px ;
left: 300px ;
z- index: 90 ;
width: 537px ;
height: 380px ;
}
.imgview ul li img{
width: 80px ;
height: 57px ;
}
.imgview .imgview- rep {
position: absolute ;
top: 287px ;
left: 10px ;
z- index: 10 ;
width: 201px ;
height: 140px ;
border: 1px solid # 999999 ;
color: #EFEFEF ;
font- size: 2em ;
text- align: center ;
line- height: 140px ;
}
.imgview .imgview-bgtext{
position: absolute ;
top: 9px ;
left: 309px ;
z- index: 10 ;
width: 537px ;
height: 380px ;
border: 1px solid # 999999 ;
color: #EFEFEF ;
font- size: 5em ;
text- align: center ;
line- height: 380px ;
}
.imgtag{
position: absolute ;
top: 130px ;
left: 10px ;
}
.imgtag .tagname{
float: left ;
width: 100px ;
height: 30px ;
text- align: center ;
line- height: 30px ;
cursor: pointer ;
}
.imgtag .tag1
.imgtag .tag2,
.imgtag .tag3{
position: absolute ;
left: 0 ;
width: 100px ;
}
.imgtag .tag1{
position: absolute ;
left: 0 ;
background- color: #BCC8C3 ;
}
.imgtag .tag1 .imgview{
left: 0 ;
background- color: #BCC8C3 ;
}
.imgtag .tag2{
position: absolute ;
left: 102px ;
background- color: #BFB6B4 ;
}
.imgtag .tag2 .imgview{
display: none ;
}
.imgtag . tag2: hover .imgview{
display: block ;
left: -102px ;
z- index: 80 ;
background- color: #BFB6B4 ;
}
.imgtag .tag3{
position: absolute ;
left: 204px ;
background- color: #CCC8BF ;
}
.imgtag .tag3 .imgview{
display: none ;
}
.imgtag . tag3: hover .imgview{
display: block ;
left: -204px ;
z- index: 80 ;
background- color: #CCC8BF ;
}
content: " . " ;
display: block ;
height: 0 ;
clear: both ;
visibility: hidden ;
}
CSS图片浏览效果
< div class= " imgtag " >
< div class= " tag1 " >
< div class= " tagname " >分类一 div >
< div class= " imgview " >
< div class= " imgview-bgtext " >PhotoView div >
< div class= " imgview-rep " >PhotoView div >
Photogallery
01/>
/>
/>
/>
/>
/>
/>
/>
/>
div >
div >
< div class= " tag2 " >
< div class= " tagname " >分类二 div >
< div class= " imgview " >
< div class= " imgview-bgtext " >PhotoView div >
< div class= " imgview-rep " >PhotoView div >
Photogallery
02/>
/>
/>
/>
/>
/>
/>
/>
/>
div >
div >
< div class= " tag3 " >
< div class= " tagname " >分类三 div >
< div class= " imgview " >
< div class= " imgview-bgtext " >PhotoView div >
< div class= " imgview-rep " >PhotoView div >
Photogallery
03/>
/>
/>
/>
/>
/>
/>
/>
/>
div >
div >
div >