前言

在简单创建了一个MySQL数据库表后，我们进入第二阶段：HTML登录页面实现。

该片段需要具备一定的html知识

本章所用到的知识有：CSS和HTML（关于JvavScript的有关内容将在后面进行补充）

正文

登录界面我们日常见过许多，比如我们小时候常玩的造梦西游，它的主要内容就是输入账号，密码，一个登录按钮，以及账号注册的区域。

在这里我们主要简单实现两页面：一个登录页面，一个注册页面

先看下登录页面的效果

页面很简单，下面说下页面元素的布局：

首先是最内层的body区是一个大背景图，在大背景图前开一个div区域，这个div区域使用相同的背景图像，通过调节背景图位置与大背景图形成重叠，在加上虚化效果；div区中在开三个div分区，分别是火焰图部分，注册部分，和登录条框部分。

下面是示意图：

先放上源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>登录界面</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><style>body { /*大主背景图*/background-image: url("image/跳跃男孩.jpg");background-size: cover;background-position-x: center;}.layout { /*设置登录窗口部分的样式*/width: 900px;height: 530px;position: relative;box-sizing: border-box;margin-left: 190px;margin-top: 110px;padding: 1px;border: 8px solid silver;border-radius: 2px;background-image: url("image/跳跃男孩.jpg");background-size: 1300px;background-position-x: center;background-position-y: -125px;z-index: 1;}.layout::after { /*设置背景虚图层*/content: "";position: absolute;width: 100%;height: 100%;background: inherit;left: 0;top: 0;filter: blur(5px);z-index: 2;}.input { /*登录条框布局*/margin-top: 160px;margin-left: 250px;margin-right: 250px;}.input-group { /*调节账号和密码框图层*/position: relative;z-index: 3;}.input-group { /*调节两个输入框的之间距离*/padding: 15px;}button { /*设置登录按钮的图层分布和位置*/position: relative;z-index: 3;margin-top: 15px;margin-left: 120px;}.submit-default { /*设置登录按钮边界弧度*/border-radius: 5px;}.bz { /*火焰图标*/position: absolute;z-index: 3;font-size: 40px;margin-left: 405px;margin-top: 89px;}#注册 { /*注册超链接的设置*/position: absolute;z-index: 3;color: #222222;margin-top: 15px;margin-left: 725px;}</style></head><body><div class="layout"><div id="注册"><span>暂无账号？</span><a href="注册界面.html">立即注册</a></div><div class="bz"><font color="#22ffb9">&nbsp;</font><span class="glyphicon glyphicon-fire" aria-hidden="true"style="size: 50px"></span></div><div class="input"><form href="#"><div class="input-group"><span class="input-group-addon" id="basic-addon1"><label for="text1"><spanclass="glyphicon glyphicon-user" aria-hidden="true"></span>账号</label></span><input type="text" class="form-control" id="text1" placeholder="Username"aria-describedby="basic-addon1"></div><div class="input-group"><span class="input-group-addon" id="basic-addon2"> <label for="test2"><spanclass="glyphicon glyphicon-leaf" aria-hidden="true"></span>密码</label></span><input type="text" class="form-control" id="test2" placeholder="Usercipher"aria-describedby="basic-addon1"></div><div><button type="submit" class="submit-default" style="width: 140px;height: 45px"><font size=5px" style="align-content: center">登录</font></button></div></form></div>
</div>
</body>
</html>

在这里简单讲下实现过程中需要注意的点：

1.在实现背景虚化效果后，在虚化界面添加新的div时注意调剂z-index参数，否则会出现虚化层遮盖输入框组的现象。

2.在添加火焰图标时不能之间用一个div标签包裹图片，会造成图像无法显示。解决方法可以用一个span标签包裹一个空格，在把图片符加在后面就可解决这个问题

3.在调节虚化背景图片时，若margin不能到达效果，可以用background-position-x和 background-position-y来到达想要的效果。

4.导入的图片需和html文件在同一目录下，如同所示：

其次是注册页面的实现

先看下效果图：

依然是老套路，先是大背景图；我们把登录界面分了三大区域：新用户注册的提示，注册条框，立即登录的超链接。

我们采用了float流布局，将这三大块区分开，在中间的注册框我们用一个table表，把它分为两列，左边是提示文字，右边是输入框。最低端的按钮在单开一个div块，方便我们调节位置。

下面上源码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>注册界面</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><style>/*通过style引入CSS*/* {/*盒子模型,设置其窗体大小不会变*/margin: 0px;padding: 0px;box-sizing: border-box;}body { /*背景*/background: url("../练习/image/海滨云朵2.jpg") no-repeat center}.rg_layout {/*布局*/width: 900px;height: 530px;/*内外边界像素差，和之间的颜色：灰*/border: 8px solid #EEEEEE;/*内边界的背景色*/background-color: white;/*水平居中*//*距离上端的距离*/margin: 80px auto auto;}.rg_left {/* border: 1px solid red;*/float: left;}.rg_left > p:first-child { /*选择p:first-child上的父类选择器.rg_left*/color: rgba(89, 120, 231, 0.77);size: 20px;/*外边距*/margin: 15px;}.rg_left > p:last-child {color: #A6A6A6;size: 20px;}.rg_center .rg_from {float: left;margin-left: 100px;margin-top:40px;}.rg_right { /*已有账号*//* border: 1px solid red;*/float: right;margin: 15px;}#sex {letter-spacing: 15px;}.rg_right > p :first-child { /*立即登录*/color: #18d3e5;font-size: 14px;}.re_table_1 {font-size: 15px;text-align: right;height: 35px;color: #A6A6A6;}.re_table_2 {padding-left: 60px;}/*调节提示文字距离和大小*/input {text-indent: 6px;font-size: 11px;}#username, #password, #生日, #邮箱, #年龄, #class, #自我介绍 {width: 251px;height: 32px;border: 1px solid #A6A6A6;border-radius: 5px;}#取色器{width: 70px;/*margin-left: 30px;*/}#login {/*登录区样式设计*/width: 55px;height: 35px;/* margin-left: 150px;*/border-radius: 3px;border-color: gray;background-color: bisque;margin-left: 120px;}.button{/*按钮距离调控*/margin-left: 60px;}.submit-default{/*按钮样式设计*/margin-left: 70px;border-radius: 3px;border-color: silver;color:#222222;}</style>
</head>
<body><div class="rg_layout"><div class="rg_left"><p>新用户注册</p><p>USER REGISTER</p></div><div class="rg_center"><div class="rg_from"><form action="#" method="get"><table><tr><td class="re_table_1"><label for="username">用户名:</label></td><td class="re_table_2"><input type="text" name="username" placeholder="请输入用户名"  id="username"></td></tr><tr><td class="re_table_1"><label for="password">密&nbsp;&nbsp;&nbsp;码:</label></td><td class="re_table_2"><input type="password" name="password" placeholder="请输入密码" id="password"></td></tr><tr><td class="re_table_1"><label for="sex">性别:</label></td><td class="re_table_2" id="sex"><input type="radio" name="sex" value="male" checked>男<input type="radio" name="sex" value="female">女</td></tr><tr><td class="re_table_1"><label for="hobby">爱好:</label></td><td class="re_table_2" id="hobby"><input  type="checkbox" name="hobby" value="Java" checked>Java&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input class="hb" type="checkbox" name="hobby" value="Python">python&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input class="hb" type="checkbox" name="hobby" value="C++">C++</td></tr><tr><td class="re_table_1"><label for="取色器">你最喜欢的颜色:</label></td><td class="re_table_2"><input type="color" name="取色器" id="取色器"></td></tr><tr><td CLASS="re_table_1"><label for="生日"> 生日:</label></td><td CLASS="re_table_2"><input type="date" name="生日" id="生日"></td></tr><tr><td class="re_table_1"><label for="邮箱">邮箱:</label></td><td class="re_table_2"><input type="email" name="邮箱" placeholder="请输入邮箱"  id="邮箱"></td></tr><tr><td CLASS="re_table_1"><label for="年龄">年龄:</label></td><td CLASS="re_table_2"><input type="number" id="年龄" placeholder="请输入年龄"></td></tr><tr><td class="re_table_1"><label for="class">班级:</label></td><td class="re_table_2"><select name=class id="class"><option value=""><-- 请选择班级</option><option value="1">数科20-1班</option><option value="2">数科20-2班</option><option value="3">数科20-3班</option><option value="4">数科20-4班</option></select></td></tr><tr><td class="re_table_1"><label for="自我介绍">自我简介:</label></td><td class="re_table_2"><textarea cols="20" rows="3" id="自我介绍"> </textarea></td></tr><tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr><tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></table><div class="button"><button type="submit" class="submit-default" style="width: 80px;height: 40px"><fontsize=5px" style="align-content: center">注册</font></button><button type="button" class="submit-default" style="width: 80px;height: 40px"><fontsize=5px" style="align-content: center">退出</font></button></td></div></form></div></div><div class="rg_right"><p>已有账号?<a href="Login.html" >立即登录</a></p></div></div>
</body>
</html>

注册界面的知识相对基础，基本包含了我们日常常见的一些组件。

留在最后

在完成了登陆界面和注册界面，后期我们将通过JavaScript的知识来给页面增加些交互性。

并且补充完成一个登录后的窗口，在那里我们将接触更多关于页面设计的样式

欢迎各位持续关注，若有什么问题和建议，欢迎评论区留言

用户登录项目第二期——HTML登录页面实现相关推荐

反重力引擎项目-第二期-电子船工程
很多年前,我在ITEYE的博客上发布了反重力引擎的设计图,这个设计图是反重力引擎的第一个计划工程这种飞船的动力是建立在磁场能量的基础上的...属于第一代反重力引擎现在,系统升级了,需要更加先进的动 ...
鸿蒙公测报名表填写,鸿蒙公测第二期报名公测版_华为鸿蒙os2.0第二期报名申请内测版 - 风云下载...
鸿蒙公测第二期报名公测版是给华为用户提供鸿蒙系列第二期报名入口.这里第一期适配的机型毕竟是有限的,经过测试之后在各种性能上都完美超越了安卓.所以开放了更多机型和入口,只要是华为的用户,不管是手机还是平 ...
idea 启动界面导入项目_如何为您的项目启动有效的登录页面
idea 启动界面导入项目 by Christian-Peter Heimbach 通过克里斯蒂安·彼得·海姆巴赫如何为您的项目启动有效的登录页面 (How to launch an effecti ...
仿牛客网项目第二章:开发社区登录模块（详细步骤和思路）
目录 1. 发送邮件 1.0 三步走 1.1 邮箱设置 1.2 Spring Email 1.3 模板引擎 1.4 发送邮件的过程 1.5 检验发送邮件的过程 2. 开发注册功能 2.0 注册功能的步 ...
Java 实现用户登录项目
Java 实现用户登录项目需求: 在页面中要求输入用户名和密码,并显示验证码.在三项都通过验证后显示登录成功否则登录失败分析; 在验证用户名密码之前应该先判断验证码是否通过验证,防止多次连接数据库 ...
Django项目实战——6—(退出登录、判断用户是否登录、QQ登录、QQ登录工具QQLoginTool、本机绑定域名)
1.退出登录注册界面跳转到登陆界面:templates/register.html 前端注册界面 {# 跳转到登陆界面 #}<a href="{% url 'users:login' ...
06.简书项目实战三：详情页面和登录功能实现
简书项目实战三:详情页面和登录功能实现 1. 详情页面布局这部分的布局比之前的简单多了,就一个标题加上主要内容而已. export default class Detail extends Comp ...
【Android项目实战 | 从零开始写app(十三)】实现用户中心模块清除token退出登录信息修改等功能
五一后,被ji金伤了,哇呜呜,还是得苦逼老老实实打工写代码,看下面吧本篇实现效果: 实现登录用户名展示到用户中心页面上,并且页面有个人信息,订单列表,修改密码,意见反馈发送到服务端,前面登录后,通过 ...
【django】用户登录模块实现步骤（三）之QQ用户是否绑定项目用户的处理和QQ用户绑定项目用户功能实现【34】
一.判断openid是否绑定过⽤户使⽤openid查询该QQ⽤户是否在芒果头条中绑定过⽤户. openid已绑定⽤户的处理: 如果openid已绑定芒果头条⽤户,直接⽣成状态保持信息,登录成功,并重 ...
用户信息管理项目练习——登录界面，增删改
目录引言项目需求代码整体结构 web Servlet Dao domin service utils 功能登录功能 User类 UserDaoImp中的方法 UserServiceImp中的方 ...

用户登录项目第二期——HTML登录页面实现

前言

正文

其次是注册页面的实现

用户登录项目第二期——HTML登录页面实现相关推荐

最新文章

热门文章