学习成果:一个很简单的登录框

lindroid 发布于2019-08-30 15:44 / 2674人阅读

摘要：作为选择器时，会选中所有和同辈的元素。代码简单登录框用户名密码登录要记得和的相对位置，自行在中添加引用。

介绍

除了样式之外,只通过css的伪类选择器实现了当鼠标焦点在"用户名"或"密码"输入框时,提示信息自动缩小并跑到左上方。如若输入框中没有值，则回到原来的样子，若有值则不再恢复。

其基本原理是 css3 提供的伪元素选择器，通过在标签中增加require属性（这个属性并不是一个键值对），使得当输入框中有内容时会被:valid选择器选中。至于鼠标焦点还在输入框中时利用的伪类选择器:focus算是老生常谈了。
但说明输入框内容的标签并不是标签的子元素，该如何通过的状态管理呢？便用到了兄弟选择器~。eleA ~ eleB作为选择器时，会选中所有和 eleA 同辈的 eleB 元素。官方文档点此：传送门。

另外最后被密码输入框的浏览器自动提示曾经的内容搞得烦的一批，搜索了一下可以通过在标签中添加autocomplete="off"禁止浏览器做输入框提示，完美。

代码

index.html

index.css
要记得和index.html的相对位置，自行在index.html中添加引用。

* {
  padding: 0;
  margin: 0;
}

body {
  background: linear-gradient(127deg, #64c4ed, #fec771);
  height: 100vh;
  
  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
}

#login-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: white;

  padding: 3vh 3vw;

  background-color: #8b4367;
  opacity: .8;
  outline: none;
  border: none;
  border-radius: 10px;
  box-shadow: 2px 2px 6px #8b4367;
}


#login-div #form-title-p {
  font-weight: 500;
  font-size: 2rem;
  padding: 10px;
  margin-bottom: 20px;
  letter-spacing: 0.5rem;
}

.input-div {
  position: relative;
  padding: 5px;
  margin-bottom: 2vh;
}

.input-div,
.btn-div {
  text-align: center;
  vertical-align: middle;
}

.input-div input {
  width: 15vw;
  height: 5vh;
  padding: 0 1rem;

  outline: none;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid black;

  font-size: 14px;
}

.input-div label {
  position: absolute;
  left: 1rem;
  top: .5rem;
  font-size: 16px;
  transition: 0.2s;
}

.input-div input:focus ~ label,
.input-div input:valid ~ label {
  left: 0;
  top: -10px;
  font-size: 12px;
}

.btn-div button {
  outline: none;
  border: none;
  
  margin-top: 3vh;

  width: 90%;
  box-sizing: border-box;
  padding: 10px;

  border-radius: 8px;
  box-shadow: 1px 1px 1px #32dbc6;
  background-color: #49beb7;
  color: white;
  font-size: 16px;
}

云服务器 GPU云服务器简单的js提示框简单的php登录 php简单的登录代码很简单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116274.html

SoapUI实践：自动化测试、压力测试、持续集成

摘要：葡萄城于年在中国设立研发中心，在全球化产品的研发过程中，不断适应中国市场的本地需求，并为软件企业和各行业的信息化提供优秀的软件工具和咨询服务。因为项目的原因，前段时间研究并使用了 SoapUI 测试工具进行自测开发的 api。下面将研究的成果展示给大家，希望对需要的人有所帮助。 SoapUI 是什么？ SoapUI 是一个开源测试工具，通过 soap/http 来检查、调用、实现...

陈伟 2019-08-16 10:52 评论0 收藏0
手把手教你刷github提交记录

摘要：但是，毕竟是人，哪天忙了就会忘记提交，所以想着能不能实现在自己阿里云服务器系统上，设置，定制下命令，实现每天定点自动提交。前言进入自己github主页会看到自己的提交记录，如果某天没有提交记录，那天的小方框就显示灰色。强迫症的我，每次进来看着就感觉不爽，想着自己每天记得提交点东西，争取像阮一峰大神一样，每天都有提交记录。 showImg(https://www.wty90.co...

ChanceWong 2019-08-26 11:46 评论0 收藏0
这可能是实现登录框居中最简捷的方法

摘要：常见登录框很多情况下，网站的登录框，就像这样这样这样或者这样锤子科技总之，登录面板位于页面正中央，水平居中，竖直居中。并且随着浏览器窗口大小变化，始终居中方法一实现思路使用两个嵌套，外层的宽高设置为浏览器视窗大小，相对定位。常见登录框很多情况下，网站的登录框，就像这样 showImg(https://segmentfault.com/img/remote/1460000008644...

fai1017 2019-08-21 11:35 评论0 收藏0
这可能是实现登录框居中最简捷的方法

摘要：常见登录框很多情况下，网站的登录框，就像这样这样这样或者这样锤子科技总之，登录面板位于页面正中央，水平居中，竖直居中。并且随着浏览器窗口大小变化，始终居中方法一实现思路使用两个嵌套，外层的宽高设置为浏览器视窗大小，相对定位。常见登录框很多情况下，网站的登录框，就像这样 showImg(https://segmentfault.com/img/remote/1460000008644...

shery 2019-08-30 15:53 评论0 收藏0