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博客
  • 📢停下休息的时候不要忘了别人还在奔跑,希望大家抓紧时间学习,全力奔赴更好的生活💻

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

搜索引擎的设计与实现(四)

目录 6 系统测试 6.1测试重要性 6.2测试用例 结 论 参 考 文 献 前面内容请移步 搜索引擎的设计与实现&#xff08;三&#xff09; 免费源代码&毕业设计论文 搜索引擎的设计与实现 6 系统测试 6.1测试重要性 该项目是在本地服务器上进行运行和调试&#xff0c;…

Spring6基础笔记

Spring6 Log4j2 1、概述 1.1、Spring是什么&#xff1f; Spring 是一款主流的 Java EE 轻量级开源框架 &#xff0c;Spring 由“Spring 之父”Rod Johnson 提出并创立&#xff0c;其目的是用于简化 Java 企业级应用的开发难度和开发周期。Spring的用途不仅限于服务器端的开发…

面试准备-八股【面试准备】

面试准备-八股【面试准备】 Java基础解决hash冲突的方法try catch finallyException与Error的包结构OOM你遇到过哪些情况&#xff0c;SOF你遇到过哪些情况线程有哪些基本状态?Java IO与 NIO的区别堆和栈的区别对象分配规则notify()和notifyAll()有什么区别&#xff1f;sleep()…

足球走地全自动化操作软件实现过程

本次采用selenium实现自动化操作的流程 打开浏览器录入账号密码等待数据请求&#xff08;监听&#xff09;有新数据&#xff0c;进行自动化操作通过homeName搜索&#xff0c;找到对应数据找到对应的类型&#xff08;让、大小…&#xff09;找到对应的盘口输入数量提交 附登录…

C#编程-.NET Framework使用工具类简化对象之间的属性复制和操作

在C#编程中&#xff0c;对象之间的属性复制和操作是一个常见的需求。为此&#xff0c;.NET Framework提供了多种实用工具库&#xff0c;如AutoMapper、ValueInjecter和ExpressMapper。这些库通过简化代码&#xff0c;提高了开发效率。本文将介绍这些工具库&#xff0c;比较它们…

《我的阿勒泰》观后感(一、什么叫做有用)

通过央视热播短剧《我的阿勒泰》&#xff0c;认识了李娟老师。同时也认识了她的作品&#xff0c;值得推荐。 生命并不荒凉&#xff0c;它是一种安静的绝美。 生活&#xff0c;如同一个巨大的迷宫&#xff0c;充满了未知和变数。有时&#xff0c;我们会在其中迷失方向&#xf…

线性规划库PuLP使用教程

Python求解线性规划——PuLP使用教程 简洁是智慧的灵魂&#xff0c;冗长是肤浅的藻饰。——莎士比亚《哈姆雷特》 文章目录 一、说明二、安装 PuLP 库三、线性规划简介3.1 线性规划3.1.1 高考题目描述3.1.2 基本概念 3.2 整数规划3.2.1 题目描述[3]3.2.2 解题思路 四、求解过程…

五分钟”手撕“图书管理系统

前言&#xff1a; 图书馆管理系统需要结合JavaSE的绝大部分知识&#xff0c;是一个很好的训练项目。 为了让大家更加方便的查阅与学习&#xff0c;我把代码放开头&#xff0c;供大家查询。 还有对代码的分析&#xff0c;我将以类为单位分开讲解。 目录 全部代码 Main类 Us…

智慧校园(安校易)管理系统 FileUpProductupdate.aspx 任意文件上传漏洞复现

0x01 产品简介 “安校易”是银达云创公司基于多年教育市场信息化建设经验沉淀,经过充分的客户需求调研,并依据国家“十三五”教育信息化建设规范而推出的综合互联网+教育信息化解决方案。“安校易”以物联网技术为基础,以学生在校“学食住行”管理为中心,将消费管理、门禁…

头歌01 -部分背包

蜜雪冰城店要举行一场调制饮品比赛。具体说明如下&#xff1a; 1&#xff09;参赛者拥有容量为800ml的杯子&#xff0c;可任选图2中的饮品进行混合&#xff1b;说明&#xff1a;图2中的饮品价格和体积已确定。 图2 2&#xff09;调制饮品价格为各所使用饮料的价格之和&#xff…

spring boot集成Knife4j

文章目录 一、Knife4j是什么&#xff1f;二、使用步骤1.引入依赖2.新增相关的配置类3.添加配置信息4.新建测试类5. 启动项目 三、其他版本集成时常见异常1. Failed to start bean ‘documentationPluginsBootstrapper2.访问地址后报404 一、Knife4j是什么&#xff1f; 前言&…

链游:区块链技术的游戏新纪元

随着区块链技术的快速发展&#xff0c;越来越多的行业开始探索与其结合的可能性&#xff0c;其中&#xff0c;游戏行业与区块链的结合尤为引人注目。链游&#xff0c;即基于区块链技术的游戏&#xff0c;正以其独特的优势&#xff0c;为玩家带来全新的游戏体验。本文将对链游进…

算法打卡 Day13(栈与队列)-滑动窗口最大值 + 前 K 个高频元素 + 总结

文章目录 Leetcode 239-滑动窗口最大值题目描述解题思路 Leetcode 347-前 K 个高频元素题目描述解题思路 栈与队列总结 Leetcode 239-滑动窗口最大值 题目描述 https://leetcode.cn/problems/sliding-window-maximum/description/ 解题思路 在本题中我们使用自定义的单调队列…

监控上网的软件有哪些?含泪推荐的电脑监控软件

监控上网的软件有很多&#xff0c;企业选择的时候应该遵循什么样的原则呢&#xff1f;鄙人愚见&#xff0c;认为以下四项原则是选择监控软件时首要考虑的。 1、功能需求&#xff1a; 监控软件不应该只是起到控制上网的作用&#xff0c;因为一些泄密行为可能是通过USB接口、打印…

如何在 Jupyter Notebook 中切换/使用 conda 虚拟环境?

参考文章&#xff1a; 【最全指南】如何在 Jupyter Notebook 中切换/使用 conda 虚拟环境&#xff1f;_多个conda环境 notebook用的哪个-CSDN博客 感谢这篇文章博主的解答&#xff0c;成功解决了我的难题。以下做一些具体的操作方法以及心得体会&#xff1a; 这里我使用的这篇…

MySQL主从复制(四):主备切换

一主多从结果&#xff1a; 图中&#xff0c; 虚线箭头表示的是主备关系&#xff0c; 也就是A和A’互为主备&#xff0c; 从库B、 C、 D指向的是主库A。 一主多从的设置&#xff0c; 一般用于读写分离&#xff0c; 主库负责所有的写入和一部分读&#xff0c; 其他的读请求则由从…

网络传输层

叠甲&#xff1a;以下文章主要是依靠我的实际编码学习中总结出来的经验之谈&#xff0c;求逻辑自洽&#xff0c;不能百分百保证正确&#xff0c;有错误、未定义、不合适的内容请尽情指出&#xff01; 文章目录 1.端口号的基础2.传输层两协议2.1.UDP 协议2.1.1.协议结构2.1.2.封…

【Vue2.x】props技术详解

1.什么是prop&#xff1f; 定义&#xff1a;组件标签上注册的一些自定义属性作用&#xff1a;向子组件传递数据特点 可以传递任意数量的prop可以传递任意类型的prop 2.prop校验 为了避免乱传数据&#xff0c;需要进行校验 完整写法 将之前props数组的写法&#xff0c;改为对象…

【软件测试】Selenium + Chrome UI自动化环境搭建

文章目录 自动化测试 Selenium Chrome 环境搭建1、下载Chrome 浏览器2、取消Chrome浏览器自动更新3、下载ChromeDriver4、测试环境是否搭建成功 自动化测试 Selenium Chrome 环境搭建 1、下载Chrome 浏览器 https://www.slimjet.com/chrome/google-chrome-old-version.php …

YOLOv8_seg的训练、验证、预测及导出[实例分割实践篇]

实例分割数据集链接,还是和目标检测篇一样,从coco2017val数据集中挑出来person和surfboard两类:链接:百度网盘 请输入提取码 提取码:3xmm 1.实例分割数据划分及配置 1.1实例分割数据划分 从上面得到的数据还不能够直接训练,需要按照一定的比例划分训练集和验证集,并按…