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

zoukankan html css js c++ java

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

代码简介：

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

代码内容：

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个简单漂亮的CSS相册代码 - www.webdm.cn</title>
<script src="http://www.webdm.cn/images/20091005/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-780254-3";
urchinTracker();
</script>
<style type="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;
857px;
height:auto;
min-height:440px;
}
    .imgview a{
    text-decoration:none;
    }
    .imgview h2{
    position:absolute;
    top:10px;
    left:10px;
    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;
    290px;
    height:auto;
    min-height:230px;
    background-color:#FFFFFF;
    }
    .imgview ul li{
    float:left;
    82px;
    height:59px;
    margin:8px 6px 7px;
    border:1px solid #DEDEDE;
    }
    .imgview ul li strong{
    display:none;
    }
    .imgview ul li a:hover{
    display:block;
    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;
            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;
            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;
            537px;
            height:380px;
            }
    .imgview ul li img{
    80px;
    height:57px;
    }
    .imgview .imgview-rep{
    position:absolute;
    top:287px;
    left:10px;
    z-index:10;
    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;
    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;
    100px;
    height:30px;
    text-align:center;
    line-height:30px;
    cursor:pointer;
    }
    .imgtag .tag1
    .imgtag .tag2,
    .imgtag .tag3{
    position:absolute;
    left:0;
    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>
<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>
            <h2>Photogallery 01</h2>
            <ul>
                <li title="photo1"><a href="#"><strong>Photo01 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo01.gif" alt="photo1"

/></span></a></li>
                <li title="photo2"><a href="#"><strong>Photo02 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo02.gif" alt="photo2"

/></span></a></li>
                <li title="photo3"><a href="#"><strong>Photo03 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo03.gif" alt="photo3"

/></span></a></li>
                <li title="photo4"><a href="#"><strong>Photo04 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo04.gif" alt="photo4"

/></span></a></li>
                <li title="photo5"><a href="#"><strong>Photo05 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo05.gif" alt="photo5"

/></span></a></li>
                <li title="photo6"><a href="#"><strong>Photo06 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo06.gif" alt="photo6"

/></span></a></li>
                <li title="photo7"><a href="#"><strong>Photo07 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo07.gif" alt="photo7"

/></span></a></li>
                <li title="photo8"><a href="#"><strong>Photo08 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo08.gif" alt="photo8"

/></span></a></li>
                <li title="photo9"><a href="#"><strong>Photo09 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo09.gif" alt="photo9"

/></span></a></li>
            </ul>
        </div>
    
    </div>
    <div class="tag2">
    
    <div class="tagname">分类二</div>
        <div class="imgview">
            <div class="imgview-bgtext">PhotoView</div>
            <div class="imgview-rep">PhotoView</div>
            <h2>Photogallery 02</h2>
            <ul>
                <li title="photo3"><a href="#"><strong>Photo03 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo03.gif" alt="photo3"

/></span></a></li>
                <li title="photo2"><a href="#"><strong>Photo02 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo02.gif" alt="photo2"

/></span></a></li>
                <li title="photo5"><a href="#"><strong>Photo05 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo05.gif" alt="photo5"

/></span></a></li>
                <li title="photo6"><a href="#"><strong>Photo06 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo06.gif" alt="photo6"

/></span></a></li>
                <li title="photo7"><a href="#"><strong>Photo07 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo07.gif" alt="photo7"

/></span></a></li>
                <li title="photo1"><a href="#"><strong>Photo01 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo01.gif" alt="photo1"

/></span></a></li>
                <li title="photo8"><a href="#"><strong>Photo08 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo08.gif" alt="photo8"

/></span></a></li>
                <li title="photo4"><a href="#"><strong>Photo04 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo04.gif" alt="photo4"

/></span></a></li>
                <li title="photo9"><a href="#"><strong>Photo09 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo09.gif" alt="photo9"

/></span></a></li>
            </ul>
        </div>
    
    </div>
    <div class="tag3">
    
    <div class="tagname">分类三</div>
        <div class="imgview">
            <div class="imgview-bgtext">PhotoView</div>
            <div class="imgview-rep">PhotoView</div>
            <h2>Photogallery 03</h2>
            <ul>
                <li title="photo2"><a href="#"><strong>Photo02 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo02.gif" alt="photo2"

/></span></a></li>
                <li title="photo4"><a href="#"><strong>Photo04 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo04.gif" alt="photo4"

/></span></a></li>
                <li title="photo5"><a href="#"><strong>Photo05 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo05.gif" alt="photo5"

/></span></a></li>
                <li title="photo3"><a href="#"><strong>Photo03 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo03.gif" alt="photo3"

/></span></a></li>
                <li title="photo1"><a href="#"><strong>Photo01 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo01.gif" alt="photo1"

/></span></a></li>
                <li title="photo8"><a href="#"><strong>Photo08 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo08.gif" alt="photo8"

/></span></a></li>
                <li title="photo6"><a href="#"><strong>Photo06 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo06.gif" alt="photo6"

/></span></a></li>
                <li title="photo7"><a href="#"><strong>Photo07 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo07.gif" alt="photo7"

/></span></a></li>
                <li title="photo9"><a href="#"><strong>Photo09 Name</strong><span><img src="http://www.webdm.cn/images/20091005/photo09.gif" alt="photo9"

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

查看全文

相关阅读:
sql server中的 SET NOCOUNT ON 的含义
 SQL Server 中的嵌套事务与@@TranCount（转）
数据库中的主键与外键的关系，通俗易懂
 模板制作
 DELPHI中MDI子窗口的关闭和打开
 Entity Framework 基础
 WPF使用HierarchicalDataTemplate绑定Dictionary生成TreeView
WPF新手之如何将数据绑定到TreeView
WPF数据验证（5）―― 错误模板
 WPF DataGrid 获取选中一行或者多行

原文地址：https://www.cnblogs.com/webdm/p/2154073.html