CSSスタイルを使用してシンプルなHTMLログインインターフェースを設計する

<!DOCTYPE html>
<html lang="ja">
    <ヘッド>
        <メタ文字セット="utf-8">
        <タイトル></タイトル>
        <!--フォントアイコンライブラリの紹介-->
        <link rel="スタイルシート" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
        <link rel="スタイルシート" href="css/reset.css">
        <link rel="スタイルシート" href="css/login.css">
    </head>
    <本文>

        <div class="wrap">
            <h1>Eコマースモールバックエンド管理システム</h1>
            <フォームアクション="">
                <div class="input-group">
                    //入力ボックスの左側にあるアイコンのようなものはフォントです。 //インターネットから font-awesome-4.7.0 ファイルをダウンロードし、プロジェクト ディレクトリに直接貼り付けて使用できます <i class="icon-user fa fa-user"></i>
                    <input type="text" name="" class="form-control" placeholder="ユーザー名を入力してください">
                </div>
                <div class="input-group">
                    <i class="icon-user fa fa-lock"></i>
                    <input type="password" name="" class="form-control" placeholder="パスワードを入力してください">
                </div>
                <div class="入力グループbtnグループ">
                    <button>ログイン</button>
                </div>
            </フォーム>
            <p>&copy;xx Group&nbsp;無断転載禁止</p>
        </div>

    </本文>
</html>

reset.css 部分 (リセット部分)

*{
 マージン:0;
 パディング:0;
}
{
 フォントサイズ: 12px;
 テキスト装飾: 0;
 色:#222;
}
、
入力、
ボタン{
 アウトライン: なし;
}
ul、ol、li{
 リストスタイル: なし;
}
h1、h2、h3、h4、h5、h6{
 フォントの太さ: 100;
}
画像{
 表示: ブロック;
 境界線: 0;
}

スタイルファイルのリセットについて:

ブラウザによって HTML タグのレンダリング方法が異なるため、開発者が HTML ページの CSS コードを 1 行も記述しなくても、開いたページには常にスタイルが適用されますが、ブラウザによってデフォルトのスタイルが若干異なるため、開発者にとってはある程度面倒なことになります。そのため、CSS コードの記述を開始する前に、通常はまずスタイルシートをリセットして、すべてのブラウザで HTML 要素のスタイルを統一します。フロントエンドエンジニアは、カスタムスタイルファイルを通じてスタイルを統一し、フロントエンドインターフェイスの互換性を向上させます。

y{
 背景: rgba(0,0,0,0.8);
}
体{
    //Web ページの背景画像を設定します。background-image: url(../img/xx.jpg);
}
。包む{
    //インターフェースの本体をブラウザの中央に配置する position: absolute; //絶対配置 left: 50%;
 上位: 50%;
 マージン: -175px 0 0 -250px;
 パディング: 20px;
 幅: 500ピクセル;
 高さ: 350ピクセル;
 背景: #333333;
 ボックスの影:0 0 10px rgba(255,255,255,0.5);
 box-sizing: border-box; //パディングとボーダーは定義された幅と高さに含まれます}
h1{
 高さ: 50px;
 フォントサイズ: 1.6em;
 テキスト配置: 中央;
 下境界線: 1px 実線 rgba(255,255,255,0.5);
}
.入力グループ{
 マージン: 20px 自動;
 高さ: 40px;
 幅: 300ピクセル;
 境界線: 1px実線rgba(0,0,0,0.2);
}
私{
 float: left; //左フロート width: 40px;
 高さ: 40px;
 テキスト配置: 中央;
 行の高さ: 40px !重要;
 背景: rgb(22,160,93);
 色: #fff;
 フォントサイズ: 22px !重要;
 
}
.フォームコントロール{
 フロート: 左;
 パディング: 0 10px;
 高さ: 40px;
 境界線: 0;
 幅: 260ピクセル;
 フォントサイズ: 18px;
 ボックスのサイズ: 境界線ボックス;
}
.btn-グループ{
 境界線: 0;
 上マージン: 40px;
}
ボタン{
 表示: ブロック;
 幅: 100%;
 高さ: 40px;
 フォントサイズ: 1.2em;
 文字間隔: 10px;
 境界線: 1px実線rgb(22,160,93);
 色: rgb(22,160,93);
 背景: #fff;
 カーソル: ポインタ;
}
ボタン:ホバー{
    //ボタン要素のマウスホバーの動的効果色を設定します: #fff;
 背景: rgb(22,160,93);
}
p{
 フォントサイズ: 12px;
 テキスト配置: 中央;
 色: #888;
}

設計結果がブラウザに与える影響:

CSS スタイルを使用してシンプルな HTML ログインインターフェイスを設計する方法について説明したこの記事はこれで終わりです。CSS HTML ログインインターフェイスに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: RocketMQ の Docker インストールとインストール中に発生した問題の解決策

>>: MySQL でパーセンテージと最初の数パーセントを表示する方法