H5学习之制作简易电子相册

效果图如下：
代码如下：
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>简易相册</title>
        <style>
            body{
                background-color:#E5E5E5;
            }
            div{
                width: 100px;
                height: 100px;
                border: solid 5px #EE9A00;
            }
            /*div:nth-child(1){
                background-image: url(image/thumbs/0.jpg);
                position:absolute;
                top:50px;
                left:200px;
                transform: rotate(15deg);
            }*/
            #div1{
                background-image: url(image/thumbs/0.jpg);
                position:absolute;
                top:50px;
                left:200px;
                transform: rotate(15deg);
            }
            div:nth-child(2){
                background-image: url(image/thumbs/1.jpg);
                position:absolute;
                top:50px;
                left:500px;
                transform: rotate(20deg);
            }
            div:nth-child(3){
                background-image: url(image/thumbs/2.jpg);
                position:absolute;
                top:50px;
                left:800px;
                transform: rotate(-20deg);
            }
            div:nth-child(4){
                background-image: url(image/thumbs/3.jpg);
                position:absolute;
                top:50px;
                left:1100px;
                transform: rotate(-20deg);
            }
            div:nth-child(5){
                background-image: url(image/thumbs/4.jpg);
                position:absolute;
                top:250px;
                left:200px;
                transform: rotate(15deg);
            }
            div:nth-child(6){
                background-image: url(image/thumbs/5.jpg);
                position:absolute;
                top:250px;
                left:500px;
                transform: rotate(20deg);
            }
            div:nth-child(7){
                background-image: url(image/thumbs/6.jpg);
                position:absolute;
                top:250px;
                left:800px;
                transform: rotate(-20deg);
            }
            div:nth-child(8){
                background-image: url(image/thumbs/7.jpg);
                position:absolute;
                top:250px;
                left:1100px;
                transform: rotate(-20deg);
            }
            div:nth-child(9){
                background-image: url(image/thumbs/8.jpg);
                position:absolute;
                top:450px;
                left:200px;
                transform: rotate(15deg);
            }
            div:nth-child(10){
                background-image: url(image/thumbs/9.jpg);
                position:absolute;
                top:450px;
                left:500px;
                transform: rotate(20deg);
            }
            div:nth-child(11){
                background-image: url(image/thumbs/10.jpg);
                position:absolute;
                top:450px;
                left:800px;
                transform: rotate(-20deg);
            }
            div:nth-child(12){
                background-image: url(image/thumbs/11.jpg);
                position:absolute;
                top:450px;
                left:1100px;
                transform: rotate(-20deg);
            }
            div:nth-child(13){
                background-image: url(image/thumbs/12.jpg);
                position:absolute;
                top:630px;
                left:200px;
                transform: rotate(15deg);
            }
            div:nth-child(14){
                background-image: url(image/thumbs/13.jpg);
                position:absolute;
                top:630px;
                left:500px;
                transform: rotate(20deg);
            }
            div:nth-child(15){
                background-image: url(image/thumbs/14.jpg);
                position:absolute;
                top:630px;
                left:800px;
                transform: rotate(-20deg);
            }
            div:nth-child(16){
                background-image: url(image/thumbs/15.jpg);
                position:absolute;
                top:630px;
                left:1100px;
                transform: rotate(-20deg);
            }
            div:nth-child(n):hover{
                transform:scale(1.5);
                transition:transform 1s ease-in-out;
            }
            a{
                color: white;
            }
            a:link {
                 text-decoration: none;
            }
            a:hover {
                 text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div id="div1"><a href="https://www.baidu.com" target="_blank">百度一下</a></div>
        <div><a href="https://www.so.com" target="_blank">360搜索</a></div>
        <div><a href="https://www.google.com.hk" target="_blank">Google</a></div>
        <div><a href="https://cn.bing.com" target="_blak">必应搜索</a></div>
        <div><a href="https://www.2345.com/?k323xin" target="_blank">2345导航</a></div>
        <div><a href="http://www.hao123.com" target="_blank">hao123导航</a></div>
        <div><a href="https://hao.360.cn/" target="_blank">360导航</a></div>
        <div><a href="http://www.uc123.com/" target="_blank">UC导航</a></div>
        <div><a href="#">广告位出售</a></div>
        <div><a href="#">广告位出售</a></div>
        <div><a href="#">广告位出售</a></div>
        <div><a href="#">广告位出售</a></div>
        <div><a href="#">广告位出售</a></div>
        <div><a href="#">广告位出售</a></div>
        <div><a href="#">广告位出售</a></div>
        <div><a href="#">广告位出售</a></div>
    </body>
</html>
所需素材：thumbs.tar