CSS+html实现的非常漂亮和实用的相册_建站学-个人建站指南,网页制作,网站设计,网站制作教程

纯CSS和HTML代码实现的简易相册效果，非常漂亮和实用，下面是具体代码，代码中的图片建站学没有上传，大家测试的时候可以自己更改一下地址即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-type" content="text/html; 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.jzxue.com/img/tab1.jpg" alt="" title="" /></a></li>
                <li><a href="#image2" id="tab2"><img src="http://www.jzxue.com/img/tab2.jpg" alt="" title="" /></a></li>
                <li><a href="#image3" id="tab3"><img src="http://www.jzxue.com/img/tab3.jpg" alt="" title="" /></a></li>
                <li><a href="#image4" id="tab4"><img src="http://www.jzxue.com/img/tab4.jpg" alt="" title="" /></a></li>
            </ul>
            <div id="images">
                <div><a name="image1"></a><img src="http://www.jzxue.com/img/image1.jpg" alt="" title="" /></div>

</html>

(责任编辑：admin)

搜索

热门标签:

CSS+html实现的非常漂亮和实用的相册