码云链接：https://gitee.com/LYH1012/codes/2riyxkjeaq583z09lwsuv63
原网页：
模仿网页：
<!DOCTYPE html> <html lang="en"> <head class="ui semantic"> <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>包图网_专注原创商用设计图片下载，免费设计素材模板独家图库</title> <meta name="keywords" content="包图网，设计素材，设计模板，设计图片，图片素材，图库，素材库" /> <meta name="description" content="包图网汇集了各种流行趋势，视觉冲击力强的原创广告图片设计、电商淘宝、企业办公模板素材， 由顶尖的设计师供稿，符合各个行业的商用需求，下载高品质正版素材就到包图网。" /> <style> .topheader>a { padding-right: 15px; color: rgb(41, 39, 39); background-color: #fff; /* font-family: courier;*/ font-weight: bold; } a:link { text-decoration: none; } /*正常情况下无下划线*/ a:visited { text-decoration: none; } /*访问过的链接无下划线*/ a:hover { text-decoration: underline;color:rgb(233, 139, 16) } /*鼠标指向时显示下划线*/ a:active { text-decoration: underline; } /*鼠标按下时也显示*/ .bri { display: inline-block; right: 10px; width: 100px; height: 30px; color: rgb(233, 139, 16); background: rgb(243, 245, 247); line-height: 20px; font-size: 20px; text-align: center; overflow: hidden; margin-left: 19px; margin-right: 2px; } .show_div{ width: 1000px; height: 360px; margin: 0 auto; border: 2px solid block; overflow: hidden; } .scroll_div{ width: 5000px; height: 400px; } .scroll_div img{ width: 1000px; height: 360px; float: left; } </style> </head> <body> <div class="ui centered aligned grid container "> <div class="row"> <div align="center"> <img class="ui image" src="https://js.ibaotu.com/revision/img/logo.png" alt=""> </div> </div <!-- top link start --> <div class="ui right aligned topheader fluid container" align="center"> <a style="underline:none;"href="https://ibaotu.com/">首页</a> <a href="https://ibaotu.com/guanggao/">广告设计</a> <a href="https://ibaotu.com/sy/">摄影图</a> <a href="https://ibaotu.com/Font.html">字体</a> <a href="https://ibaotu.com/ui/">UI设计</a> <a href="https://ibaotu.com/taobao/">电商淘宝</a> <a href="https://ibaotu.com/media/">多媒体</a> <a href="https://ibaotu.com/officeDocs.html">办公室文档</a> <a href="https://ibaotu.com/zhuangxiu/">装饰.模型</a> <a href="https://ibaotu.com/chahua/">插画配图</a> <a href="#">...</a> <a></a> <a></a> <div href="#" class="bri" style1="background-color: rgba(0, 28, 219, 0.952);text-decoration: none;color:white;padding-right: 0;display:inline-block;width:70px;height:15px;">请登录</div> </div> <!-- top link end --> <br> <div style="text-align:center"> <form class="column" style="width:640px;" method="GET" action="https://ibaotu.com/" name="search"> <div class="ui fluid input action"> <input type="text" name="wd" placeholder="搜索素材..." style="font-size:15px;margin-left: 20px;height:30px;width:300px;margin-top:8px; border:1px solid ;color:rgb(198, 203, 209)"> <button style="font-size: 20px;"class="medium ui blue button" onclick="document.forms['search'].submit();">搜索</button> </div> </form> </div> </div> </body> <body> <div class="show_div"> <div class="scroll_div"> <br> <br> <img src="https://pic.ibaotu.com/banner/20190325/5c98332688e17.jpg!fqc1390" alt=""/> <img src="https://pic.ibaotu.com/banner/20190325/5c98334a85d30.jpg!fqc1390" alt=""/> <img src="https://pic.ibaotu.com/banner/20190325/5c9832fa12779.jpg!fqc1390" alt=""/> <img src="https://pic.ibaotu.com/banner/20190318/5c8f74826f387.jpg!fqc1390" alt=""/> <img src="https://pic.ibaotu.com/banner/20190315/5c8b68d2b412a.jpg!fqc1390" alt=""/> <img src="https://pic.ibaotu.com/banner/20190325/5c987e273c998.jpg!fqc1390" alt=""/> </div> </div> </body> <script type="text/javascript"> var scrollDiv = document.getElementsByClassName("scroll_div")[0]; // 定义初始值 var left =0; // 定义一个定时器 走一步 function move(){ var timer = setInterval(function(){ left --; if (left <= -1600) { left = 0; } if (left % -400 == 0) { clearInterval(timer); timer = null; } scrollDiv.style.marginLeft = left + "px"; },50); } // 定义一个定时器 每隔固定时间 走一张 setInterval(function(){ move(); },5000); </script> <br> <br> <body> <div class="row;" style="text-aglign:center"> <table border="0" cellpadding="3" cellspacing="20" style="width: 60%;margin:auto"> <tr > <td ><center><img src="https://pic.ibaotu.com/homeSp/20190325/5c9833ae06a4c.jpg"style="width:230px;height:180px;" /></td> <td><center><img src="https://pic.ibaotu.com/homeSp/20190325/5c9833b0e097e.jpg"style="width:230px;height:180px;"/></td> <td><center><img src="https://pic.ibaotu.com/homeSp/20190325/5c9833b4f0e05.jpg"style="width:230px;height:180px;"/></td> <td><center><img src="https://pic.ibaotu.com/homeSp/20190325/5c9833b864fd8.jpg" style="width:230px;height:180px;"/></td> </tr> </table> <div style="text-align:center"<font color="silver">> <a href=<a href="https://ibaotu.com/chahua/">点击查看更多.....</a> </div> </div> <br> <br> <div style="text-align:center"> <strong><p> <font size="6" face="verdana" color="orange">广告设计</font></p></strong> <p> <font size="3" face="arial" color="black">-----ADVERTISING-----</font></p> </div> <div class="row;" style="text-aglign:center"> <table border="0" cellpadding="3" cellspacing="20" style="width: 60%;margin:auto"> <tr > <td ><center><img src="https://pic.ibaotu.com/01/34/43/84r888piCPeu.jpg-0.jpg!ww700"style="width:210px;height:270px;" /></td> <td><center><img src="https://pic.ibaotu.com/01/38/15/50P888piCXEN.jpg-0.jpg!ww700"style="width:210px;height:270px;"/></td> <td><center><img src="https://pic.ibaotu.com/01/36/50/36P888piCGby.jpg-0.jpg!ww700"style="width:210px;height:270px;"/></td> <td><center><img src="https://pic.ibaotu.com/01/37/06/38i888piCV7B.jpg-0.jpg!ww700" style="width:210px;height:270px;"/></td> </tr> <tr> <td ><center><img src="https://pic.ibaotu.com/01/37/89/84v888piCsCZ.jpg-0.jpg!ww700"style="width:210px;height:270px;" /></td> <td><center><img src="https://pic.ibaotu.com/01/34/99/62g888piCZwa.jpg-0.jpg!ww700"style="width:210px;height:270px;"/></td> <td><center><img src="https://pic.ibaotu.com/01/38/66/61K888piCktV.jpg-0.jpg!ww700"style="width:210px;height:270px;"/></td> <td><center><img src="https://pic.ibaotu.com/01/37/06/38i888piCV7B.jpg-0.jpg!ww700" style="width:210px;height:270px;"/></td> </tr> </table> </div> <div style="text-align:center"<font color="silver">> <a href=<a href="https://ibaotu.com/guanggao/">点击查看更多.....</a> </div> </body> </html>
557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
