純粋な CSS_html/css_WEB-ITnose で記述されたログインスタイル-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

純粋な CSS_html/css_WEB-ITnose で記述されたログインスタイル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:31 AM

シンプルなログインスタイルを設計し、自分のステータスを統合するコードを自分で書きました (HTML と CSS を使用)

まず効果を見てみましょう:

1 HTML コードは次のとおりです。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Login</title>    <link rel="stylesheet" type="text/css" href="css/login.style.css"></head><body><div id="content">    <div class="login-header">        <img src="assets/images/logo">    </div>    <form>        <div class="login-input-box">            <span class="icon icon-user"></span>            <input type="text" placeholder="Please enter your email/phone">        </div>        <div class="login-input-box">            <span class="icon icon-password"></span>            <input type="password" placeholder="Please enter your password">        </div>    </form>    <div class="remember-box">        <label>            <input type="checkbox"> Remember Me        </label>    </div>    <div class="login-button-box">        <button>Login</button>    </div>    <div class="logon-box">        <a href="">Forgot?</a>        <a href="">Register</a>    </div></div></body></html>

ログイン後にコピー

2. CSS コードは次のとおりです:

body{    background: url("../assets/images/bg_login.jpg") no-repeat fixed;    /* set background tensile */    background-size: 100% 100%;    -moz-background-size: 100% 100%;    margin: 0;    padding: 0;}#content{    background-color: rgba(255, 255, 255, 0.95);    width: 420px;    height: 300px;    border: 1px solid #000000;    border-radius: 6px;    padding: 10px;    margin-top: 15%;    margin-left: auto;    margin-right: auto;    display: block;}.login-header{    width: 100%;    height: 48px;    margin-bottom: 20px;    border-bottom: 1px solid #dcdcdc;}.login-header img{    width: 120px;    margin-left: auto;    margin-right: auto;    display: block;}.login-input-box{    margin-top: 12px;    width: 100%;    margin-left: auto;    margin-right: auto;    display: inline-block;}.login-input-box input{    width: 340px;    height: 32px;    margin-left: 18px;    border: 1px solid #dcdcdc;    border-radius: 4px;    padding-left: 42px;}.login-input-box input:hover{    border: 1px solid #ff7d0a;}.login-input-box input:after{    border: 1px solid #ff7d0a;}.login-input-box .icon{    width: 24px;    height: 24px;    margin: 6px 4px 6px 24px;    background-color: #ff7d0a;    display: inline-block;    position: absolute;    border-right: 1px solid #dcdcdc;}.login-input-box .icon.icon-user{    background: url("../assets/images/user.png");}.login-input-box .icon.icon-password{    background: url("../assets/images/password.png");}.remember-box{    width: auto;    height: auto;    margin-left: 18px;    margin-top: 12px;    font-size: 12px;    color: #6a6765;}.login-button-box{    margin-top: 12px;    width: 100%;    margin-left: auto;    margin-right: auto;    display: inline-block;}.login-button-box button{    background-color: #ff7d0a;    color: #ffffff;    font-size: 16px;    width: 386px;    height: 40px;    margin-left: 18px;    border: 1px solid #ff7d0a;    border-radius: 4px;}.login-button-box button:hover{    background-color: #ee7204;}.login-button-box button:active{    background-color: #ee7204;}.logon-box{    margin-top: 20px;    text-align: center;}.logon-box a{    margin: 30px;    color: #4a4744;    font-size: 13px;    text-decoration: none;}.logon-box a:hover{    color: #ff7d0a;}.logon-box a:active{    color: #ee7204;}

ログイン後にコピー

リソースファイルをアップロードできないことがわかりました -_-

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。