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.mzph.cn/pingmian/14410.shtml

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

相关文章

[实用技巧]Unity中,Sprite和SpriteRenderer的实用小贴士

在使用Unity开发2D游戏时&#xff0c;Sprite和SpriteRenderer组件提供了许多功能&#xff0c;可以帮助你提高开发效率和游戏质量。以下是一些使用技巧&#xff0c;可以帮助你事半功倍哦&#xff1a; 1. 使用Sprite Atlas 为了优化性能和内存使用&#xff0c;建议将多个Sprite…

TCP/IP 协议

定义:网络通讯协议 应用层:应用程序之间相互沟通的层 传输层:提供了数据传送&#xff0c;应用程序之间的通信服务网络互连层:负责提供基本的数据封包传送功能&#xff0c;让每一块数据包都能够达到目的主机。网络接口层:接收数据并进行传输 IP地址分类 lpv4(地址已经枯竭)四段数…

ipad协议849最新版

ipad协议其实就是模拟ipad端微信的人工操作&#xff0c;跟微信服务器通信。协议的关键点主要是PB协议、mmtls、06加密算法、rqt算法、aes加密、rsa加密等&#xff0c;只要把这些点拿下&#xff0c;就可以模拟官方微信的所有功能了&#xff0c;还可以模拟android、pc、mac端的登…

flutter开发实战-美颜前后对比图效果实现

flutter开发实战-美颜前后对比图效果实现 最近使用代码中遇到了图片前后对比&#xff0c;这里使用的是CustomClipper来实现 一、CustomClipper 我们实现CustomClipper子类来实现美颜后的图片裁剪功能 getClip()是用于获取剪裁区域的接口&#xff0c;由于图片大小是6060&am…

Flash与EEPROM

文章目录 1. 分类2. 工作原理2.1 擦除操作2.2 写入操作 3. 参考资料 1. 分类 2. 工作原理 在存储数据之前&#xff0c;先擦除存储区域&#xff08;写成全1&#xff09;&#xff0c;进行存储时&#xff0c;将对应位写为0。 注&#xff1a;这里编程不能反向&#xff0c;若写错了…

golang 例子编写一个简单的评论接口

在Go语言中编写一个简单的评论接口&#xff0c;我们可以使用标准库net/http来创建HTTP服务器&#xff0c;并假设我们将评论数据存储在一个内存中的映射&#xff08;map&#xff09;里作为示例。这个例子将展示如何创建两个基本的HTTP端点&#xff1a;一个用于获取所有评论&…

嵌入式岗位,你有能力,你同样可以拿到高薪资

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

React项目知识积累(三)

1.primary-color 公共样式 less文件中的primary-color&#xff0c;会在config.js中的theme中统一写,方便统一更改。 config.js: theme{"primary-color":"#f0f0f0"&#xff0c;"font-size":"16px", }less: .classname{color:primary-…

用手机打印需要下载什么软件

在快节奏的现代生活中&#xff0c;打印需求无处不在&#xff0c;无论是工作文件、学习资料还是生活小贴士&#xff0c;都可能需要一纸呈现。然而&#xff0c;传统的打印方式往往受限于时间和地点&#xff0c;让人倍感不便。今天&#xff0c;就为大家推荐一款便捷又省钱的手机打…

做OZON怎么选择物流,OZON物流Xingyuan

随着跨境电商的蓬勃发展&#xff0c;OZON作为俄罗斯领先的电商平台&#xff0c;吸引了大量中国卖家入驻。然而&#xff0c;物流作为跨境电商的关键环节&#xff0c;其选择对于卖家来说至关重要。本文将围绕“做OZON怎么选择物流”这一问题&#xff0c;深度解析OZON物流Xingyuan…

数仓建模—数据模型的 10 个常见错误

数仓建模—数据模型的 10 个常见错误 1 将模式设计视为一次性项目 构建数据资产是一个持续的过程。随着您的分析需求随着时间的推移而变化,架构也必须进行调整。将数据建模视为一次性活动是不现实的。想想那些因为源系统之一的数据结构发生变化而不得不更改列名、数据类型,…

“云加”万里信,共赴山海约,解密协同云官网设计之路

门户的设计改版是怎样的&#xff1f;本文从浪潮海岳云加案例出发&#xff0c;手把手带你认识完整系统的门户设计升级。 一、升级背景 1、云加官网作为云加产品对外唯一官方门户&#xff0c;承载整个云加业务售前及售中的核心渠道&#xff0c;是用户接触云加产品的重要渠道之一…

解决GoLand无法Debug

goland 调试的的时候提示如下错误 WARNING: undefined behavior - version of Delve is too old for Go version 1.22.3 (maximum supported v 其实个原因是因为正在使用的Delve调试器版本太旧&#xff0c;无法兼容当前的Go语言版本1.22.3。Delve是Go语言的一个调试工具&#…

汽车标定技术(二十一)--英飞凌TC3xx的OLDA怎么玩?(1)

目录 1.英飞凌提出的OLDA是什么? 2.小结 1.英飞凌提出的OLDA是什么? 在研究TC3xx的内部总线互联时,偶然发现了OLDA(OnLine Data Acquisition),看名字就容易猜到,这个大概率是和标定测量系统有关。进一步了解OLDA的描述,更加好奇了: The OLDA is an address space whe…

构建稳健、高效与安全的企业级API网关

在现代企业信息化建设中&#xff0c;各种微服务架构系统以及不同类型的管理系统广泛兴起&#xff0c;平台中的数据安全逐渐成为企业重视的部分&#xff0c;在iPaaS系统中&#xff0c;一个名为“企业级API网关”的功能出现在大众眼中&#xff0c;随着企业信息化建设的不断深入&a…

vue3+ts+vant4 实现购物车 前端代码

一、功能效果 二、前端代码 购物车的vue代码 <template><van-nav-bar left-text"返回" title"购物车" click-left"onClickLeft"><template #right><van-popover v-model:show"showPopover" placement"bot…

Transormer(2)-位置编码

位置编码公式 偶数位置用sin,奇数位置用cos. d_model 表示token的维度&#xff1b;pos表示token在序列中的位置&#xff1b;i表示每个token编码的第i个位置&#xff0c;属于[0,d_model)。 torch实现 import math import torch from torch import nn from torch.autograd im…

移动云ECS主机:未来云计算的驱动力

文章目录 前言一、移动云云主机ECS云主机ECS产品优势云主机ECS产品功能云主机ECS应用场景 二、移动云云主机ECS选购三、移动云云主机ECS配置四、移动云云主机ECS牛刀小试五、移动云云主机ECS安装部署消息中间件RocketMQ云主机ECS安装RocketMQ云主机ECS配置RocketMQ云主机ECS启动…

ubuntu22部署Docker私有仓库Harbor (http https方式)

harbor日志&#xff1a;/var/log/harbor 前置安装配置 需先安装docker和docker-compose&#xff1a; 0.配置清华大学apt源并安装docker #信任 Docker 的 GPG 公钥: sudo apt-get install ca-certificates curl gnupg curl -fsSL https://download.docker.com/linux/ubunt…

网络安全快速入门(十五) linux用户管理

14.1 前言 前面我们已经大概了解了Linux的网络链接&#xff0c;今天我们来看看Linux用户管理的一些基础操作&#xff0c;话不多说&#xff0c;我们来开始吧&#xff01;&#xff01; 14.2 用户的基础知识 我们先了解一些有关linux用户的一些基础知识&#xff0c;我们从Linux用…