Instagramログインページのクローン
緒論📌
HTML/CSS Instagramログインページクローンコード!
成果物の表示
DESKTOP環境(min-width:1527 px)
footer
flex-direction: rowの属性を与える横並べ替えを行った後、space-around属性により、物品の周囲に同じ間隔を設け、左右に置く.flex-direction: row;
justify-content: space-around;
TABLET環境(最小幅:876 px)
footer
justify-content: flex-start属性を開始点に配置します.
©2020 INSTAGRAM FROM FASEBOOKテキストコンテンツのcopyrightクラスもtext-align: leftを介して左揃えされています.
MOBILE環境
phones img
ログインフォームの左側にある携帯電話の写真は消え、ビューポートにのみログインフォームが表示されます..phones-container {
display: none;
}
また,タッチ制御が便利で,リンク間に隙間ができ,ユーザの利便性が向上した.
リファレンス
flex-direction: row;
justify-content: space-around;.phones-container {
display: none;
}Reference
この問題について(Instagramログインページのクローン), 我々は、より多くの情報をここで見つけました https://velog.io/@nu11/인스타그램-로그인-페이지-클론テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol