网页css+html实现登录界面的分步奏操作详解+完整代码后期会完备python后端教程

话不多说，直接上才艺，源代码在最后面，有疑问的多去看看这些网站
html教程
 css教程
 python后端教程
html
1、新建一个网页

设置屏幕密度为高频，中频，低频自动缩放

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
1

在这里插入图片描述
2、编写登录界面基本内容body

                <input type="text" name="username" placeholder="用户名" >
                <input type="password" name="password" placeholder="密码">
                <div ><input type="submit" value="登陆">div>
1
2
3

在这里插入图片描述
css
1、建立css初始化位置

仔细观察网页变化和之前的
在这里插入图片描述

2、建立渐变色背景
.beijing个是这个div的css
background-image 属性为元素设置背景图像
linear-gradient设置渐变色

        .beijing {
            height: 100%;
            background-image: linear-gradient(to right, #6B8E23, #a6c1ee);
        }
1
2
3
4

<div class="beijing">
    div>
1
2

在这里插入图片描述
这时候我们发现之前的登陆界面不见了，因为被覆盖了我们把登录界面的代码复制到它的div里面即可

那有的同学说这个颜色好丑，怎么改呢我们回到css里面修改颜色的代码就好啦
这里是参照表格css颜色
在这里插入图片描述

再来修改一下登陆的窗口

        .chuangkou {
            background-color: #fff;
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
1
2
3
4
5
6
7
8
9
10
11

  <div class="chuangkou">div>
1

这个css没什么好讲的就是简单的一些位置定义了一下形状颜色为白色，其实真正去设计的话是有工具去生成的这里先不讨论这个有兴趣的去搜一下figma这个软件
在这里插入图片描述
这里也是老规矩把我们的那几个扔进这个div

接下来我们开始对这几个属性编写css
登录界面标题头部

.header {
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    line-height: 200px;
}
1
2
3
4
5
6

<div class="header">登陆界面div>
1

在这里插入图片描述
用户名密码
样式

            .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }
1
2
3
4
5
6
7
8
9
10

添加text-transform 属性控制文本的大小写。

             .input-item:placeholder {
            text-transform: uppercase;
        }
1
2
3

                <input type="text" name="username" placeholder="用户名" class="input-item">
                <input type="password" name="password" placeholder="密码"class="input-item">
1
2

在这里插入图片描述
登陆按钮

        .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #FF69B4, #F8F8FF);
            color: #fff;
        }
1
2
3
4
5
6
7
8

           <div ><input class="btn" type="submit" value="登陆">div>
1

在这里插入图片描述
添加一个注册链接

.msg {
    text-align: center;
    line-height: 88px;
}
   a {
    text-decoration-line: none;
    color: #abc1ee;
}
1
2
3
4
5
6
7
8

            <div class="msg">
                没有账户嘛？你可以尝试
                <a href="#">Sign upa>
            div>
1
2
3
4

在这里插入图片描述
完整代码

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;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .beijing {
            height: 100%;
            background-image: linear-gradient(to right, #1C95Fc, #F5F5DC);
        }
        .chuangkou {
            background-color: #fff;
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }
            .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }
             .input-item:placeholder {
            text-transform: uppercase;
        }
                .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #FF69B4, #F8F8FF);
            color: #fff;
        }
         .msg {
            text-align: center;
            line-height: 88px;
        }
           a {
            text-decoration-line: none;
            color: #abc1ee;
        }
    style>
head>
<body>
<div class="beijing">
    <div class="chuangkou">
        <div class="header">登陆界面div>
      <input type="text" name="username" placeholder="用户名" class="input-item">
      <input type="password" name="password" placeholder="密码"class="input-item">
                <div ><input class="btn" type="submit" value="登陆">div>
            <div class="msg">
                没有账户嘛？你可以尝试
                <a href="#">Sign upa>
            div>

    div>
    div>



body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

在这里插入图片描述

相关阅读:
清洁服务机器人---洗地机SOC SSD222开发经验总结
 网络安全（黑客）自学
 Spring Cloud 系列：Seata 中TCC模式具体实现
 VBA技术资料MF72：利用函数判断文件及工作表存在
 BFS之最短路径
 Spring MVC框架学习（五） ---- 传递参数
 Rviz 使用Arbotix控制机器人运动
 【Mysql】 InnoDB引擎深入- 内存结构之ChangeBuffer | Log Buffer
使命担当守护安全 | 中睿天下获全国海关信息中心感谢信
 全球十大优质炒黄金交易APP平台排名（信息汇总）
原文地址：https://blog.csdn.net/THREEFUCT/article/details/126175671