html和css简单登录页面,HTML和CSS实现炫酷的登录页面

效果图：

HTML

整个页面元素很简单就不细讲了，直接上代码吧：

Login

Login

Login

上面两个link一个是引用css文件，一个是引用一个图标库font-awesome，大家可以去百度搜一下，然后直接下载，在项目中引用就能用了。

CSS

我们要解决这几件事：

半透明框体

框体居中且里面的文字等元素也居中

背景图全屏铺满

输入框的边框只有下边框

按钮的圆角与渐变色

代码如下：

body{

background: url('../img/img03.jpg');

background-repeat: no-repeat;

background-size: 100% auto;

}

#login-box{

width: 30%;

height: auto;

margin: 0 auto;

margin-top: 15%;

text-align: center;

background: #00000090;

padding: 20px 50px;

}

#login-box h1{

color: #fff;

}

#login-box .form .item{

margin-top: 15px;

}

#login-box .form .item i{

font-size: 18px;

color: #fff;

}

#login-box .form .item input{

width: 180px;

font-size: 18px;

border: 0;

border-bottom: 2px solid #fff;

padding: 5px 10px;

background: #ffffff00;

color: #fff;

}

#login-box button{

margin-top: 15px;

width: 180px;

height: 30px;

font-size: 20px;

font-weight: 400;

color: #fff;

border: 0;

border-radius: 15px;

/* background: #1abc9c; */

/* background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%); */

background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);

}

渐变色是从网站webgradients.com直接复制的(你也可以自己手动改)