6款网站登录页(附带源码)

6款网站登录页

  • 效果图及部分源码
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
  • 领取源码
  • 下期更新预报

效果图及部分源码

1

在这里插入图片描述
部分源码

<style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .container {
            height: 100%;
            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
        }
        .login-wrapper {
            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, #a6c1ee, #fbc2eb);
            color: #fff;
        }
        .msg {
            text-align: center;
            line-height: 88px;
        }
        a {
            text-decoration-line: none;
            color: #abc1ee;
        }
    </style>

2

在这里插入图片描述
部分源码

<style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
            height: 100%;
        }
        .login {
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #282c34;
        }
        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
            color: #61dafb;
        }
        .container {
            height: 30px;
            width: 250px;
            position: absolute;
            left: 50%;
            top: 40%;
            transform: translate(-50%, -50%);
        }

        input {
            width: 100%;
            height: 100%;
            position: relative;
            outline: none;
            border: none;
            box-sizing: border-box;
            padding-left: 5px;
            background-color: #282c34;
            color: #61dafb;
            caret-color: #61dafb;
        }
        input::placeholder {
            color: #61dafb;
        }

        span {
            position: absolute;
            content: "";
            display: block;
            background-color: #61dafb;
            transition: transform .1s ease-in-out;
        }
        .top,
        .bottom {
            left: 0px;
            right: 0px;
            height: 2px;
        }
        .left,
        .right {
            top: 0px;
            bottom: 0px;
            width: 2px;
            transform: scaleY(0);
        }
        .top {
            top: 0px;
            transform: scaleX(0);
            transform-origin: left center;
            transition-delay: .2s;
        }
        .left {
            left: 0px;
            transform-origin: bottom center;
            transition-delay: .3s;
        }
        .bottom {
            bottom: 0px;
        }

3

在这里插入图片描述
部分代码

 #login_box {
      width: 20%;
      height: 400px;
      background-color: #00000060;
      margin: auto;
      margin-top: 10%;
      text-align: center;
      border-radius: 10px;
      padding: 50px 50px;
    }

    h2 {
      color: #ffffff90;
      margin-top: 5%;
    }

    #input-box {
      margin-top: 5%;
    }

    span {
      color: #fff;
    }

    input {
      border: 0;
      width: 60%;
      font-size: 15px;
      color: #fff;
      background: transparent;
      border-bottom: 2px solid #fff;
      padding: 5px 10px;
      outline: none;
      margin-top: 10px;
    }

4

在这里插入图片描述
部分源码

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html {
            height: 100%;
        }
        body {
            background-image: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186));
        }
        .login-container {
            width: 600px;
            height: 315px;
            margin: 0 auto;
            margin-top: 10%;
            border-radius: 15px;
            box-shadow: 0 10px 50px 0px rbg(59, 45, 159);
            background-color: rgb(95, 76, 194);
        }
        .left-container {
            display: inline-block;
            width: 330px;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            padding: 60px;
            background-image: linear-gradient(to bottom right, rgb(118, 76, 163), rgb(92, 103, 211));
        }
        .title {
            color: #fff;
            font-size: 18px;
            font-weight: 200;
        }
        .title span {
            border-bottom: 3px solid rgb(237, 221, 22);
        }

5

在这里插入图片描述
部分源码

<style>
		* {
			margin: 0;
			padding: 0;
		}

		a {
			text-decoration: none;
		}

		input,
		button {
			background: transparent;
			border: 0;
			outline: none;
		}

		body {
			height: 100vh;
			background: linear-gradient(#141e30, #243b55);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 16px;
			color: #03e9f4;
		}

		.loginBox {
			width: 400px;
			height: 364px;
			background-color: #0c1622;
			margin: 100px auto;
			border-radius: 10px;
			box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .6);
			padding: 40px;
			box-sizing: border-box;
		}

		h2 {
			text-align: center;
			color: aliceblue;
			margin-bottom: 30px;
			font-family: 'Courier New', Courier, monospace;
		}

6

在这里插入图片描述
部分源码

<style>
    :root {
      /* COLORS */
      --white: #e9e9e9;
      --gray: #333;
      --blue: #0367a6;
      --lightblue: #008997;

      /* RADII */
      --button-radius: 0.7rem;

      /* SIZES */
      --max-width: 758px;
      --max-height: 420px;

      font-size: 16px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    }

    body {
      align-items: center;
      background-color: var(--white);
      background: url("https://res.cloudinary.com/dbhnlktrv/image/upload/v1599997626/background_oeuhe7.jpg");
      /* 决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动。 */
      /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      display: grid;
      height: 100vh;
      place-items: center;
    }

领取源码

6款网站登录页源码领取地址:https://www.123pan.com/s/ji8kjv-aDPU3.html提取码:关注微信公众号祖龙科技工作室回复表登录页即可获取


下期更新预报

网站源码

  • 📢博客主页:孤客网络科技工作室官方账号
  • 📢欢迎点赞👍收藏⭐️留言 📝如有错误敬请指正!
  • 📢本文由孤客原创,若侵权联系作者,首发于CSDN博客
  • 📢停下休息的时候不要忘了别人还在奔跑,希望大家抓紧时间学习,全力奔赴更好的生活💻

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/638381.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Application Development using Large Language Models笔记

诸神缄默不语-个人CSDN博文目录 这是2023年NeurIPS Andrew Ng和Isa Fulford做的tutorial&#xff0c;关于如何用LLM来开发新产品的技术和思路&#xff1a;NeurIPS Tutorial Application Development using Large Language Models 文章目录 1. LLM基础2. 提示工程技巧3. 微调4.…

图片、视频画质增强变清晰工具分享(免费)

生活中可能会修一下模糊图片那么这就有一款用来修图片的管理工具&#xff0c;也有可能会修一下模糊的视频&#xff0c;在吾爱上有大佬开发了这么一款工具&#xff0c;免费的&#xff0c;不需要开任何VIP&#xff0c;我试了一下&#xff0c;好用&#xff0c;分享出来&#xff0c…

linux 上除了shell、python脚本以外,还有什么脚本语言用得比较多?

在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「 Linux的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;说到在 Linux下的编程&#xf…

TypeScript-泛型

泛型(Generics) 指在定义接口&#xff0c;函数等类型的时候&#xff0c;不预先指定具体的类型&#xff0c;而在使用的时候再指定类型的一种特性&#xff0c;使用泛型可以复用类型并且让类型更加灵活 泛型接口-interface 语法&#xff1a;在 interface 接口类型的名称后面使用…

如何使用Unity XR Interaction Toolkit

使用环境&#xff1a; Unity2021.3.21f XR Interaction Toolkit v3.0.0 各类函数可用的&#xff1a; 简单项目配置&#xff1a; 第一步&#xff0c;导包&#xff08;samples可以不用导这么多&#xff0c;两个就够了&#xff09;&#xff1a; 第二步&#xff0c;构建场景&a…

基于STM32实现智能空气质量监测系统

目录 文章主题环境准备智能空气质量监测系统基础代码示例&#xff1a;实现智能空气质量监测系统 配置传感器并读取数据数据处理与显示数据存储与传输应用场景&#xff1a;室内环境监测与空气质量控制问题解决方案与优化收尾与总结 1. 文章主题 文章主题 本教程将详细介绍如何…

Xline社区会议Call Up|在 CURP 算法中实现联合共识的安全性

为了更全面地向大家介绍Xline的进展&#xff0c;同时促进Xline社区的发展&#xff0c;我们将于2024年5月31日北京时间11:00 p.m.召开Xline社区会议。 欢迎您届时登陆zoom观看直播&#xff0c;或点击“阅读原文”链接加入会议&#xff1a; 会议号: 832 1086 6737 密码: 41125…

【人工智能】模型性能评估

模型性能衡量介绍 混淆矩阵 混淆矩阵(Confusion Matrix&#xff09; TP(真阳性)&#xff1a;预测为阳性&#xff0c;且预测正确。 TN(真阴性)&#xff1a;预测为阴性&#xff0c;且预测正确。 FP(伪阳性)&#xff1a;预测为阳性&#xff0c;但预测错误&#xff0c;又称型一误…

Generic Segmentation Offload(GSO)

Generic Segmentation Offload汉语意思是啥&#xff1f; Generic Segmentation Offload&#xff08;GSO&#xff09;的汉语意思是“通用分段卸载”。在网络通信中&#xff0c;GSO 是一种技术&#xff0c;用于在网络栈中将较大的传输单元分段为更小的单元&#xff0c;以提高网络…

Ai指令-公众号内训课:学会ai指令+公众号的底层逻辑(7节课)

课程目录 第一课:详解公众号的流量机制.mp4 第二课:快速搞定公众号号设化装修.mp4 第三课:一期学员直呼牛X的课程&#xff0c;正确的爆文利用姿势.mp4 第五课:颗粒度级别拆解AI公众号爆文.mp4 第六课:AI提示词进阶技巧课。提示词自动化.mp4 第七课.实操演示提示词撰写工作…

web自动化之PO模式

PO模式 1、为什么需要PO思想&#xff1f; 首先我们观察和思考一下&#xff0c;目前我们写的作业脚本的问题&#xff1a; 元素定位和操作动 作写到一起了&#xff0c;这就就会用导致一个问题&#xff1a; UI的页面元素比较容易变化的&#xff0c;所以元素定位和脚本操作写到一…

24-LINUX-UDP网络连接

一UDP协议特点 TCP 协议提供的是&#xff1a;面向连接、可靠的、字节流服务。使用 TCP 协议通信的双发必须 先建立连接&#xff0c;然后才能开始数据的读写。双方都必须为该连接分配必要的内核资源&#xff0c;以管理 连接的状态和连接上数据的传输。TCP 连接是全双工的&…

Controlnet作者放出新的大招 IC-Light,可以操控图像生成时的光照,对内容主体重新打光生成符合新背景环境光照的图片

IC-Light代表Impose Constant Light,是一个控制图像照明的项目。可以操控图像生成时的光照&#xff0c;对内容主体重新打光生成符合新背景环境光照的图片。这下商品图合成这种需要最大程度保持原有主体 ID 需求的最大的问题解决了。 目前&#xff0c;已经发布了两种类型的模型…

多线程、进程、线程五种状态、synchronized、volatile、Lock、CAS、死锁、ThreadLocal

1、并发编程 并发编程三要素 原子性&#xff1a;只一个操作要么全部成功&#xff0c;要么全部失败可见性&#xff1a;一个线程对共享变量的修改&#xff0c;其他线程能够立刻看到有序性&#xff1a;程序执行的顺序按照代码的先后顺序执行 synchronized&#xff0c;Lock解决原…

C++ 网络编程

一、Reactor 网络编程模型 reactor 是一个事件处理模型。网络处理:因为用户层并不知道 IO 什么时候就绪,所以将对 IO 的处理转化为对事件的处理。网络模型构成: 非阻塞 IO:操作 IO,如果 IO 未就绪,IO 函数会立刻返回。IO 多路复用:检测多路 IO 是否就绪。工作流程: 注册…

【设计模式】JAVA Design Patterns——Bridge(桥接模式)

&#x1f50d;目的 将抽象与其实现分离&#xff0c;以便二者可以独立变化。 &#x1f50d;解释 真实世界例子 考虑一下你拥有一种具有不同附魔的武器&#xff0c;并且应该允许将具有不同附魔的不同武器混合使用。 你会怎么做&#xff1f; 为每个附魔创建每种武器的多个副本&…

每周刷题第三期

个人主页&#xff1a;星纭-CSDN博客 系列文章专栏&#xff1a;Python 踏上取经路&#xff0c;比抵达灵山更重要&#xff01;一起努力一起进步&#xff01; 目录 题目一&#xff1a;环形链表 题目二&#xff1a;删除有序数组中的重复项 题目三&#xff1a;有效的括号 题…

【C语言】程序员自我修养之文件操作

【C语言】程序员自我修养之文件操作 &#x1f525;个人主页&#xff1a;大白的编程日记 &#x1f525;专栏&#xff1a;C语言学习之路 文章目录 【C语言】程序员自我修养之文件操作前言一.文件介绍1.1为什么使用文件1.2文件分类1.3二进制文件和文本文件 二.文件的打开和关闭2.…

docker-compose Install homer

homer前言 一个非常简单的静态主页,为您的服务器保持您的服务在手,从一个简单的yaml配置文件。 前提要求 安装 docker docker-compose 参考创建一键安装homer 脚本 homer安装位置/homerhomer 脚本位置/homer/assetshomer logo 图标/home/assets/iconshomer 端口80homer 颜色…

连续三次拒绝饭局的邀请,不会在有人请你吃饭!

人们对于饭局的态度各有不同&#xff0c;有的认为饭局纯属浪费时间&#xff0c;还有各种套路&#xff0c;应该尽量少参加。也有的人认为饭局是沟通感情的平台&#xff0c;有这样的机会应该尽量去参与。不管是否喜欢饭局&#xff0c;但总要时不时去参加的。如果你连续三次拒绝饭…