新年運勢コードギフトバッグ02

9954 ワード
テキストリンク

1.css中央揃えパッケージ


次の3つの要素がずっと一緒にいると思えばいい.
.btns {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

2.cssを移動


移動やWebページによって、コンテンツの構成が異なるはずです.方法は...
例)bodyの背景色を緑に変更!
@media screen and (max-width: 780px)  {

    body {
        background-color: green;
    }

}
このように、横方向が780 px未満であると、
背景色が緑に変わります.

この方法を用いて得られた結果。htmlのレイアウトを変更します。

@media screen and (max-width: 780px)  {

    body {
        background-position: 70px -70px;
        background-size: 500px;
    }
    
    .rtan {
    	margin-top: 50px;
    }
    
    .msg {
    	font-size: 24px;
    	line-height: 36px;

    	margin-bottom: 36px;
    	padding:10px;
    }
    
    .msg > br {
    	display: none;
    }

}

index.htmlも修正されます。

@media screen and (max-width: 780px) {
            body {
                background-position: 70px -70px;
                background-size: 500px;
            }

            .rtans {
                width: 100%;
            }

            .mytitle {
                margin-top: 20px;
                margin-bottom: 20px;
            }

            .rtans > a {
                color: darkred;
            }
        }

3.後退js

function back(){
    let url = window.location.href;
    let new_url = url.split('result.html')[0] + 'index.html';
    window.location.href= new_url;
}

4.共有js

function share(){
    var t = document.createElement("textarea");
    document.body.appendChild(t);
    t.value = window.location.href;
    t.select();
    document.execCommand('copy');
    document.body.removeChild(t);
    alert('복사 완료!')
}

5.関数の適用


jsを使用してクリックボタンにfunctionを適用するには、onclick="함수이름()"を使用します.
<button onclick="share()" class="btn-share">공유하기</button>

完成本



索引ページです.
マウスサスペンション機能
背景の色が変わり、フォントが現れました.

この干支の運勢ページにアクセスするには、をクリックします.
次に、後退ボタンと共有ボタンを実現します.

「共有」ボタンをクリックすると、Webアドレスが自動的にコピーされます.
コピー完了のアラートが表示されます.

モバイル環境を考慮するとwidthが780 px未満の場合
サイズに応じてコンテンツを再配置する機能を学び、実現しました.
[programmers]level 1-私は同じ数字が好きではありません.
nettty