码云链接：https://gitee.com/LYH1012/codes/2riyxkjeaq583z09lwsuv63
原网页：
模仿网页：
DOCTYPE html>
<html lang="en">
<head class="ui semantic">
<meta charset="UTF-8">
<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
<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"="silver">>
<a href=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"="silver">>
<a href=href="https://ibaotu.com/guanggao/">点击查看更多.....a>
div>
body>
html>