HTML制作用户登录界面

1、index代码

<!doctype html>
<html><head><meta charset="utf-8"><title>login</title><link rel="stylesheet" type="text/css" href="css/index.css"/></head><body><div><div class="bgDiv"><div class="login"><img class="logoImg" src="img/qianfeng_03.jpg"/><div class="username"><img class="userImg" src="img/qianfeng_07.jpg"/><input class="userInp" type="text" placeholder="请输入用户名"/></div><div class="pwd"><img class="pwdImg" src="img/qianfeng_10.jpg"/><input class="pwdInp" type="password" placeholder="请输入密码"/></div><div class="forgetPwd"><img class="pwdImg" src="img/qianfeng_13.jpg"/><a class="forgetLink" href="#" target="">忘记密码</a></div><button class="btn">登录</button></div></div></div></body>
</html>

2、css代码

* {padding: 0;margin: 0
}a {text-decoration: none;
}li {list-style: none;
}body {background: skyblue;
}.bgDiv {width: 547px;height: 403px;/*background:#3a5eff;*//*border-top:1px solid rgba(0,0,0,0);*/overflow: hidden;
}.login {width: 422px;height: 339px;background: #fff;margin-top: 34px;margin-left: 50px;/*float:left;*/position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;
}.logoImg {width: 141px;height: 37px;margin-top: 32px;margin-left: 140px;margin-bottom: 8px;
}.username,
.pwd,
.forgetPwd {width: 366px;height: 60px;border-bottom: 1px solid #efefef;margin: 0 28px;/*line-height:60px;*/
}.userImg,
.pwdImg {margin-top: 18px;float: left;
}.userInp,
.pwdInp {width: 320px;height: 25px;margin-top: 18px;border: none;outline: none;margin-left: 20px;
}.forgetPwd {border: none;line-height: 58px;color: #3e82bf;font-size: 16px;
}.forgetLink {/*margin-top:-2px;*/padding-left: 5px;
}.btn {width: 364px;height: 40px;background: #4892ff;border: 1px solid #326dcc;color: #fff;font-size: 16px;margin-left: 30px;
}

3、效果图

4、总结

注意css是对html界面的修饰，文件名必须一致，比如index.html和index.css，当html有多个重复的结构和属性时，用class和id区分

HTML制作用户登录界面相关推荐

python tkinter制作用户登录界面
本文只是几年前学习的tkinter的时候写的测试程序,十分之简陋,只是学习用,没什么其他用处. 学习一下莫烦Python的tkinter教程,根据教程制作了用户登录注册页.基本功能为检查登录.注册.清 ...
python用户登录界面tkinter_python tkinter制作用户登录界面-Go语言中文社区
学习一下莫烦Python的tkinter教程,根据教程制作了用户登录注册页.基本功能为检查登录.注册.清明上河图观看网址http://news.sohu.com/s2015/qmsht/index.s ...
界面开发（3）--- PyQt5用户登录界面连接数据库
文章目录数据库账户注册账号登录找回密码为了实现用户登录界面的登录功能,我们必须建立一个数据库,并把账号和对应的密码,存储到数据库中.如果输入的账号和密码与数据库中的一致,那我们就允许用户登录 ...
html科幻效果,带科幻风格的纯CSS3用户登录界面设计
这是一款带有科幻风格的纯CSS3用户登录界面设计效果.它模拟科幻电影<钢铁侠>中斯塔克工业超级电脑的登录界面.该登录界面略带金属质感,通过一条无限运动的弧线绕圆动画来制作一些神秘科技色彩. ...
简单步骤，使用 Android studio 实现保存 QQ 账号密码，和简易 QQ 用户登录界面
利用 Android studio 2021 软件输出一个简易用户登录界面,拥有头像并且能够实现对自行输入的账号密码进行保存,文件名为 saveqq,功能实现对账号与密码的输入和存储,简单QQ界面布局 ...
html用户登录页面设计,简洁时尚的用户登录界面设计效果
这是一款简洁时尚的用户登录界面设计效果.该用户登录效果使用CSS和JS来完成,它使用元素滑动效果来制作登录表单动画,字体效果时尚大方,是非常不错的用户登录界面UI设计效果. 使用方法 HTML结构该 ...
界面开发（2）--- 使用PyQt5制作用户登陆界面
使用PyQt5制作用户登陆界面上篇文章已经介绍了如何配置PyQt5环境,这篇文章在此基础上展开,主要记录一下如何使用 PyQt5 制作用户登陆界面,并对一些基础操作进行介绍. 下面是具体步骤,一起来 ...
Bootstrap4+MySQL前后端综合实训-Day06-AM【eclipse详细配置Tomcat、开发web项目、servlet、连接MySQL8.0数据库、用户登录界面的编写与验证、分页查询】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录 eclipse重置视图 MySQL数据库--建数据库.建数据库 s ...
用户登录界面 - 记事本风格HTML代码
简介: 这是一个记事本风格的用户登录界面,非常逼真,HTML 代码已经改成了中文的,经过测试,兼容 IE6+.Firefox.Chrome 等浏览器. 优化了自适应问题. 喜欢的可以下载. 从dowe ...
php简单的登录界面,PHP实现简单用户登录界面
用PHP实现简单的用户登录界面,供大家参考,具体内容如下首先要实现用户登录界面需要一个html登录表单用户名: 密码: 重复密码: 然后开始按照流程图写PHP代码 if(trim($_POST[' ...

HTML制作用户登录界面

HTML制作用户登录界面相关推荐

最新文章

热门文章