JavaScriptはXiaomi Mall公式サイトの完全なページ実装プロセスを模倣します

   <li id="ダウンロード">
       <a href="#" rel="external nofollow" rel="external nofollow" >アプリをダウンロード</a>
       <i></i>
       <div class="ダウンロード">
             <a href="#" rel="外部nofollow" rel="外部nofollow" >
             <img src="./image/ホームページ画像/xiaomi-android.png" alt="">
                 Xiaomi モール アプリ
             </a>
       </div>
  </li>

     li {
            フロート: 左;
            パディング:8px;
            右パディング: 0; 
                {
                    表示: ブロック;
                    高さ: 15px;
                    テキスト配置: 中央;
                    右パディング: 8px;
                    右ボーダー:1px 実線 #423c37 ;
                    フォントサイズ: 8px;
                    色: #b0b0b0;
                    &:ホバー{
                         色: #fff;
                         }
                } 
            }
            #ダウンロード{
                位置: 相対的;
                幅: 68px;
                私 {
                    表示: なし;
                    位置: 絶対;
                    上: 20px;
                    左: 25px;
                    幅:0;
                    高さ:0;
                    border-color: 透明 透明 白 透明;
                    // border-color:transparent #ccc transparent transparent;
                    境界線スタイル:solid;
                    境界線の幅:8px;
                    zインデックス: 9;
                   
                }
           
            .ダウンロード{
                位置: 絶対;
                上: 16px;
                左: -28px;
                上マージン: 20px;
                幅: 130ピクセル;
                高さ: 0;
                オーバーフロー: 非表示;
                ボックスの影: 0px 1px 5px #aaa;
                // 境界線:1px 実線 #ccc;
                背景色: #fff;
                トランジション: 高さ .3 秒;
                zインデックス: 999; 
                {
                    フォントサイズ: 14px;
                    色: #000;
                    境界線: 0;
                    &:ホバー{
                        色: #000;
                    }
                    画像{
                        表示: ブロック;
                        幅: 100ピクセル;
                        高さ: 100px;
                        マージン: 15px;
                    } 
                }
            }
            }

  var APP = this.document.getElementById('ダウンロード')
  var ダウンロード = this.document.querySelector('.download');
 
 
  APP.addEventListener('mouseenter', 関数() {
    ダウンロード.style.height = 160 + 'px';
    APP.children[1].style.display = 'ブロック';
 
  });
  APP.addEventListener('mouseleave', 関数() {
    ダウンロード.style.height = 0;
    APP.children[1].style.display = 'なし';
 
  });

 #チェックボックス{
                    幅: 20px;
                    高さ: 20px;
                    表示: インラインブロック;
                    色: #ff6900;
                    マージン: 0;  
                    フォントサイズ: 14px;
                      
                   }
                入力[type=チェックボックス]{
                    幅: 20px;
                    高さ: 20px;
                    上マージン: 2px;
                    位置: 相対的;
                }
                入力[type=チェックボックス]::after {
                    位置: 絶対;
                    上: 0;
                    色: #000;
                    幅: 20px;
                    高さ: 20px;
                    表示: インラインブロック;
                    可視性: 可視;
                    左パディング: 0px;
                    テキスト配置: 中央;
                    コンテンツ： ' ';
                    // 境界線の半径: 3px;
                }
                入力[type=チェックボックス]:checked::after {
                    内容: "✓";
                    色: #fff;
                    フォントサイズ: 10px;
                    行の高さ: 20px;
                    背景色: rgb(255, 105, 0);
                }

     <フォームアクション="#">
           <input type="submit" value="ログイン" name="ログイン" id="indexDL">
           <input type="submit" value="登録" name="register"id="indexZC">
     </フォーム>

 var indexDL = this.document.getElementById('indexDL');
  var indexZC = this.document.getElementById('indexZC');
  var temp1 = null;
  var temp2 = null;
  indexDL.addEventListener('click', 関数() {
    temp1 = インデックスDL.name;
    var newurl = 'login.html';
    // window.location.href = newurl;
    // window.location.assign(新しいURL);
    window.event.returnValue = false
    window.location.href = 'login.html' + '?' + temp1;
    // コンソールログ(temp1);
  });
  indexZC.addEventListener('クリック', 関数() {
    temp2 = インデックスZC.name;
    ウィンドウイベントの戻り値は false です。
    window.location.href = 'login.html' + '?' + temp2;
  });

    var temp3 = window.location.search.substr(1);
    if(temp3 === 'レジスタ'){
        ZC.クリック();   
    }