1 · 大雜燴 · 看云

``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./css/1.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> </head> <body> <div class="content"> <div class="logo"> <img src="./images/1.jpg" alt=""> <div class="nav" id="nav"> <ul> <li><a class="aa">公司簡介</a></li> <li><a class="aa">人才培訓</a></li> <li><a class="aa">技能清單</a></li> <li><a class="aa">商品日用</a></li> <li><a class="aa">關于我們</a></li> </ul> </div> </div> <div class="wrapper"> <div class="item1"> <img src="images/01.jpg" alt="" class="banner" id="img1"> <div id="imgg"></div> <p>技能清單</p> </div> <div class="item2">關于我們</div> <div class="item3"> <img src="images/02.jpg" alt="" class="banner" id="img2"> <div id="imggg"></div> <p>技能清單</p> </div> <div class="item4">關于我們</div> <div class="item5"> <img src="images/03.jpg" alt="" class="banner" id="img3"> <div id="imgggg"></div> <p>技能清單</p> </div> <div class="item6">關于我們</div> </div> </div> <script> $(document).ready(function () { $("#img1").click(function () { $("#imgg").animate({ left: '73px', top: '61px', height: '400px', width: '900px' }); }); $("#img2").click(function () { $("#imggg").animate({ right: '73px', top: '61px', height: '400px', width: '900px' }); }); $("#img3").click(function () { $("#imgggg").animate({ left:'73px', right: '0', top:'61', height: '400px', width: '900px' }); }); $("#imgg").click(function () { $("#imgg").animate({ right: '0', bottom: '0', height: '0', width: '0' }); }); $("#imggg").click(function () { $("#imggg").animate({ right: '73px', bottom: '0', height: '0', width: '0' }); }); $("#imgggg").click(function () { $("#imgggg").animate({ right:'73px', left: '520px', top: '350px', height: '0', width: '0' }); }); }); </script> </body> </html> ``` ``` *{ margin: 0; padding: 0; } .content{ width: 900px; margin-left: auto; margin-right: auto; border: 1px solid #333; } .logo{ width: 100%; height: 60px; display: flex; align-items: center; } .logo img{ width: 50px; height: 50px; margin-left: 20px; } .nav{ width: 500px; height: 60px; margin-left: 300px; } .nav ul{ list-style: none; overflow: hidden; } .nav li{ float: left; margin-right: 30px; } .aa{ line-height: 60px; color: #333; } .aa:hover{ text-decoration: none; } .fixed{ position: fixed; width: 100%; } .fixed a{ color: #ffffff !important; } .wrapper { display: grid; grid-template-columns: 300px 300px 300px; grid-template-rows: 200px 200px; } .wrapper>div { border: 1px solid #333; margin-top: -1px; margin-left: -1px; display: flex; justify-content: center; align-items: center; } .item3,.item6{ margin-right: -1px; } .item4,.item5,.item6{ margin-bottom: -1px; } .item1,.item3,.item5{ display: flex; flex-direction: column; } .banner{ width: 50%; } .modal-body { display: flex; justify-content: center; } .modal-body img{ width: 100%; } #imgg{ background: url("../images/01.jpg"); height: 0; width: 0; position: absolute; } #imggg{ background: url("../images/02.jpg"); height: 0; width: 0; position: absolute; float: right; } #imgggg{ background: url("../images/03.jpg"); height: 0; width: 0; position: absolute; top: 350px; left: 520px; } ```