一个纯CSS写的登录的样式_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

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="/static/imghw/default1.png"  data-src="assets/images/logo"  class="lazy" 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;}

登录后复制

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn