HTML简单登录界面的实现

简单登录界面的实现：

直接一个实例上代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录</title><style>* {margin: 0;padding: 0;}body {background-color: rgb(235, 235, 235);}form {width: 400px;height: 320px;background-color: white;padding: 20px;box-sizing: border-box;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);/* 相对于现在所处位置的位移变化，x便偏移自己宽度的50%，y偏移自己高度的50% */}h2 {margin-bottom: 20px;text-align: center;}form input {width: 100%;height: 30px;display: block;margin-bottom: 20px;padding-left: 10px;box-sizing: border-box;}.mya {width: 100%;height: 30px;margin-bottom: 20x;}.mya a:nth-child(1) {float: left;}.mya a:nth-child(2) {float: right;}button {width: 100%;height: 40px;background-color: rgb(235, 235, 235);border: none;}button:active {box-shadow: 0 0 3px rgb(173, 172, 172);/* x偏移  y偏移  模糊值 颜色 */}</style>
</head><body><form action=""><h2>登录界面</h2><input id="username" type="text" placeholder="请输入账号"><input id="password" type="text" placeholder="请输入密码"><div class="mya"><a href="">忘记密码</a><a href="">注册</a></div><button id="login-btn" type="button">登录</button></form><!-- js引入方式：1、写在body标签里面，通过script包起来2、引入外部js文件  再通过script的src属性引入进来 --><script>// let 定义一个变量let username = document.getElementById('username')let password = document.getElementById('password')let loginBtn = document.getElementById('login-btn')// js里面不允许出现 - //一般的交互事件// onclick 点击事件// onmousemove  鼠标移入事件// onmouseout  鼠标移出事件// ondblclick  双击事件// onfocus  input框获取焦点事件// onblur  失焦事件loginBtn.onclick = function() {let usernamevalue = username.valuelet passwordvalue = password.value// console.log(usernamevalue, passwordvalue)// 便于检查的时候判断是否成功if (!usernamevalue) {return alert('请输入正确的用户名')//return 跳出当前函数，并且返回后面的值}console.log(usernamevalue, passwordvalue)}</script>
</body></html>

HTML简单登录界面的实现相关推荐

android自动登录简书,Android开发之简单登录界面
用户界面基础 Android系统的四大组件分别是活动(Activity).服务(Service).广播接收器(Broadcast Receiver).内容提供器(Content Provider). ...
FLEX PHP 交互简单登录界面（1）源代码
简单的不能再简单的flex 与 php 交互的登录界面 (没有使用mysql) 主要是解决 httpService 的一些问题代码在附件中 (本例用flex builder 3 和 Deamwea ...
vb.net 简单登录界面(三层架构思想)
上篇博客介绍了面向过程思维设计的vb.net登录界面,这篇文章就简单介绍一下我用三层架构思想实现的vb.net登录功能吧,还请高手多多指点,初次使用三层架构思想,使用难免有错误之处! 1.登录界面主要 ...
PHPstudy设计简单登录界面
这次我们设计一个简单的登录界面,首先要HTML设计前端浏览器界面,然后PHP设计验证和数据库交互,Mysql用来存储用户信息. 我们启动PHPstudy,开启WNMP. 首先我们用HTML设计一个简单 ...
Android简单登录界面，保存账号和密码（基础，详解）
一问题描述: 制作一个简单的登录界面,并使用文件储存方式储存用户名和密码,在下次打开应用时自动获取上次储存的账户和密码二解题思路: 文件储存: 文件存储是Android中最基本的一种数据存储方式 ...
Android开发学习（4）简单登录界面
在简单的Hello Android 的基础上,我们进一步学习如果制作一个简单的登录界面(不涉及网络交互,用户名密码先固定为admin ),在这里我们学习获取用户名密码,多个Activity之间跳转. ...
C#连接数据库制作简单登录界面
目标:可视化的登录界面,可实现登录,注册,数据源为SQL server数据库,实现数据库表格内容的读取,写入 C#集成开发环境为visual studio2017 数据库为SQL server数据库 ...
ASP.net 简单登录界面
一.说明此文是小白在学习张晨光老师的视频教学<<Asp.Net WEB服务器编程技术>>中做的学习笔记,一些知识点也是跟着教程走的,大家也可以去老师的主页去学习,谢谢大家. ...
php制作登录页面的过程_PHP实现简单登录界面
PHP学习路上的第一个完整的极小极小的项目,特意做个记录登录界面: html代码(login.html): 用户登录用户名: 密码: 7天内自动登录 login.php:(登陆处理页) head ...
Xcode中使用自动布局实现简单登录界面
本文通过实现一个居中显示的登录界面来了解ios中的Auto Layout技术.最终效果图如下: Xcode故事板中的效果图如下: 用户名和用户名输入框使用水平的UIStackView包裹起来,密码也使 ...

HTML简单登录界面的实现

HTML简单登录界面的实现相关推荐

最新文章

热门文章