模仿网页

 

码云链接:https://gitee.com/LYH1012/codes/2riyxkjeaq583z09lwsuv63

原网页:

模仿网页_第1张图片

 

模仿网页_第2张图片

 

模仿网页_第3张图片

 

模仿网页:

模仿网页_第4张图片

模仿网页_第5张图片

模仿网页_第6张图片

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>

 

你可能感兴趣的:(模仿网页)