Heim >Web-Frontend >HTML-Tutorial >一个纯CSS写的登录的样式_html/css_WEB-ITnose

一个纯CSS写的登录的样式_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:31:441152Durchsuche

设计了一个简单的登录样式,然后自己写了下代码,巩固一下自己的状态(就使用了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" alt="一个纯CSS写的登录的样式_html/css_WEB-ITnose" >    </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;}

 

发现没法上传资源文件 -_- 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn