（確認するために、アカウントのパスワードを含む）シンプルなログイン画面

今回は、同社のタスク1を実装し、ログイン画面を総括します。

実際には、ログイン画面が中学一年で行われているが、インターフェースは、超低をしていた、同社の設計要件に起因するかどうか、CSSでの主な違いの嘘は、それはインターフェースの詳細の多くに対処することは容易ではありません。だから、まだ私は、レコードについて何かを書きたいです。

最初はそれがどのような効果を示し、数字をカット：

その後、我々はコードを見て：

我々はページを作成する前に、次のように、login.htmlと私たちのメインページで彼の最初の全体的なレイアウトの良いもののように、そこの、おおよその構造：

のは、特定の方法でコードと見てみましょう。

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>登录页面</ TITLE> 
 
    <リンクのrel = "スタイルシート"タイプ= "テキスト/ cssの" HREF = "login.css" /> 
    ます。<script type = "text / javascriptの" SRC = "login.js"> </ SCRIPT> 
</ HEAD> 
 
<BODY> 
の<divのid = "login_frame"> 
 
    <p個のID = "image_logo "> <IMG SRC ="画像/ログイン/ fly.png "> </ P> 
 
    <フォームメソッド="ポスト」アクション= "login.js"> 
 
        <P> <ラベルクラス= "label_input">用户名</ラベル>の<input type = "text" ID = "ユーザ名"クラス=」text_field "/> </ P> 
        <P> <ラベルクラス=" label_input ">密码</ label>はの<input type =" text」ID = "パスワード"クラス= "text_field" /> </ P> 
 
        <divのID = "login_control"> 
            <入力タイプ値= "登录" οnclick= "btn_login" = "ボタン" ID = "ログイン（）;" />
            <a id="forget_pwd" href="forget_pwd.html">忘记密码ですか</a> 
        </ DIV> 
    </ FORM> 
</ div> 
 
</ BODY> 
</ HTML>

説明：

このHTML内の、全体的なレイアウト計画のための私達のメインのログイン画面、ウィンドウ内のdivの使用、写真、ブロックに分割ラベル、入力ボックス、ボタン、リンク、後に、そう簡単にCSSを使用するために、私たちは、正確な位置調整可能、余白を調整します。しかし、また、idとクラスを設定し、いくつかの重要な事柄であり、これは、フォントを調整し、そのCSSとの正確な色調の後は簡単です。

/ ** 
 * WinkJie ON 2019年11月17日によって作成されます。
 * / 
ファンクションログイン（）{ 
 
    VARのユーザー名=のdocument.getElementById（ "ユーザ名"）; 
    VARパス=のdocument.getElementById（ "パスワード"）; 
 
    IF（username.value == ""）{ 
 
        アラート（ "ユーザー名を入力してください"）; 
 
    }他のIF（pass.value == ""）{ 
 
        アラート（ "パスワードを入力してください"）; 
 
    }他のIF（username.value == "ADMIN" pass.value == && "123456"）{ 
 
        window.location.href = "のwelcome.html"; 
 
    }他{ 
 
        ！アラート（「正しいユーザ名とパスワードを入力してください「）
 
    } 
}

説明：

jsは、ユーザー名とパスワードが正しい、および実装するのはかなり簡単ですかを決定するために使用されます。

あなたはどのようなインターフェースジャンプ文を覚えていることができます。

window.location.href = "のwelcome.html"。

第二は、ここで私たちがドキュメントオブジェクトのメソッドで指定されたオブジェクトID値を取得するためのdocument.getElementByIdの知識を使用し、取得した入力ボックスの戻り値です。ここでは、byIdので、htmlのユーザ名の前にし、パスワード設定されたID値の代わりに、名前の値であることが、以下より取得することに注意しなければなりません！

：このドキュメントについてこのリンクをクリックすることができます詳細のJavaScriptドキュメントオブジェクト

本体{ 
    背景画像：URL（ "画像/ログイン/ loginBac.jpg"）;; 
    背景サイズ：100％; 
    背景リピート：なしリピート; 
} 
 
#login_frame { 
    幅：400ピクセル。
    高さ：260px; 
    パディング：13px; 
 
    位置：絶対; 
    左：50％; 
    トップ：50％; 
    margin-left：-200px; 
    マージントップ：-200px; 
 
    背景色：RGBA（240、255、255、0.5）。
 
    国境半径：10pxの; 
    テキスト整列：センター; 
} 
 
フォームP> * { 
    表示：インラインブロック。
    垂直整列：中央; 
} 
 
#image_logo { 
    マージントップ：22px; 
} 
 
.label_input {
    フォントサイズ：14px; 
    フォントファミリー：宋体; 
 
    幅：65px; 
    高さ：28px; 
    行の高さ：28px; 
    テキスト整列：センター; 
 
    色：白; 
    背景色：＃3CD8FF。
    border-top-左半径：5pxの; 
    ボーダー左下半径：5pxの。
} 
 
.text_field { 
    幅：278px; 
    高さ：28px; 
    border-top-右半径：5pxの; 
    border-bottom-右半径：5pxの; 
    ボーダー：0; 
} 
 
#btn_login { 
    フォントサイズ：14px; 
    フォントファミリー：宋体; 
 
    幅：120ピクセル; 
    高さ：28px; 
    行の高さ：28px; 
    テキスト整列：センター;
 
    色：白; 
    背景色：＃3BD9FF。
    国境半径：計6Px。
    ボーダー：0; 
 
    フロート：左; 
} 
 
#forget_pwd { 
    フォントサイズ：12ピクセル。
    色：白; 
    テキスト装飾：なし; 
    位置：相対; 
    フロート：右; 
    トップ：5pxの; 
 
} 
 
#forget_pwd：ホバー{ 
    色：青。
    テキスト装飾：下線; 
} 
 
#login_control { 
    パディング：0 28px; 
}

説明：

CSSが最も難しい部分であり、インタフェースは、画面表示、透明な背景を中心とするそのようなログイン画面として、そのような美しい効果を達成することができた、ボックスの四隅には、入力ボックスダウン少しアーク、ログインボタンの位置合わせなどを有しています。

要約：

①作る背景画像が引き伸ばされ、画面全体を占有しています。

背景サイズ：100％;
背景リピート：なしリピート;

②作るのdivブロックが画面上を中心にされています。

幅：400ピクセル;
高さ：260px;
パディング：13px;
位置：絶対;
左：50％;
トップ：50％;

margin-left：-200px;

マージントップ：-200px

（のmargin-leftここで、マージントップと最高値が全くもちろん、効果を中心に半分の幅と高さに設定され、前にマイナス記号を追加することを忘れないでください！）

③フィレットが提供します：

テキスト整列：センター;
border-top-左半径：5pxの;
ボーダー左下半径：5pxの。
border-top-右半径：5pxの;
border-bottom-右半径：5pxの;

④背景色と透明度を設定プラス：

背景色：RGBA（240、255、255、0.5）。

⑤そう入力ボックスとラベルアライメント中心その：

フォームP> * {
表示：インラインブロック。
垂直整列：中央;
}

⑥リンクの下線を削除します。

テキスト装飾：下線;

図7に示すように、中央にテキストの内部に配置されたラベルまたはボタン。

幅：120ピクセル;
高さ：28px;
行の高さ：28px;
テキスト整列：センター;

（行の高さを設定する必要は値が高いラベル、ボタンの高さの高いワード線に、それに等しいです！）

8、真ん中の「ログイン」へと間隔を設定し、「パスワードを忘れてしまいました」。

彼らはdiv要素に結合し、HTMLで初：

<DIV ID = "login_control">
の<input type =値= "登录" οnclick= "btn_login" "ボタン" ID = "ログイン（）;" />
<a id="forget_pwd" href="forget_pwd.html">忘记密码ですか</a>
</ div>

そして、CSSのパディングでそれを設定します。

#login_control {
パディング：0 28px;
}

（確認するために、アカウントのパスワードを含む）シンプルなログイン画面

おすすめ