也想出现在这里? 联系我们
创意横幅图片广告位

简洁的登录界面HTML和CSS

预览:

建议调成暗黑模式下预览

登录界面

登录

HTML

/* From Uiverse.io by yashasvi9199 */ 
<div class="card">
  <div class="card2">
    <form class="form">
      <p id="heading">Login</p>
      <div class="field">
        <svg
          viewBox="0 0 16 16"
          fill="currentColor"
          height="16"
          width="16"
          xmlns="http://www.w3.org/2000/svg"
          class="input-icon"
        >
          <path
            d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z"
          ></path>
        </svg>
        <input
          type="text"
          class="input-field"
          placeholder="Username"
          autocomplete="off"
        />
      </div>
      <div class="field">
        <svg
          viewBox="0 0 16 16"
          fill="currentColor"
          height="16"
          width="16"
          xmlns="http://www.w3.org/2000/svg"
          class="input-icon"
        >
          <path
            d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"
          ></path>
        </svg>
        <input type="password" class="input-field" placeholder="Password" />
      </div>
      <div class="btn">
        <button class="button1">
                Login      
        </button>
        <button class="button2">Sign Up</button>
      </div>
      <button class="button3">Forgot Password</button>
    </form>
  </div>
</div>

CSS

代码解析

HTML 部分:

  1. 整体结构
<div class="card">
  <div class="card2">
    <form class="form">
      <p id="heading">Login</p>
      <div class="field">
        <svg>...</svg>
        <input type="text" class="input-field" placeholder="Username" />
      </div>
      <div class="field">
        <svg>...</svg>
        <input type="password" class="input-field" placeholder="Password" />
      </div>
      <div class="btn">
        <button class="button1">Login</button>
        <button class="button2">Sign Up</button>
      </div>
      <button class="button3">Forgot Password</button>
    </form>
  </div>
</div>
  1. <div class="card">: 包裹整个表单的容器,给表单应用背景渐变颜色。
  2. <div class="card2">: 表单的内层容器,用于实现点击效果和阴影。
  3. <form class="form">: 用于包裹所有表单输入元素和按钮。
  4. <p id="heading">Login</p>: 表单的标题,内容为“登录”。
  5. 输入框:包含两个输入框,一个用于用户名 (<input type="text">),一个用于密码 (<input type="password">)。
  6. 按钮
    • <button class="button1">Login</button>: 登录按钮。
    • <button class="button2">Sign Up</button>: 注册按钮。
    • <button class="button3">Forgot Password</button>: 忘记密码按钮。

CSS 部分:

  1. .form
    • 该类定义了表单元素的基本布局。
    • display: flex; flex-direction: column;:使用 Flexbox 布局,并将所有元素排列成垂直方向。
    • gap: 10px;:为表单元素之间设置间距。
    • padding-left: 2em; padding-right: 2em; padding-bottom: 0.4em;:为表单内内容提供内边距。
    • background-color: #171717;:背景色设置为深灰色。
    • border-radius: 25px;:圆角边框。
  2. .card
    • 该类定义了卡片容器的背景样式。
    • background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);:背景设置为从绿色到紫色的渐变色。
    • border-radius: 22px;:卡片的圆角边框。
    • transition: all 0.3s;:卡片元素在悬停时有平滑的过渡效果。
  3. .card2
    • 这是内层的容器,用来应用不同的过渡效果。
    • border-radius: 0;:没有圆角,直角。
    • transition: all 0.2s;:用于平滑过渡效果。
    • transform: scale(0.98);:在悬停时缩小卡片的大小,模拟点击效果。
  4. .field
    • 用于输入框的布局。
    • display: flex; align-items: center; justify-content: center; gap: 0.5em;:使用 Flexbox 排列图标和输入框。
    • border-radius: 25px; padding: 0.6em;:圆角和内边距设置,确保输入框美观。
    • background-color: #171717; box-shadow: inset 2px 5px 10px rgb(5, 5, 5);:深灰色背景,内阴影效果。
    • color: white;:文本颜色为白色。
  5. .input-icon
    • 设置输入框内图标的大小。
    • height: 1.3em; width: 1.3em; fill: white;:图标的高度和宽度为 1.3em,并且颜色为白色。
  6. .input-field
    • 输入框的样式。
    • background: none; border: none; outline: none; width: 100%; color: #d3d3d3;:去掉边框和背景,宽度设置为 100%,文本颜色为浅灰色。
  7. .btn
    • 定义按钮容器的布局。
    • display: flex; justify-content: center; flex-direction: row;:使用 Flexbox 来水平排列按钮。
    • margin-top: 2.5em;:按钮容器上边距设置,确保按钮不会靠得太近。
  8. 按钮样式
    • .button1:登录按钮的样式。
      • padding: 0.5em; padding-left: 1.1em; padding-right: 1.1em;:按钮内边距,使按钮更宽。
      • background-color: #252525; color: white;:深灰色背景,白色文本。
      • transition: 0.4s ease-in-out;:平滑过渡效果。
      • :hover 伪类:鼠标悬停时,背景色变为黑色,文本颜色保持白色。
    • .button2:注册按钮的样式,和登录按钮类似,但内边距较大,按钮宽度稍大。
    • .button3:忘记密码按钮的样式。
      • margin-bottom: 3em;:为按钮增加下边距,确保与底部内容有一定间距。
      • background-color: #252525; color: white;:和其他按钮相同的背景颜色。
      • :hover 伪类:鼠标悬停时,背景色变为红色,文本颜色保持白色。
© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
视频API-专注分享实用软件、有趣网站及电脑系统相关安装教程!华晟三理资源网

视频API

视频API-专注分享实用软件
黑名单查询系统源码-专注分享实用软件、有趣网站及电脑系统相关安装教程!华晟三理资源网

黑名单查询系统源码

php 7.0+ Mysql 5.6+上传访问域名 /install 安装
Hospital 14.6.0全开源医院管理预约系统源码-专注分享实用软件、有趣网站及电脑系统相关安装教程!华晟三理资源网

Hospital 14.6.0全开源医院管理预约系统源码

预览:简介:InfyHMS 具有 60 种功能和 9 种不同类型的用户类型,他们可以登录系统并根据他们的角色访问他们的数据。InfyHMS 系统功能漂亮的登陆页面医生病人护士接待 员实验室专家药剂师会计师...
在线聊天室源码-专注分享实用软件、有趣网站及电脑系统相关安装教程!华晟三理资源网
微信发卡小程序系统·支持流量主·多种卡密领取模式-专注分享实用软件、有趣网站及电脑系统相关安装教程!华晟三理资源网
PixPro 全开源图床系统源码,强大的压缩率-专注分享实用软件、有趣网站及电脑系统相关安装教程!华晟三理资源网

PixPro 全开源图床系统源码,强大的压缩率

预览:一款专为个人需求设计的高效图床解决方案,集成了强大的图片压缩功能与优雅的前台后台管理界面。项目结构精简高效,提供自定义图片压缩率与尺寸设置,有效降低存储与带宽成本。支持上传JP...