學習成果:一個很簡單的登錄框

lindroid 發布于2019-08-30 15:44 / 2694人閱讀

摘要：作為選擇器時，會選中所有和同輩的元素。代碼簡單登錄框用戶名密碼登錄要記得和的相對位置，自行在中添加引用。

介紹

除了樣式之外,只通過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簡單的登錄代碼很簡單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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