仿照小米官网的静态首页(document.getElementById()获取值为null)

r囧r小猫 2022-09-12 05:40 263阅读 0赞

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>小米商域-小米11 ULtra、RedmiK40 Pro、MIX FOLD,小米电视...</title>
        <link rel="shortcut icon" href="../images/favicon.ico" />
        <link type="text/css" rel="stylesheet" href="../css/style.css" />
        <script style="text/javascript" src="../js/index.js" defer="defer"></script>
      </head>
      <body>
        <div class="site-topbar">
          <div class="container">
            <a href="">小米商域</a> <a href="">MINU</a> <a href="">Iot</a>
            <a href="">云服务</a> <a href="">天星数科/a> <a href="">有品</a>
            <a href="">小爱开发平台</a> <a href="">企业团购</a> <a href="">资质证照</a>
            <a href="">协议规则</a> <a href="">下载app</a> <a href="">智能生活</a> <a href="">Select Location</a>
                            
                            
                            
                            
                            
            <a href="">登录</a>     <a href="">注册</a>     <a href="">消息通知</a>
              <a href="" class="shopping_cart"><img src="../images/cart.png" alt="">购物车 (0)</a> 
          </div>
          <div class="site-header">
            <div class="container">
              <div class="head-logo"><img src="../images/logo-mi2.png" alt=""></div>
              <div class="header-nav">
                <ul>
                  <li>小米手机</li>
                  <li>Redmi红米</li>
                  <li>电视</li>
                  <li>笔记本</li>
                  <li>平板</li>
                  <li>家电</li>
                  <li>路由器</li>
                  <li>智能硬件</li>
                  <li>服务</li>
                  <li>社区</li>
                </ul>
              </div>
            </div>   
          </div>
          <div class="home-hero-container container">
            <ul>
              <li>手机</li>
              <li>电视</li>
              <li>笔记本 平板</li>
              <li>家电</li>
              <li>出行 穿戴</li>
              <li>智能 路由器</li>
              <li>电脑 配件</li>
              <li>健康 儿童</li>
              <li>耳机 音箱</li>
            </ul>
          </div>
          <div class="lunbotu"><img src="../images/小米5.webp" alt=""></div>
          <div class="home-hero-sub row">
            <div class="span4"><ul>
              <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" >保障服务</li>
              <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48">企业团购</li>
              <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48">F码通道</li>
              <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48">米粉卡</li>
              <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48">以旧换新</li>
              <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48">话费充值</li>
              
            </ul></div>
    
            <div class="span16">
              <ul class="home-promo-list clearfix">
                <li class="first"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d8a6d6d37904e22c72130e3e4ec79b41.jpg?w=632&h=340" alt=""></li>
                <li class="first"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d8a6d6d37904e22c72130e3e4ec79b41.jpg?w=632&h=340" alt=""></li>
                <li class="first"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d8a6d6d37904e22c72130e3e4ec79b41.jpg?w=632&h=340" alt=""></li>
              </ul>
            </div>
          </div>
    
          <div class="page-main home-main">
            <div class="container">
              <div class="home-banner-box"><a href="#"><img src="../images/k40.webp" alt=""></a></div>
            </div>   
            <div class="home-brick-box home-brick-row-2-box xm-plain-box">
              <div class="box-hd">
                <h2>手机</h2>
                <div class="more">查看更多<img src="../images/morn-icon.png" alt=""></div>
              </div>
              </div> 
           
          </div>
          <div class="shoujizhanshi"><img src="../images/小米折叠屏.webp" alt=""></div>
          <div class="shoujilist"><ul>
            <li><img src="../images/xiaomiMIX4.webp" alt=""><h2>Xiaomi MIX4</h2></li>
            <li><img src="../images/Note 10 PRO.webp" alt=""><h2>Note 10 PRO</h2></li>
            <li><img src="../images/Redmi Note 10.webp" alt=""><h2>Redmi Note 10</h2></li>
            <li><img src="../images/小米MIX FOLD.webp" alt=""><h2>小米MIX FOLD</h2></li>
            <li><img src="../images/小米11 Ulttra.webp" alt=""><h2>小米11 Ulttra</h2></li>
            <li><img src="../images/小米11 Pro.webp" alt=""><h2>小米11 Pro</h2></li>
            <li><img src="../images/小米11青春版.webp" alt=""><h2>小米11青春版</h2></li>
            <li><img src="../images/K40游戏增强版.webp" alt=""><h2>K40游戏增强版</h2></li>
          </ul></div>
        </div>
        <div class="yemiandibu">
          <div class="site-footer">
            <div class="container">
              <div class="footer-service"><ul class="list-service">
                <li><a href="https://www.mi.com/service/quick-repair"><img src="../images/预约维修服务.png" alt="">预约维修服务</a></li>
                <li><a href="https://www.mi.com/service/quick-repair"><img src="../images/7天无理由.png" alt="">7天无理由退货</a></li>
                <li><a href="https://www.mi.com/service/quick-repair"><img src="../images/15天免费换.png" alt="">15天免费换货</a></li>
                <li><a href="https://www.mi.com/service/quick-repair"><img src="../images/礼物-icon.png" alt="">满69包邮</a></li>
                <li><a href="https://www.mi.com/service/quick-repair"><img src="../images/位置-icon.png" alt="">520余家售后网点</a></li> 
              </ul></div>
            </div>
            <div class="fuqin">
              <dl class="col-links col-links-first"><dt>帮助中心</dt>
              <dd>账户管理</dd>
              <dd>购物指南</dd>
              <dd>订单操作</dd></dl>
              <dl class="col-links col-links-first"><dt>服务支持</dt>
                <dd>售房政策</dd>
                <dd>自助服务</dd>
                <dd>相关下载</dd></dl>
              <dl class="col-links col-links-first"><dt>线下门店</dt>
                <dd>小米之家</dd>
                <dd>服务网点</dd>
                <dd>授权体验店</dd></dl>
              <dl class="col-links col-links-first"><dt>关于小米</dt>
                <dd>了解小米</dd>
                <dd>加入小米</dd>
                <dd>投资者关系</dd><dd>企业社会责任</dd><dd>廉洁举报</dd></dl>
              <dl class="col-links col-links-first"><dt>关注我们</dt>
                <dd>新浪微博</dd>
                <dd>官方微信</dd>
                <dd>联系我们</dd><dd>公益基金会</dd></dl>
              <dl class="col-links col-links-first"><dt>特色服务</dt>
                <dd>F码通道</dd>
                <dd>礼物码</dd>
                <dd>防伪查询</dd></dl>
            </div>
          </div>
    
        </div>
        <div class="site-info">
          <div class="container">
            <div class="head-logo"><img src="../images/logo-mi2.png" alt=""></div>
            <div class="info-text">
              <p class="sites">
                <a rel="nofollow" href="http://www.mi.com/index.html" target="_blank">小米商城</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="http://www.mi.com/index.html" target="_blank">MIUI</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="http://www.mi.com/index.html" target="_blank">米家</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="http://www.mi.com/index.html" target="_blank">米聊</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="http://www.mi.com/index.html" target="_blank">多看</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="http://www.mi.com/index.html" target="_blank">游戏</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="http://www.mi.com/index.html" target="_blank">政企服务</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="http://www.mi.com/index.html" target="_blank">小米天猫店</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="http://www.mi.com/index.html" target="_blank">小米集团隐私政策</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="http://www.mi.com/index.html" target="_blank">小米公司儿童信息保护规则</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="http://www.mi.com/index.html" target="_blank">小米商城隐私政策</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="http://www.mi.com/index.html" target="_blank">小米商城用户协议</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="http://www.mi.com/index.html" target="_blank">问题反馈</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="http://www.mi.com/index.html" target="_blank">Select Location</a>
                <span class="sep">|</span>
              </p>
              <p class="sites">
                <a rel="nofollow" href="http://www.mi.com/index.html" target="_blank">北京互联网法院法律服务工作站</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="http://www.mi.com/index.html" target="_blank">中国消费者协会</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="http://www.mi.com/index.html" target="_blank">北京市消费者协会</a>
                <span class="sep">|</span>
              </p>
              <p class="sites sites-three">
                ©
                <a href="javascript:;" target="_blank" title="mi.com">mi.com</a> 京ICP证110507号
                    <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备10046444号</a>
                    <a rel="nofollow" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134" target="_blank">京公网安备11010802020134号</a>
                    <a href="//www.mi.com/culture-license/" target="_blank">京网文[2020]0276-042号</a>
                    <br>
                    <a href="//www.mi.com/medical/record/" target="_blank">（京）网械平台备字（2018）第00005号</a>
                    <a href="//www.mi.com/medical/qualification/" target="_blank">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
                    <a href="//www.mi.com/business-license/" target="_blank">营业执照</a>
                    <a href="//www.mi.com/medical/list/" target="_blank">医疗器械质量公告</a>
                    <br>
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0c7d4cf3b7cd88de10196e30c92e020.png" target="_blank">增值电信业务许可证</a> 网络食品经营备案 京食药网食备202010048  
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6859168166651511897f54fa1047fe3.png" target="_blank">食品经营许可证</a>
                    <br>
                    违法和不良信息举报电话：171-5104-4404 <a href='https://www.mi.com/intellectual' target="_blank">知识产权侵权投诉</a> 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
              </p> 
            </div>
            <div class="info-links">
              <a rel="nofollow" href="//privacy.truste.com/privacy-seal/validation?rid=4fc28a8c-6822-4980-9c4b-9fdc69b94eb8&lang=zh-cn" target="_blank">
                <img rel="nofollow" src="http://i1.mifile.cn/f/i/17/site/truste.png" alt="TRUSTe Privacy Certification">
              </a>
              <a rel="nofollow" href="//search.szfw.org/cert/l/CX20120926001783002010" target="_blank">
                <img rel="nofollow" src="http://s01.mifile.cn/i/v-logo-2.png" alt="诚信网站">
              </a>
              <a id="_xinchacharenzheng_cert_vip_kexinweb" rel="nofollow" href="//xyt.xinchacha.com/pcinfo?sn=523009637759455232&certType=6" target="_blank">
                <img rel="nofollow" src="http://xyt.xinchacha.com/img/icon/icon3.png" alt="可信网站">
              </a>
              <a rel="nofollow" href="//www.mi.com/service/buy/commitment/" target="_blank">
                <img rel="nofollow" src="http://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="诚信经营 放心消费">
              </a>
              <a rel="nofollow" id="tupianqiehuan" href="https://webcert.cnmstl.net/cert/grade?sn=3af21034e35011eab3ea00163e068ceb" class="safe-auth J_safeAuth" >
                <img rel="nofollow" id="img1" src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/f1ee261b96ae71e845efba398efeca02.png" class="img1" >
                <img rel="nofollow" id="img2" src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/8886a16cf5391f3b4c4b327ff6afc4de.png" class="img2" >
              </a>
            </div>
    
          </div>
        </div>
      </body>
    </html>

a:link {
      text-decoration: none;
      color: white;
    }
    a:visited {
      text-decoration: none;
      color: white;
    }
    a:hover {
      text-decoration: none;
      color: rgba(255, 255, 255, 0.281);
    }
    a:active {
      text-decoration: none;
      color: white;
    }
    /* div {
      display: inline-block;
    } */
    body {
      /* height: 10000px; */
    }
    .container {
      width: 1226px;
      /* background: red; */
      margin-right: auto;
      margin-left: auto;
      font-size: 12px;
      color: #b0b0b0;
    }
    .site-topbar {
      height: 40px;
      background: #333;
    }
    
    a {
      display: inline-block;
      line-height: 40px;
    }
    .container a img {
      margin: -8px auto;
    }
    .site-header {
      height: 100px;
    }
    
    .site-header img {
      width: 56px;
      height: 56px;
      margin-top: 22px;
    }
    
    .header-nav ul li {
      display: inline;
      /* float: left; */
      font-size: 16px;
      color: #000;
      padding: 26px 10px 38px;
    }
    .site-header .container .header-nav {
      margin-top: 25px;
      margin-left: 100px;
    }
    .site-header .container div {
      float: left;
    }
    
    .home-hero-container {
      font-size: 14px;
      color: #000;
      float: left;
      margin-left: 130px;
      background-color: gray;
      width: 196px;
    }
    .home-hero-container ul li {
      list-style: none;
      margin-bottom: 15px;
    }
    .lunbotu img {
      height: 321px;
      width: 997px;
    }
    .home-hero-sub .span4 {
      width: 196px;
      height: 170px;
      background-color: gray;
      margin-left: 130px;
      margin-top: 15px;
      float: left;
    }
    .home-hero-sub .span4 ul {
      display: block;
      float: left;
      margin-left: -19px;
    }
    .home-hero-sub .span4 ul li {
      display: inline;
      font-size: 12px;
      list-style: none;
      float: left;
      margin-bottom: 28px;
      margin-left: 3px;
    }
    .home-hero-sub .span4 ul li img {
      width: 24px;
      display: block;
      margin: 0 auto 4px;
    }
    .span16 {
      float: left;
      width: 1016px;
      /* background-color: red; */
    }
    .span16 .home-promo-list ul {
      display: block;
      padding-left: 0px;
    }
    .span16 .home-promo-list ul li {
      display: inline;
      float: left;
    }
    .span16 .home-promo-list .first {
      list-style: none;
    }
    
    .span16 .home-promo-list .first img {
      width: 316px;
      float: left;
      margin-right: 5px;
    }
    .page-main .container .home-banner-box a img {
      width: 1196px;
      margin-top: 10px;
      margin-left: -8px;
    }
    .home-brick-box .box-hd {
      height: 50px;
      /* background-color: red; */
    }
    .box-hd h2 {
      display: block;
      float: left;
      margin-right: 1045px;
      margin-left: 132px;
    }
    .more {
      float: left;
      margin-top: 27px;
    }
    .more img {
      width: 15px;
      padding-top: 0px;
    }
    .shoujizhanshi {
      width: 15%;
      margin-left: 123px;
      /* background-color: rgb(235, 231, 231); */
      float: left;
    }
    
    .shoujizhanshi img {
      width: 226px;
    }
    .shoujilist {
      /* background-color: rgb(228, 222, 222); */
      height: 598px;
      float: left;
    }
    .shoujilist ul {
      width: 1012px;
      /* background-color: red; */
      height: 500px;
    }
    
    .shoujilist ul li {
      list-style: none;
      display: inline;
      float: left;
      /* margin-bottom: 32px; */
    }
    .shoujilist ul li h2 {
      margin-left: 91px;
      /* font-weight: normal; */
      font-size: 12px;
    }
    
    .yemiandibu {
      /* background-color: green; */
      height: 300px;
      float: left;
      margin-left: 117px;
    }
    .site-footer .container .footer-service {
    }
    .site-footer .container .footer-service ul {
      margin-top: 5px;
    }
    .site-footer .container .footer-service ul li {
      margin-right: 107px;
      list-style: none;
      float: left;
    }
    .site-footer .container .footer-service ul li a {
      color: black;
      font-size: 16px;
    }
    .site-footer .container .footer-service ul li img {
      display: inline;
    }
    .col-links-first {
      float: left;
      margin-right: 136px;
    }
    .col-links-first dt {
      margin-bottom: 26px;
    }
    .col-links-first dd {
      margin: 10px 0 0;
      font-size: 12px;
    }
    .fuqin dl:nth-child(1) {
      margin-left: 121px;
    }
    .site-info {
      float: left;
      width: 100%;
    }
    .site-info .container .head-logo {
      width: 343px;
    }
    .site-info .container .head-logo img {
      width: 56px;
      height: 56px;
      margin-left: 66px;
      float: left;
    }
    .site-info .container .info-text {
      float: left;
      margin-top: 1px;
      width: 1100px;
    }
    .site-info .container .info-text .sites {
      margin: 0px;
    }
    .site-info .container .info-text .sites a {
      color: black;
      line-height: 12px;
    }
    .site-info .container .info-text .sites-three a {
      color: #b0b0b0;
      line-height: 12px;
    }
    .info-links {
      margin-left: 120px;
    }
    .info-links a img {
      width: 83.01px;
      height: 28px;
    }
    
    /* #img2 {
      display: none;
    } */

<html>
      <head>
        <meta charset="UTF-8" />
        <title>js-是动态实现图片显示</title>
        <script type="text/javascript">
          //设置图片的动态效果
          function photoOper(ph, photo) {
            //获取图片对象
            //var ph=document.getElementById(id); //可以通过id获得，但是没必要，我们可以直接使用this直接把对象传过来
            // 鼠标移动过去就会有一个边框
            ph.style.border = "solid 1px"; //我们是重新赋值，所以我们要用=赋值符，而不是：各个是属性说明
            // console.log(ph);s
            //在大屏块显示
            big.src = photo; //传过来的数据就已经是一个字符串类型了，虽然我们src的值需要是字符串，但是如果再加一个""就会导致路径不明，这样其实际图片名相当于带了""
            console.log(photo);
          } //src是big的属性的是不是样式属性，可以直接调用修改，不用加style
          function photoOper2(ph) {
            ph.style.border = ""; //移出后边框值没
            // console.log(ph);
          }
        </script>
        <style type="text/css">
          #showdiv {
            width: 500px;
            height: 440px;
            border: solid 1px;
            border-radius: 15px;
          }
          #ta {
            margin: auto;
            margin-top: 10px;
            margin-left: 10x;
          }
          img {
            margin-left: 3px;
          }
        </style>
      </head>
      <body>
        <div id="showdiv">
          <table id="ta">
            <tr>
              <td colspan="4" width="490px" height="344px">
                <img
                  src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Guardians-of-the-Galaxy-Poster-High-Res.jpg"
                  width="490px"
                  id="big"
                />
              </td>
            </tr>
            <tr>
              <td height="68px">
                <img
                  src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg"
                  height="65px"
                  id="p1"
                  onmousemove="photoOper(this,'http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/Blade-Runner-poster-art-Harrison-Ford.jpg')"
                  onmouseout="photoOper2(this)"
                />
              </td>
              <td>
                <img
                  src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg"
                  height="65px"
                  onmousemove="photoOper(this,'http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/2017_alien_covenant_4k-5120x2880-1920x1080.jpg')"
                  onmouseout="photoOper2(this)"
                />
              </td>
              <td>
                <img
                  src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg"
                  height="65px"
                  onmousemove="photoOper(this,'http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/robocop-1987-wallpaper-2.jpg')"
                  onmouseout="photoOper2(this)"
                />
              </td>
              <td>
                <img
                  src="http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg"
                  height="65px"
                  onmousemove="photoOper(this,'http://demo.jb51.net/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg')"
                  onmouseout="photoOper2(this)"
                />
              </td>
            </tr>
          </table>
        </div>
      </body>
    </html>

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div>
          <img id="img1" src="../images/小米11 Pro.webp" alt="" />
          <img id="img2" src="../images/小米11 Pro.webp" alt="" />
          <img id="img3" src="../images/小米11 Pro.webp" alt="" />
        </div>
      </body>
      <script>
        // while (true) {
        //   console.log("nihao");
        // }
    
        for (i = 0; i < 10000; i++) {
          console.log(i);
        }
        function tupian() {
          img1 = document.getElementById("img1");
          console.log(img1);
        }
        tupian();
        // setInterval(tupian(), 40000);
        // function chuxian() {
        //   img1 = document.getElementById("img1");
        //   console.log(img1);
        //   img1.style.display = "unset";
        // }
        // setInterval(chuxian(), 2000);
      </script>
    </html>

https://blog.csdn.net/qq\_38362772/article/details/84873136