一个简单漂亮的CSS相册代码

顺晟科技

2022-09-13 13:40:21

238

代码简介：

用CSS制作一个ImageView，类似一个相册浏览的功能，重点研究一下层与布局。

代码内容：

View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh-cn"lang="zh-cn">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>一个简单漂亮的CSS相册代码-www.webdm.cn</title>
<scriptsrc="http://www.webdm.cn/images/20091005/urchin.js"type="text/javascript"></script>
<scripttype="text/javascript">
_uacct="UA-780254-3";
urchinTracker();
</script>
<styletype="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;
}
.imgviewa{
text-decoration:none;
}
.imgviewh2{
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;
}
.imgviewul{
position:absolute;
top:48px;
left:10px;
z-index:90;
width:290px;
height:auto;
min-height:230px;
background-color:#FFFFFF;
}
.imgviewulli{
float:left;
width:82px;
height:59px;
margin:8px6px7px;
border:1pxsolid#DEDEDE;
}
.imgviewullistrong{
display:none;
}
.imgviewullia:hover{
display:block;
width:100%;
height:100%;
}
.imgviewullia:focusstrong,
.imgviewullia:activestrong{
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;
}
.imgviewullia:hoverspanimg{
position:absolute;
top:240px;
left:1px;
width:200px;
height:140px;
}
.imgviewullia:activespanimg,
.imgviewullia:focusspanimg{
position:absolute;
top:-38px;
left:300px;
z-index:90;
width:537px;
height:380px;
}
.imgviewulliimg{
width:80px;
height:57px;
}
.imgview.imgview-rep{
position:absolute;
top:287px;
left:10px;
z-index:10;
width:201px;
height:140px;
border:1pxsolid#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:1pxsolid#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;
}
</style>
</head>
<body>
<p>CSS图片浏览效果</p>
<divclass="imgtag">
<divclass="tag1">

<divclass="tagname">分类一</div>
<divclass="imgview">
<divclass="imgview-bgtext">PhotoView</div>
<divclass="imgview-rep">PhotoView</div>
<h2>Photogallery01</h2>
<ul>
<lititle="photo1"><ahref="#"><strong>Photo01Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo01.gif"alt="photo1"

/></span></a></li>
<lititle="photo2"><ahref="#"><strong>Photo02Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo02.gif"alt="photo2"

/></span></a></li>
<lititle="photo3"><ahref="#"><strong>Photo03Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo03.gif"alt="photo3"

/></span></a></li>
<lititle="photo4"><ahref="#"><strong>Photo04Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo04.gif"alt="photo4"

/></span></a></li>
<lititle="photo5"><ahref="#"><strong>Photo05Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo05.gif"alt="photo5"

/></span></a></li>
<lititle="photo6"><ahref="#"><strong>Photo06Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo06.gif"alt="photo6"

/></span></a></li>
<lititle="photo7"><ahref="#"><strong>Photo07Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo07.gif"alt="photo7"

/></span></a></li>
<lititle="photo8"><ahref="#"><strong>Photo08Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo08.gif"alt="photo8"

/></span></a></li>
<lititle="photo9"><ahref="#"><strong>Photo09Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo09.gif"alt="photo9"

/></span></a></li>
</ul>
</div>

</div>
<divclass="tag2">

<divclass="tagname">分类二</div>
<divclass="imgview">
<divclass="imgview-bgtext">PhotoView</div>
<divclass="imgview-rep">PhotoView</div>
<h2>Photogallery02</h2>
<ul>
<lititle="photo3"><ahref="#"><strong>Photo03Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo03.gif"alt="photo3"

/></span></a></li>
<lititle="photo2"><ahref="#"><strong>Photo02Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo02.gif"alt="photo2"

/></span></a></li>
<lititle="photo5"><ahref="#"><strong>Photo05Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo05.gif"alt="photo5"

/></span></a></li>
<lititle="photo6"><ahref="#"><strong>Photo06Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo06.gif"alt="photo6"

/></span></a></li>
<lititle="photo7"><ahref="#"><strong>Photo07Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo07.gif"alt="photo7"

/></span></a></li>
<lititle="photo1"><ahref="#"><strong>Photo01Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo01.gif"alt="photo1"

/></span></a></li>
<lititle="photo8"><ahref="#"><strong>Photo08Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo08.gif"alt="photo8"

/></span></a></li>
<lititle="photo4"><ahref="#"><strong>Photo04Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo04.gif"alt="photo4"

/></span></a></li>
<lititle="photo9"><ahref="#"><strong>Photo09Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo09.gif"alt="photo9"

/></span></a></li>
</ul>
</div>

</div>
<divclass="tag3">

<divclass="tagname">分类三</div>
<divclass="imgview">
<divclass="imgview-bgtext">PhotoView</div>
<divclass="imgview-rep">PhotoView</div>
<h2>Photogallery03</h2>
<ul>
<lititle="photo2"><ahref="#"><strong>Photo02Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo02.gif"alt="photo2"

/></span></a></li>
<lititle="photo4"><ahref="#"><strong>Photo04Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo04.gif"alt="photo4"

/></span></a></li>
<lititle="photo5"><ahref="#"><strong>Photo05Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo05.gif"alt="photo5"

/></span></a></li>
<lititle="photo3"><ahref="#"><strong>Photo03Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo03.gif"alt="photo3"

/></span></a></li>
<lititle="photo1"><ahref="#"><strong>Photo01Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo01.gif"alt="photo1"

/></span></a></li>
<lititle="photo8"><ahref="#"><strong>Photo08Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo08.gif"alt="photo8"

/></span></a></li>
<lititle="photo6"><ahref="#"><strong>Photo06Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo06.gif"alt="photo6"

/></span></a></li>
<lititle="photo7"><ahref="#"><strong>Photo07Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo07.gif"alt="photo7"

/></span></a></li>
<lititle="photo9"><ahref="#"><strong>Photo09Name</strong><span><imgsrc="http://www.webdm.cn/images/20091005/photo09.gif"alt="photo9"

/></span></a></li>
</ul>
</div>

</div>
</div>
</body>
</html>
<br/>
<p><ahref="http://www.webdm.cn">网页代码站</a>-最专业的网页代码下载网站-致力为中国站长提供有质量的网页代码！</p>
代码来自：http://www.webdm.cn/webcode/bc5efb7a-3e3c-48ba-a8e3-a212d5687a9f.html

上一篇：简单的html+css页面制作下一篇：硬石系列:用CSS实现垂直居中的五种

网站建设

Css

一个简单漂亮的CSS相册代码