HTML+CSS登录界面

今天学习了一个HTML+CSS登录界面
效果图如下：

背景图片可以选取自己喜欢的，以下是实现代码：

login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>  <link rel="stylesheet" href="../css/login.css"/><link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body><div id="login-box"><h1>Login</h1><div class="form"><div class="item"><i class="fa fa-github-alt" style="font-size:24px"></i><input type="text" placeholder="Username">           </div><div class="item"><i class="fa fa-search" style="font-size:24px"></i><input type="text" placeholder="Password">          </div></div><button>Login</button></div></body>
</html>

login.css

body{background:url('../image/2.jpg');background-repeat:no-repeat;background-size:100% auto;}#login-box{width:30%;height:auto;margin:0 auto ;margin-top:13%;text-align:center;background:#00000060;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:20px;width:190px;height:30px;font-size:20px;font-weight:700;color:#fff;background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);border:0;border-radius:15px;}

background:url(’…/image/2.jpg’)为背景图片，可选取自己喜欢的，修改一下图片名即可。
按钮渐变色可以在https://webgradients.com/网址上查找。

HTML+CSS登录界面相关推荐

html注册页面美化,css登录界面美化
本篇文章主要介绍如何用css美化网站登录界面,需要的小伙伴参考下. 代码如下: 美化登录 *{margin:0;padding:0;}/*去掉页面样式*/ body{color:white;} .co ...
HTML+CSS 登录界面设计
一.界面源代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...
HTMLCSS登录界面及讲解
PS:该源码非原创,原文章来自(2条消息) HTML+CSS登录界面_桐艾的博客-CSDN博客_登录页面这里只做源码讲解页面效果如下: 首先是login.html <!DOCTYPE h ...
HTML5+CSS3+JS制作动态背景登录界面
目录第一步:编写HTML框架第二步:设置css样式表第三步:编写js代码第一步:编写框架 1.分别新建html,css和js文档后,将css和js分别链接至html中. 2.编写html基本框 ...
给我一个web前端的登录界面代码
下面是一份简单的 HTML 和 CSS 登录界面代码示例: <!DOCTYPE html> <html><head><meta charset="u ...
app登录界面背景 css_计算机毕业设计中Java web实现简登录页面（MyBatis+jsp+servlet+html+css+javascript）...
点击上方"蓝字",关注我们. 本文利用MyBatis+jsp+servlet+html+css+javascript实现了一个简单的登录页面.对用户输入的用户名和密码就行校验,校验 ...
企业网站前端制作实战教程 JQuery CSS JS HTML 登录界面
盒子模型引入重置css样式reset样式 @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, ...
运用HTML5+CSS3和CSS滤镜做的精美的登录界面
原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...
HTML+CSS实现品优购登录界面
HTML+CSS实现品优购登录界面效果图如下: 1.HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><hea ...

HTML+CSS登录界面

login.html

login.css

HTML+CSS登录界面相关推荐

最新文章

热门文章