• 当前标签:电子相册

程序开发 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){

2017-03-07 19:42:15 20 2 0
阅读详情
  • 1
前往