首页 > 编程语言 >高颜值好看的登录页面(附源码)

高颜值好看的登录页面(附源码)

时间：2024-08-24 14:24:34浏览次数：9  
标签：size 高颜值 color width 源码 background font border 页面

1

 

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>登录</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body>

<img class="bgone" src="https://cdn.nlark.com/yuque/0/2024/jpeg/314488/1718354704713-c94708ba-d149-475a-aa70-fb55246f167b.jpeg" />
<img class="pic" src="https://cdn.nlark.com/yuque/0/2024/png/314488/1718354709316-96ca7b43-ca8c-48f1-9ed3-31d5ad41d71d.png" />

<div class="table">
  <div class="wel">某某 后台登录</div>
  <div class="wel1">MOU MOU XI TONG HUO TAI DENG LU</div>
  <div class="user">
    <div id="yonghu" style=""></div>
    <input type="text" name="" placeholder="用户名" />
  </div>      
  <div class="password">
    <div id="yonghu"></div>
    <input type="password" name="密码" placeholder="●●●●●●"/>
  </div>
  <input class="btn" type="button" name="登录" value="登录" />
</div>

</body>
</html>
*{
    font-family: "微软雅黑";
    font-size: 16px;
    border: 0;
    padding: 0;
    margin: 0;
    color: #666;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.bgone{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;right: 0;left: 0;bottom: 0;margin: auto;
}
.pic{
  width: 492px;
  height: auto;
  position: absolute;
  top:173px;right: 453px;left: 0;bottom: 0;margin: auto;
  z-index: 99999;
}
.table{
  background-color: #FFFFFF;
  width: 960px;
  height: 465px;
  position: absolute;
  top:20%;right: 0;left: 0;bottom: 0;margin: auto;
}
.password{
     position: absolute;
     top: 12.8rem;
     right: 4rem;
     display: flex;
}
.btn{
    position: absolute;
    top: 18.5rem;
    right: 3.9rem;
    border: none;
    color: #fff;
    width: 373px;
    text-align: center;
    background-color: #1592ef;
    text-indent: 0rem;
    border-radius: 10px;
    text-shadow:2px 2px 1px rgba(0, 0, 0, 0.2);
    box-shadow:2px 2px 1px rgba(0, 0, 0, 0.2);
    font-size:20px ;
    height: 50px;
}

.wel{
  width: 960px;
  height: 35px;
  color: #fff;
    font-size: 30px;
    position: absolute;
    top: -7rem;
    text-align: center; 
   
    
}.wel1{
  width: 960px;
  height: 35px;
  color: #fff;
    font-size: 12.38px;
    position: absolute;
    top: -4rem;
    text-align: center; 
   
}
input{ 
     height: 55px;
     width: 373px;
     text-indent: 55px;
     outline:none;
     background: #eef6fd;
     border-bottom:2px #d6e7fa solid ;
}
.password input{
  border: 0;
}
.user{
   position: absolute;
     top: 7.8rem;
     right:4rem;
     display: flex; 
}

#yonghu img{
  height: 30px;
  position: absolute;
  left: 10px;
  top: 13px;
}

2

<!DOCTYPE html>
<html>

<!-- Head -->

<head>
  <title>登录表单</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
  <style>
    
  </style>
</head>

<body>

  <h1>登录表单</h1>

  <div class="container w3layouts agileits">

    <div class="login w3layouts agileits">
      <h2>登 录</h2>
      <form action="#" method="post">
        <input type="text" Name="Userame" placeholder="用户名" required>
        <input type="password" Name="Password" placeholder="密码" required>
      </form>
      <ul class="tick w3layouts agileits">
        <li>
          <input type="checkbox" id="brand1" value>
          <label for="brand1"><span></span>记住我</label>
        </li>
      </ul>
      <div class="send-button w3layouts agileits">
        <form>
          <input type="submit" value="登 录">
        </form>
      </div>
      <a href="#">记住密码?</a>
      <div class="social-icons w3layouts agileits">
        <p>- 其他方式登录 -</p>
        <ul>
          <li class="qq"><a href="#">
              <span class="icons w3layouts agileits"></span>
              <span class="text w3layouts agileits">QQ</span></a></li>
          <li class="weixin w3ls"><a href="#">
              <span class="icons w3layouts"></span>
              <span class="text w3layouts agileits">微信</span></a></li>
          <li class="weibo aits"><a href="#">
              <span class="icons agileits"></span>
              <span class="text w3layouts agileits">微博</span></a></li>
          <div class="clear"> </div>
        </ul>
      </div>
      <div class="clear"></div>
    </div>

    <div class="register w3layouts agileits">
      <h2>注 册</h2>
      <form action="#" method="post">
        <input type="text" Name="Name" placeholder="用户名" required>
        <input type="text" Name="Email" placeholder="邮箱" required>
        <input type="password" Name="Password" placeholder="密码" required>
        <input type="text" Name="Phone Number" placeholder="手机号码" required>
      </form>
      <div class="send-button w3layouts agileits">
        <form>
          <input type="submit" value="免费注册">
        </form>
      </div>
      <div class="clear"></div>
    </div>

    <div class="clear"></div>

  </div>

</body>
<!-- //Body -->

</html>

 这里是部分源码，源码太长了，需要的私聊我吧

ul.tick {
    float: left;
    list-style: none;
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
}

ul.tick li input[type="checkbox"] {
    display: none;
}

ul.tick li input[type="checkbox"]+label {
    position: relative;
    padding-left: 30px;
    border: #F0F8FF;
    display: inline-block;
    font-size: 13px;
    color: #EEE;
}

ul.tick li input[type="checkbox"]+label span:first-child {
    width: 17px;
    height: 17px;
    display: inline-block;
    border: 1px solid #EEE;
    position: absolute;
    top: -3px;
    left: 0;
    bottom: 4px;
}

ul.tick li input[type="checkbox"]:checked+label span:first-child:before {
    content: "";
    background: url(../images/tick.png)no-repeat;
    position: absolute;
    left: 3px;
    top: 3px;
    font-size: 10px;
    width: 10px;
    height: 10px;
}

.social-icons {
    margin-top: 20px;
    text-align: center;
}

.social-icons p {
    color: #CCC;
    margin-bottom: 15px;
}

.social-icons ul li {
    float: left;
    width: 32.9%;
}
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
li.twt {
    margin: 0 2px;
}

.social-icons ul li a {
    display:block;
}

.social-icons ul li a span {
    vertical-align: middle;
    color: #fff;
    font-size: 15px;
}

.social-icons ul li span.icons {
    background: url("../images/i1.png") no-repeat center;
    width: 30px;
    height: 30px;
    display: inline-block;
}

.social-icons ul li.weixin span.icons {
    background: url("../images/weixin.png") no-repeat;
    background-size: 100%;
}
.social-icons ul li.qq span.icons {
    background: url("../images/QQ.png") no-repeat;
    background-size: 100%;
}
.social-icons ul li.weibo span.icons {
    /*--w3layouts--*/
    /*--agileits--*/
    background: url("../images/weibo.png") no-repeat;
    background-size: 100%;
}

.social-icons ul li a:hover span.icons {
    transform: rotatey(360deg);
    -webkit-transform: rotatey(360deg);
    -o-transform: rotatey(360deg);
    -moz-transform: rotatey(360deg);
    -ms-transform: rotatey(360deg);
    transition: .5s all;
}

input[type="text"], input[type="password"] {
    width: 93.4%;
    margin-bottom: 20px;
    padding: 10px;
    float: left;
    background-color: transparent;
    border: none;
    font-size: 15px;
    border-bottom: 1px solid rgba(238, 238, 238, 0.41);
    outline: none;
    color: #FFF;
}

.send-button {
    margin-bottom: 20px;
}

.send-button input[type="submit"] {
    width: 60%;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 100;
    background-color: transparent;
    color: #CCC;
    border: 1px solid rgba(238, 238, 238, 0.41);
    border-width: thin;
    cursor: pointer;
    outline: none;
    transition:0.5s all;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    -o-transition:0.5s all;
    -ms-transition:0.5s all;
    text-decoration: none;
}

3

 

<!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.0" />
    <title>登陆页面</title>
    <style>
        body {
          padding: 0;
          margin: 0;
          height: 100vh;
          display: flex;
          justify-content: center;
          background-image: linear-gradient(#a18cd1 0%, #fbc2eb 100%);
          background-size: cover;
          flex: 1;
          align-items: center;
        }
        .login {
          text-align: center;
          margin: 0 auto;
          width: 600px;
          height: 520px;
          background-color: rgba(87, 86, 86, 0.2);
          border-radius: 25px;
          box-shadow: 5px 2px 35px -7px #ff9a9e;
        }
        .login h2 {
          margin-top: 40px;
          color: aliceblue;
          font-weight: 100;
        }
        .login_form {
          padding: 20px;
        }
        .login_form span {
          color: rgb(131, 220, 255);
          font-size: 18px;
          font-weight: 100;
        }
        .login_form input {
          background-color: transparent;
          width: 320px;
          padding: 2px;
          text-indent: 2px;
          color: white;
          font-size: 20px;
          height: 45px;
          margin: 30px 30px 30px 5px;
          outline: none;
          border: 0;
          border-bottom: 1px solid rgb(131, 220, 255);
        }
        input::placeholder {
          color: #fbc2eb;
          font-weight: 100;
          font-size: 18px;
          font-style: italic;
        }
        .login_btn {
          background-color: rgba(255, 255, 255, 0.582);
          border: 1px solid rgb(190, 225, 255);
          padding: 10px;
          width: 240px;
          height: 60px;
          border-radius: 30px;
          font-size: 30px;
          color: rgb(100, 183, 255);
          font-weight: 100;
          margin-top: 15px;
        }
        .login_btn:hover {
          box-shadow: 2px 2px 15px 2px rgb(190, 225, 255);
          background-color: transparent;
          color: white; /* 选择动画 */
          animation: login_mation 0.5s;
        } /* 定义动画 */
        @keyframes login_mation {
          from {
            background-color: rgba(255, 255, 255, 0.582);
            box-shadow: 0px 0px 15px 2px rgb(190, 225, 255);
          }
          to {
            background-color: transparent;
            color: white;
            box-shadow: 2px 2px 15px 2px rgb(190, 225, 255);
          }
        }
      </style>
    
  </head>
  <body>
    <div class="login">
      <h2>登陆\注册</h2>
      <div class="login_form">
        <span>账号：</span>
        <input type="text" placeholder="请输入账号" />
        <br />
        <span>密码：</span>
        <input type="password" placeholder="请输入密码" />
      </div>
      <div class="btn">
        <button class="login_btn" onclick="login()">
          登 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录
        </button>
      </div>
    </div>
  </body>
  <script>
    function login() {
      console.log("登录按钮点击了");
    }
  </script>
  
</html>

标签：size,高颜值,color,width,源码,background,font,border,页面
From： https://blog.csdn.net/YN2000609/article/details/141459417

相关文章

  • Go 互斥锁 Mutex 源码分析(二)
    原创文章，欢迎转载，转载请注明出处，谢谢。0.前言在Go互斥锁Mutex源码分析(一)一文中分析了互斥锁的结构和基本的抢占互斥锁的场景。在学习锁的过程中，看的不少文章是基于锁的状态解释的，个人经验来看，从锁的状态出发容易陷入细节，了解锁的状态转换过一段时间就忘，难以做到真正的......
  • 零基础国产GD32单片机编程入门(一)GD32单片机GPIO输出Keil5工程创建含源码
    文章目录一.概要二.GD32单片机GPIO内部结构图三.GD32单片机GPIO输入输出信号流向四.GD32单片机GPIO引脚的复用以及重映射五.从零开始创建一个GD32F103C8T6单片机GPIO输出驱动LED灯例程六.工程源代码下载七.小结一.概要GPIO(generalporposeintputoutput):单片机通......
  • 【排序算法】八大排序（下）（c语言实现）（附源码）
    ......
  • 052、Vue3+TypeScript基础，页面通讯之一个组件中多个v-model数据绑定
    01、main.js代码如下：//引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//引入emitter用于全局事件总线//importemitterfrom'@/utils/emitter'constapp=createApp(App);//App.vue的根元素id为......
  • Java计算机毕业设计学生综合成绩测评系统（开题报告+源码+论文）
    本系统（程序+源码）带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景：在当今教育信息化快速发展的时代背景下，学生综合成绩测评系统已成为高等教育管理不可或缺的一部分。随着学生数量的增长、课程体系的复杂化以及教育评......
  • Java计算机毕业设计校园资源共享平台（开题报告+源码+论文）
    本系统（程序+源码）带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着高等教育规模的持续扩大，校园内资源分配不均与闲置浪费现象日益凸显。图书资料、学习用品、实验器材乃至生活物品等，在学生们手中往往难以实现高效......
  • Java计算机毕业设计校园疫情防控系统（开题报告+源码+论文）
    本系统（程序+源码）带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景在全球新冠疫情持续影响的背景下，校园作为知识传播与人才培养的重要场所，其疫情防控工作显得尤为重要。随着复学复课的逐步推进，如何科学、高效地管理校......
  • Java计算机毕业设计学术助手开发（开题报告+源码+论文）
    本系统（程序+源码）带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景：随着信息技术的飞速发展，学术研究领域正经历着前所未有的变革。面对海量且日益增长的学术资源，科研工作者在寻找、筛选及整合相关信息时面临着巨大挑战......
  • 051、Vue3+TypeScript基础，页面通讯之v-model在组件中手写实现
    01、main.js代码如下：//引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//引入emitter用于全局事件总线//importemitterfrom'@/utils/emitter'constapp=createApp(App);//App.vue的根元素id为......
  • 009java jsp SSM springboot月度员工绩效考核管理系统绩效指标管理（源码+文档+PPT+任务
     项目技术：Springboot+Maven+Vue等等组成，B/S模式+Maven管理等等。环境需要1.运行环境：最好是javajdk1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat环境：Tomcat7.x,8.x,9.x版本均可4.硬件环境：window......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99