webapp入门到实战_web前端入门到实战：一个很简单的登录框

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

其基本原理是 css3 提供的伪元素选择器，通过在标签中增加require属性(这个属性并不是一个键值对)，使得当输入框中有内容时会被:valid选择器选中。至于鼠标焦点还在输入框中时利用的伪类选择器:focus算是老生常谈了。

但说明输入框内容的标签并不是标签的子元素，该如何通过的状态管理呢？便用到了兄弟选择器~。eleA ~ eleB作为选择器时，会选中所有和 eleA 同辈的 eleB 元素。

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

代码

index.html

web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法(详细的前端项目实战教学视频，PDF)

Document

简单登录框

用户名

密码

登录

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;

}