页面显示:
HTML代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Phase Box</title> <link rel="stylesheet" href="style.css"> </head>
<body> <div id="box"> <img id="img1" src="image/4.jpeg" alt=""> <img id="img2" src="image/2.jpg" alt=""> <img id="img3" src="image/7.jpg" alt=""> <img id="img4" src="image/1.jpg" alt=""> <img id="img5" src="image/6.jpg" alt=""> <img id="img6" src="image/8.jpg" alt=""> <img id="img7" src="image/3.jpeg" alt=""> <img id="img8" src="image/5.jpg" alt=""> <img id="img9" src="image/9.jpg" alt=""> <img id="img10" src="image/10.jpg" alt=""> </div> <div id="Img"> </div> <p class="top">点击图片可单独看那张图喔!</p> <script src="jquery-3.3.1.min.js"></script> <script src="script.js"></script> </body> </html> |
CSS代码:
@charset "utf-8"; /* CSS Document */ *{ padding: 0; margin: 0;} .top{ position: relative; width: 100%; color: #fff; font-size: 30px; text-align: center; } img{ width: 300px; height: 300px; cursor:pointer; } body,html{ height:100%; } /* 背景图片在这里设置 */ body{ background-image: url(image/11.jpeg); background-size: 100% 100%; } #box{ width: 22%; |