資訊專欄INFORMATION COLUMN
摘要：作為選擇器時(shí)，會(huì)選中所有和同輩的元素。代碼簡(jiǎn)單登錄框用戶名密碼登錄要記得和的相對(duì)位置，自行在中添加引用。
介紹
除了樣式之外,只通過(guò)css的偽類選擇器實(shí)現(xiàn)了當(dāng)鼠標(biāo)焦點(diǎn)在"用戶名"或"密碼"輸入框時(shí),提示信息自動(dòng)縮小并跑到左上方。如若輸入框中沒(méi)有值，則回到原來(lái)的樣子，若有值則不再恢復(fù)。
其基本原理是 css3 提供的偽元素選擇器，通過(guò)在標(biāo)簽中增加require屬性（這個(gè)屬性并不是一個(gè)鍵值對(duì)），使得當(dāng)輸入框中有內(nèi)容時(shí)會(huì)被:valid選擇器選中。至于鼠標(biāo)焦點(diǎn)還在輸入框中時(shí)利用的偽類選擇器:focus算是老生常談了。
但說(shuō)明輸入框內(nèi)容的標(biāo)簽并不是標(biāo)簽的子元素，該如何通過(guò)的狀態(tài)管理呢？便用到了兄弟選擇器~。eleA ~ eleB作為選擇器時(shí)，會(huì)選中所有和 eleA 同輩的 eleB 元素。官方文檔點(diǎn)此：傳送門。
另外最后被密碼輸入框的瀏覽器自動(dòng)提示曾經(jīng)的內(nèi)容搞得煩的一批，搜索了一下可以通過(guò)在標(biāo)簽中添加autocomplete="off"禁止瀏覽器做輸入框提示，完美。
代碼index.html
Document
簡(jiǎn)單登錄框
index.css
要記得和index.html的相對(duì)位置，自行在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;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/116274.html
摘要：葡萄城于年在中國(guó)設(shè)立研發(fā)中心，在全球化產(chǎn)品的研發(fā)過(guò)程中，不斷適應(yīng)中國(guó)市場(chǎng)的本地需求，并為軟件企業(yè)和各行業(yè)的信息化提供優(yōu)秀的軟件工具和咨詢服務(wù)。 ? 因?yàn)轫?xiàng)目的原因，前段時(shí)間研究并使用了 SoapUI 測(cè)試工具進(jìn)行自測(cè)開(kāi)發(fā)的 api。下面將研究的成果展示給大家，希望對(duì)需要的人有所幫助。 SoapUI 是什么？ SoapUI 是一個(gè)開(kāi)源測(cè)試工具，通過(guò) soap/http 來(lái)檢查、調(diào)用、實(shí)現(xiàn)...
摘要：但是，畢竟是人，哪天忙了就會(huì)忘記提交，所以想著能不能實(shí)現(xiàn)在自己阿里云服務(wù)器系統(tǒng)上，設(shè)置，定制下命令，實(shí)現(xiàn)每天定點(diǎn)自動(dòng)提交。 前言 進(jìn)入自己github主頁(yè)會(huì)看到自己的提交記錄，如果某天沒(méi)有提交記錄，那天的小方框就顯示灰色。強(qiáng)迫癥的我，每次進(jìn)來(lái)看著就感覺(jué)不爽，想著自己每天記得提交點(diǎn)東西，爭(zhēng)取像阮一峰大神一樣，每天都有提交記錄。 showImg(https://www.wty90.co...
摘要：常見(jiàn)登錄框很多情況下，網(wǎng)站的登錄框，就像這樣這樣這樣或者這樣錘子科技總之，登錄面板位于頁(yè)面正中央，水平居中，豎直居中。并且隨著瀏覽器窗口大小變化，始終居中方法一實(shí)現(xiàn)思路使用兩個(gè)嵌套，外層的寬高設(shè)置為瀏覽器視窗大小，相對(duì)定位。 常見(jiàn)登錄框 很多情況下，網(wǎng)站的登錄框，就像這樣 showImg(https://segmentfault.com/img/remote/1460000008644...
摘要：常見(jiàn)登錄框很多情況下，網(wǎng)站的登錄框，就像這樣這樣這樣或者這樣錘子科技總之，登錄面板位于頁(yè)面正中央，水平居中，豎直居中。并且隨著瀏覽器窗口大小變化，始終居中方法一實(shí)現(xiàn)思路使用兩個(gè)嵌套，外層的寬高設(shè)置為瀏覽器視窗大小，相對(duì)定位。 常見(jiàn)登錄框 很多情況下，網(wǎng)站的登錄框，就像這樣 showImg(https://segmentfault.com/img/remote/1460000008644...
閱讀 1532·2023-04-25 18:34
閱讀 3705·2021-11-19 09:40
閱讀 2890·2021-11-17 09:33
閱讀 3048·2021-11-12 10:36
閱讀 2937·2021-09-26 09:55
閱讀 2716·2021-08-05 10:03
閱讀 2582·2019-08-30 15:54
閱讀 2931·2019-08-30 15:54
