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

评论

  1. Windows Chrome 56.0.2924.87
    7年前
    2017-3-09 19:39:09

    html5up那里有好几个相册模板,挺好的

    • 黄良钵
      博主
      Hsiaohui
      Linux Chrome 55.0.2883.87
      7年前
      2017-3-09 19:41:36

      我这个是培训的时候跟老师做的,都是些简单的东西 🙂

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇