纯HTML+CSS实现的简易相册

这个相册初看上去给人的感觉是很简陋,好像想没什么技术含量。如果您仔细看了页面的源文件后就会发现它的精妙之处了。通常我们做相册应用一般都会借助Javascript来完成其中的交互,然而这个简易相册仅使用了HTML/CSS 技术。
效果可以看这里:
http://www.ctrly.cn/ 
我下面就简单给大家说说它的实现原理。
在这个相册中主要使用了HTML中的“描点”, “描点”的作用大家都知道,单击描点可以定位到页面中某个指定位置。在这个简易相册中给每个大图分别定义了一个“描点”,左边缩略图链接指向与它的大图对应的描点位置。 放置大图描点的容器大小只可以容纳一个大图,并且在CSS中使用了overfolw:hidden  隐藏了其他大图。 如我们前面所说的,单击指向描点位置的链接时,浏览器会把窗口中的可视区域定位到描点位置。于是隐藏大图就被显示出来了,一个简易的相册就这么出来了。
下面是提取出来的代码 :
<!DOCTYPE html>

<html>

<head>

<meta charset=gb2312" />

<title>HTML—CSS 简易相册</title>

<style type="text/css" media="screen">

/* CSS Reset */

    * {

        margin: 0;

        padding: 0;

        border: 0;

        outline: 0;

    }



    body {

        font-family: Arial, "MS Trebuchet", sans-serif;

        color:#888;

    }



    a{

        text-decoration:none;

        color:#8ac;

    }

    

/* Setup Tabs */

    

    ul{

        background:#000;

        width:125px; /* Width of Tab Image */

        float: left;

        list-style: none;

        border-right:8px solid black;

    }

    

    ul li{

        height:75px; /* Height of Tab Image */

    }

    

/* Setup Tab so normal opacity is 40 and rollover is 100 */

    ul li a img{

        /* for IE */

        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";

        filter:alpha(opacity=40);

      

        /* CSS3 standard */

        opacity:0.4;

      

    }

    ul li a:hover img{

          

        /* for IE */

        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

        filter:alpha(opacity=100);

        

        /* CSS3 standard */

        opacity:1.0;

    }



    

    #images{

        width:500px; 

        height:300px; 

        overflow:hidden;

        float:left;

    }

    #wrapper{

        width:633px;

        height:300px;

        border:8px solid black;

        margin:0px auto;

    }

    #credits{

        width:633px;

        margin: 0 auto;

        text-align: right;

    }

    p{

        margin-top:10px;

        font-size:9pt;

    }

    h1#header{

        width:633px;

        margin:15px auto 5px;

        font-size:14pt;color:#f00;

    }

    .foot{

        width:633px;background:#111;font-size:12px;

        margin:2px auto;border-top:1px solid #000;

    }



</style>

</head>

    <body>

        

        <h1 id="header">单击左边的小图看效果</h1>

        <div id="wrapper">

            <ul>

                <li><a href="#image1" id="tab1"><img src="http://www.ctrly.cn/img/tab1.jpg" alt="" title="" /></a></li>

                <li><a href="#image2" id="tab2"><img src="http://www.ctrly.cn/img/tab2.jpg" alt="" title="" /></a></li>

                <li><a href="#image3" id="tab3"><img src="http://www.ctrly.cn/img/tab3.jpg" alt="" title="" /></a></li>

                <li><a href="#image4" id="tab4"><img src="http://www.ctrly.cn/img/tab4.jpg" alt="" title="" /></a></li>

            </ul>

            <div id="images">

                <div><a name="image1"></a><img src="http://www.ctrly.cn/img/image1.jpg" alt="" title="" /></div>



                <div><a name="image2"></a><img src="http://www.ctrly.cn/img/image2.jpg" alt="" title="" /></div>

                <div><a name="image3"></a><img src="http://www.ctrly.cn/img/image3.jpg" alt="" title="" /></div>

                <div><a name="image4"></a><img src="http://www.ctrly.cn/img/image4.jpg" alt="" title="" /></div>

            </div>

        </div>

    </body>



</html>

 

你可能感兴趣的:(html)