运行效果

代码

index.html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>登录界面</title><link rel="stylesheet" href="css/animate.css"><link href="css/index.css" rel="stylesheet">
</head>
<body><div id="panel"><div class="panel-header"><h2>系统</h2></div><div class="panel-content"><div class="user-pwd"><img src="data:images/icon_people.png"><input placeholder="请输入用户名/手机号" name="user"></div><div class="user-pwd"><img src="data:images/icon_password.png"><input placeholder="请输入密码" type="password" name="pwd"></div><div class="setting"><a href="#"><input type="checkbox"> 下次自动登录</a><a href="#" class="pull-right">忘记密码?</a></div><button class="login-btn">登&nbsp;录</button><div class="reg">还没账号?&nbsp;&nbsp;<a href="#">立即注册</a></div></div><div class="panel-footer"><span>社交账号登录:  </span><img src="data:images/sina.png"><img src="data:images/weixin.png"><img src="data:images/qq.png"></div></div><script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</body>
</html>

index.css

*{padding: 0;margin: 0;box-sizing: border-box;
}a{text-decoration: none;color: black;
}body{background: url("../images/bg.png") no-repeat;background-size: cover;text-align: center;
}#panel{width:400px;height: 400px;background-color: white;text-align: left;border-radius: 5px;box-shadow: -10px 20px 100px black;position: absolute;top:50%;left:50%;margin-left: -200px;margin-top: -200px;
}.panel-header{width:100%;height:64px;background-color: orangered;border-radius: 5px 5px 0 0;line-height: 64px;color:white;text-align: center;margin-bottom: 10px;cursor:default;
}.panel-content{padding: 20px;
}.panel-content .user-pwd{margin-bottom: 15px;height: 40px;position: relative;
}.panel-content .user-pwd img{position: absolute;top: 7px;left: 6px;
}.panel-content .user-pwd input{width: 100%;height: 100%;box-sizing: border-box;padding-left: 38px;border-radius: 5px;border:1px solid #dddddd;}.panel-content .user-pwd input:focus{outline: none;border: 1px solid orange;panel-header: 0 0 10px orange;
}.setting a{color: darkgray;font-size: 13px;
}.setting a.pull-right{float: right;
}.login-btn{margin: 15px 0;width: 100%;height: 38px;background-color: orangered;border: 0;font-size: 20px;color: white;border-radius: 5px;cursor: pointer;
}.login-btn:focus{outline: none;
}.reg{text-align: center;margin-bottom: 15px;color: darkgray;font-size: 13px;
}.reg a{color: orangered;
}.panel-footer{padding:0 20px;height: 44px;line-height: 44px;
}.panel-footer img{width: 30px;vertical-align: middle;
}

实战HTML：静态登录界面相关推荐

php静态登录界面代码,JSP_JSP登录验证功能的实现，静态的登录界面的设计login.htm - phpStudy...
JSP登录验证功能的实现静态的登录界面的设计login.htm,代码如下: 系统登录系统登录用户名密码将登录用户输入的信息提交到login.js ...
python项目实战:pyqt5实现登录界面模板
2019独角兽企业重金招聘Python工程师标准>>> 前言今天为大家介绍一个利用开发登录界面模板,基于pyqt5库,pyqt5这也一个PythonGUI界面开发的库,非常强大,关 ...
【实战】qq登录界面及回显用户的账户和密码
用户第一次登录的时候,勾选记住用户名和密码操作,会将此时的用户名和密码写入文件中,第二次访问的时候会读写入第一次的数据. 第一种方式是通过建立文件的方式: MainActivity.java: pac ...
【React Native开发】React Native控件之TextInput组件讲解与QQ登录界面实现(11)
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50589570 本文出自:[江清清的博客] (一)前言 [好消息]个人 ...
Vue实战篇一：使用Vue搭建注册登录界面
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
qt登录界面跳转_每天10分钟，木辛老师带你实战慕课软件开发：登录界面开发第2课...
软件实战开始,快速提供编程能力:通过实战,分析产品需求,梳理设计需求,提升项目分析和架构的能力.快点跟着木辛老师一起学习吧! 请点击右上角"关注"按钮关注我们哟:跟着木辛老师学习P ...
Android IoT开发实战 | 04 - 创建一个新的活动Activity（登录界面）
本系列IoT App开发笔记系b站视频教程学习笔记,视频地址: [7天Java0基础速成安卓开发]Day1 Android工程代码是怎么运行的 [7天Java0基础速成安卓开发]Day2 常用控件和界 ...
QQ2013登录界面动画变成静态图片的解决方法
本来QQ2013出现后,登录界面的动态效果很不错的.对于我们这种看烦了静态图的宅男来说... 最近突然发现不动了,百度搜索了几次都没找到答案,今天突然看到有解包得到swf文件的方法试了下解包出来,s ...
Flask项目实战——7—(Redis数据库存储验证码信息、验证登录界面的表单信息、注册功能实现、登录实现)
推荐一个API平台:聚合数据 1.Redis数据库存储验证码信息保存手机验证码到Redis数据库公有视图文件:apps/common/views.py # -*- encoding: utf-8 ...

实战HTML：静态登录界面

运行效果

代码

index.html

index.css

实战HTML：静态登录界面相关推荐

最新文章

热门文章