<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #a{ width: 1010px; height: 800px; background-color: #EEEFF0; margin: 0 auto; position: relative; } #line{ background-image: url("../img/f1_line.png"); width: 1px; height: 658px; position: absolute; left: 50%; } #dot1,#dot2,#dot3,#dot4,#dot5,#dot6{ background-image: url("../img/f1_dot.png"); position: absolute; width: 18px; height: 18px; } #dot1{ top: 40px; left: -9px; } #dot2{ top: 80px; left: -9px; } #dot3{ top: 297px; left: -9px; } #dot4{ top: 340px; left: -9px; } #dot5{ top: 568px; left: -9px; } #dot6{ top: 610px; left: -9px; } #a1{ width: 480px; height: 167px; background-image: url("../img/f1_2015.png"); position: absolute; top: 65px; left: 514px; /*opacity: 0;*/ } #a2{ width: 480px; height: 167px; background-image: url("../img/f1_2016.png"); position: absolute; top: 25px; left: 20px; /*opacity: 0;*/ } #a3{ width: 480px; height: 167px; background-image: url("../img/f1_2013.png"); position: absolute; top: 325px; left: 514px; /*opacity: 0;*/ } #a4{ width: 480px; height: 167px; background-image: url("../img/f1_2014.png"); position: absolute; top: 283px; left: 20px; /* opacity: 0;*/ } #a5{ width: 480px; height: 167px; background-image: url("../img/f1_2011.png"); position: absolute; top: 595px; left: 514px; } #a6{ width: 480px; height: 167px; background-image: url("../img/f1_2012.png"); position: absolute; top: 553px; left: 20px; } </style> <title></title> </head> <body> <div id="a"> <div id="line"> <div id="dot1"></div> <div id="dot2"></div> <div id="dot3"></div> <div id="dot4"></div> <div id="dot5"></div> <div id="dot6"></div> </div> <div id="a1"></div> <div id="a2"></div> <div id="a3"></div> <div id="a4"></div> <div id="a5"></div> <div id="a6"></div> </div> </body></html>
position练习
最新推荐文章于 2022-09-19 18:19:14 发布