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

最新推荐文章于 2024-05-12 16:02:18 发布

iheanu_

最新推荐文章于 2024-05-12 16:02:18 发布

阅读量1.4w

点赞数 18

分类专栏：用户登录案例 HTML 文章标签： html css3

本文链接：https://blog.csdn.net/m0_52155263/article/details/119463552

版权

前言

在简单创建了一个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:

最低0.47元/天解锁文章

iheanu_

关注

18
点赞
踩
174

收藏

觉得还不错? 一键收藏
5
评论
用户登录项目第二期——HTML登录页面实现

前言在简单创建了一个MySQL数据库表后，我们进入第二阶段：HTML登录页面实现。该片段需要具备一定的html知识本章所用到的知识有：CSS和HTML（关于JvavScript的有关内容将在后面进行补充）正文登录界面我们日常见过许多，比如我们小时候常玩的造梦西游，它的主要内容就是输入账号，密码，一个登录按钮，以及账号注册的区域。在这里我们主要简单实现两页面：一个登录页面，一个注册页面先看下登录页面的效果页面很简单，下面说下页面元素的布局：首先是最内层的body区.
复制链接

扫一扫