當(dāng)前位置：首頁 >

哔哩哔哩注册--表单练习

發(fā)布時(shí)間：2025/3/19 26 豆豆

生活随笔收集整理的這篇文章主要介紹了哔哩哔哩注册--表单练习小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

嗶哩嗶哩注冊(cè)–表單練習(xí)

HTML代碼

可能代碼有些不足或者用詞不當(dāng)?shù)?/li>
希望大家能夠見諒
這是一次bilibili的注冊(cè)表單練習(xí)
里面都有詳細(xì)注釋
當(dāng)然一個(gè)網(wǎng)頁有許多種這只是其中一種是為了相互交流
希望大家喜歡
最后的效果是這樣子的

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bilibili</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/bilibili.css"> </head> <body><div class="form"><h2><span>注冊(cè) </span></h2><div class="form-area"><div class="form-item haserror"><input type="text" name="" id="" placeholder="賬號(hào)"><div class="error ">改昵稱以被占用</div></div><div class="form-item"><input type="password" name="" id="" placeholder="密碼"></div><div class="form-item"><div class="select clearfix"><div class="select-item "><div class="title">中國大陸</div><ul><li>Lopudiue.</li><li class="active">中國大陸</li><li>Idfugidit!</li><li>Prm act?</li><li>Laat a ab!</li><li>A um notam?</li><li>Tera iquam?</li><li>Ret fuatque?</li><li>Asquiditate.</li><li>Esundebitis.</li><li>His di cum?</li><li>Evque tium.</li><li>Ales.</li><li>Exumendsci!</li><li>Depit! ris.</li><li>Asque! itae!</li><li>Adendis co</li><li>Ip nonequi!</li><li>Cotioumq</li></ul></div><div class="input"><input type="text" placeholder="填寫手機(jī)號(hào)碼"></div></div></div><div class="form-item"><input type="text"placeholder="請(qǐng)輸入短信驗(yàn)證碼"><button type="button" class="btn-sncode">點(diǎn)擊獲取</button></div><div class="readme"><label><input type="checkbox" name="" id=""><span class="checkbox"></span><span>我已同意<a href="#">《嗶哩嗶哩彈幕網(wǎng)用戶使用協(xié)議》</a>和<a href="#">《嗶哩嗶哩隱私政策》</a></span></label></div><div class="form-item"><button type="button" class="fill">注冊(cè)</button></div><div class="readme txtright"><a href="">已有賬號(hào)，直接登錄></a></div></div></div> </body> </html>

接下來就是css 代碼也會(huì)附上自己的注釋，有不足的地方請(qǐng)指出，因?yàn)槎际且恍┖?jiǎn)單的個(gè)人理解。謝謝啦。

css代碼：

.clearfix::after {content: "";display: block;clear: both; } /* 這段代碼的作用是在浮動(dòng)的父元素上加上clearfix 解決那個(gè)浮動(dòng)帶來的高度塌陷問題 */body{line-height: 1.5; } /* 這里是設(shè)置整個(gè)頁面的行高 */.form a{color: #00a1d6; }/* 設(shè)置在 .form 下的所有 a元素的顏色為這個(gè)顏色 */.form {width: 980px;margin: 1em auto; } /* 設(shè)置 .form 的寬度然后margin： 1em(距上面一個(gè)字體距離) auto(水平居中)； */.form h2 {text-align: center;/* 文本居中 */font-size: 38px;/* 字體大小 */border-bottom: 1px solid #dddddd;/* 給定一個(gè)下劃線 */height: 28px;/* 設(shè)置高度 */margin-bottom: 60px;/* 把下劃線移到穿過文字中間 */ } /* 設(shè)置 .form 下的h2 元素 */.form h2 span {padding: 0 20px;/* 文字左右距離那個(gè)下劃線的距離 */background-color: #ffffff; }/* 這里是設(shè)置 span 元素利用顏色遮擋注冊(cè)上的下劃線 *//* 給放置表單的大區(qū)域設(shè)置一個(gè) 范圍 */ .form-area {width: 423px;/* 定寬 */margin: 0 auto;/* 水平居中 */ }/* 第一個(gè)文本框 */ .form-area .form-item {margin: 50px 0px;/* 這個(gè)地方是設(shè)置整個(gè)表單區(qū)域每個(gè)表單之間的上下距離 */position: relative;/* 這里給定一個(gè)相對(duì)定位是這個(gè)區(qū)域下面有用到絕對(duì)定位 */ }/* 這里是那個(gè)錯(cuò)誤提示 */ .form-area .form-item .error{position: absolute;/* 絕對(duì)定位 */width: 240px;right: -260px;font-size: 12px;color: #f45d98;top: 10px;display: none;/* 隱藏 */ }.form-area .form-item.haserror .error{display: block;/* 顯示 .form-item.haserror 這么設(shè)置的原因是方便那個(gè)后端人員使用js控制 */ }/* 這里是設(shè)置文本框的一些樣式 */ input[type="text"], input[type="password"] {border: 1px solid #dcdfe6;/* 邊框 */width: 100%;/* 寬度100% 這里設(shè)置100% 是隨那之前定的寬度要撐滿這個(gè)區(qū)域 */box-sizing: border-box;/* 這里給一個(gè)鏈接然后里面介紹了一下這個(gè) bor-sizing布局 *//* https:www.jianshu.com/p/e2eb0d8c9de6 */border-radius: 4px;/* 這個(gè) 是圓角具體設(shè)置需要大家去查啦 */height: 40px;font-size: 14px;text-indent: 1em;/* 這個(gè) 是文本框那個(gè)文字距離那個(gè) 邊框的距離 *//* 就像這樣不設(shè)置 |不設(shè)置距離 | *//* 設(shè)置距離 | 設(shè)置距離 | *//* 就是文字開始距離邊框的距離 */ }/* 這里是使用偽類 hover 設(shè)置鼠標(biāo)滑過的那個(gè)效果 */ input[type="text"]:hover, input[type="password"]:hover {border-color: #c0c4cc;/* 這是邊框背景顏色 */ }/* 這個(gè) 使用偽類 placeholder 設(shè)置文本框預(yù)寫的那個(gè)文字的顏色具體的其他的用法還沒有學(xué)到 */ input[type="text"]::placeholder, input[type="password"]::placeholder {border-color: #ccc; }/* 這個(gè)是利用偽類設(shè)置那個(gè) 鼠標(biāo)點(diǎn)擊的那個(gè)樣式 *//* 好像是叫做聚焦吧個(gè)人理解請(qǐng)見諒 */ input[type="text"]:focus, input[type="password"]:focus {border-color: #00a1d6; }/* 這里是設(shè)置那個(gè)下拉框和文本框在一起的那個(gè)一個(gè)表單 *//* 使用浮動(dòng)將他們放置在一列還有定高 */ .form-area .select .select-item, .form-area .select .input {float: left;height: 40px; }/* 這里是設(shè)置那個(gè)下拉框的樣式 */ .form-area .select .select-item {width: 140px;border: 1px solid #dcdfe6;border-radius: 4px 0 0 4px;/* 這里是設(shè)置那個(gè)邊框的四個(gè)方向的圓角 */box-sizing: border-box;border-right: none;/* 這里是去除右邊的邊框 */position: relative; }/* 這個(gè) 和上面那個(gè) 寬度加在一起就是那個(gè)大的定寬剛好撐滿 */ .form-area .select .input {width: 281px; }/* 這里就是那些li 的元素的樣式 */ .form-area .select .select-item ul{/* 最大高度 */max-height: 256px;/* 這個(gè)是最大高度意思是超過這個(gè)高度就會(huì) 顯示下拉條 *//* 但是改變下拉條的樣式要在css進(jìn)階才會(huì)學(xué)習(xí) */background-color: #ffffff;position: absolute;z-index: 1;/* 這個(gè) z-index 是在那個(gè)定位中學(xué)習(xí)的 *//* z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。 *//* 這個(gè)作用是在js控制彈出時(shí) 才產(chǎn)生作用遮擋下面的文字 */left: 0;top:50px;/* 這個(gè)地方是調(diào)整那個(gè)下拉框的位置 */width: 100%;border: 1px solid #dcdfe6;border-radius: 4px;color: #606266;padding: 10px 0;/* 這個(gè)是框內(nèi)文字距離上邊框距離 */font-size: 14px;overflow-y: auto;/* 這是出現(xiàn)下拉條 */display: none;/* 這個(gè)是隱藏 */ }/* 彈出效果需要靠js控制 */.form-area .select .select-item ul li{padding:0 20px;/* 文字距離左右邊框距離 */cursor: pointer;/* 這個(gè)是鼠標(biāo)樣式鼠標(biāo)點(diǎn)進(jìn) 這個(gè)下拉框時(shí) 是一個(gè)小手狀態(tài) 就是鼠標(biāo)圖標(biāo)樣式 */height: 34px;line-height: 34px;/* line-height 和高度同高垂直居中 */ }/* 這里是hover 效果 */ .form-area .select .select-item ul li:hover{background-color: #f5f5fa; }/* 這一段是那個(gè)選中效果 */ .form-area .select .select-item ul li.active{color: #00a1d6;font-weight: bold;/* 文字加粗 */ }/* 這個(gè)是下拉框里面其中一個(gè) 做個(gè)樣式讓后面做的人明白 */ .form-area .select .select-item .title {height: 40px;line-height: 40px;padding: 0 20px;color: #909399;cursor: pointer; }/* 這里是設(shè)置旁邊的文本框 */ .form-area .select .select-item input{border-radius: 0 4px 4px 0; }/* 這里是設(shè)置什么協(xié)議的那一段 */ .form-area .readme{margin: -40px 0;/* 這個(gè)是距離上下距離為了不改變表單之間的距離 */font-size: 12px; }/* 那個(gè)多選框的樣式 */ .form-area .readme .checkbox{display: inline-block;/* 將span 設(shè)置為行塊盒 */ /* inline-block就是以內(nèi)聯(lián)塊級(jí)元素呈現(xiàn)。具體變現(xiàn)為：塊級(jí)元素同行顯示，并可以修改width、height、 *//* padding、margin等屬性。 */width: 14px;height: 14px;border: 1px solid #dcdfe6;border-radius: 4px;}.form-area .readme input:checked+.checkbox{border-color: #00a1d6; }/* 隱藏原有的那個(gè) 多選框的樣式 */ .form-area .readme input{display: none; }.form-area .readme input:checked+.checkbox::after{/* :checked 偽類一下子講不明白 *//* 大家可以去mdn 康康 *//* https:developer.mozilla.org/zh-CN/docs/Web/CSS/:checked */content: "";display: block;width: 7px;height: 7px;background-color: #00a1d6;border-radius: 4px;margin-left:4px;margin-top: 4px;}/* 這底下就是一些按鈕的樣式比較簡(jiǎn)單 */ button{height: 40px;background-color: #00a1d6;color: #fff;cursor: pointer;font-size: 14px;border-radius: 4px; }.form-area .form-item .btn-sncode{width: 130px;height: 38px;position: absolute;top: 1px;right: 2px; }button:hover{background-color: #33b4de; } button.fill{width: 100%;/* 這里同樣是為了撐滿那個(gè)定寬 */box-sizing: border-box; }/* 這是最后那個(gè) 已有帳號(hào)，直接登錄那個(gè) 直接設(shè)置為文本靠右就可以啦 */ .txtright{text-align: right; }

在這也把那個(gè)重置樣式也放一份在這里不過重置樣式沒有很多注釋啦
全文大都是個(gè)人理解用語或者用詞都不太專業(yè)
如果哪里出錯(cuò)啦請(qǐng)大家指出來
發(fā)布博客是為了記錄自己也是為了交流
然后最后就是謝謝大家能夠看完啦

重置樣式

html{/* 標(biāo)準(zhǔn)字體大小可以，在移動(dòng)端使用的rem適配的話會(huì)動(dòng)態(tài)改變。 */font-size:14px;/* 使用IE盒模型（個(gè)人取舍，我一般設(shè)置width是這是盒子的真實(shí)大小，包括padding和border） */box-sizing: border-box;}html,body{/* 在有些手機(jī)瀏覽器中點(diǎn)擊一個(gè)鏈接或著可點(diǎn)擊元素的時(shí)候，會(huì)出現(xiàn)一個(gè)半透明的灰色背景； */-webkit-tap-highlight-color: rgba(0, 0, 0, 0);/* 提升移動(dòng)端滾動(dòng)的體驗(yàn)效果 */-webkit-overflow-scrolling: touch;overflow-scrolling: touch;/* 與瀏覽器窗口高度一致 */height: 100%;}body{/* 有些背景默認(rèn)為淺灰色，所以統(tǒng)一設(shè)置為純白 */background: #fff;/* 照著antd上面來的，在公司就別用微軟雅黑了，不建議字體使用rem。 */font:14px,-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'/* 使字體更加順滑 */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}/* 去除瀏覽器默認(rèn)的margin和padding, 自行刪減一些不必要的標(biāo)簽 */body,p,h1,h2,h3,h4,h5,h6,dl,dd,ul,ol,th,td,button,figure,input,textarea,form,pre,blockquote,figure{margin: 0;padding: 0;}a{/* 小手 */cursor: pointer;/* 取消超鏈接的默認(rèn)下劃線 */text-decoration:none;/* antd里面還做了，看你團(tuán)隊(duì)需不需要這樣的風(fēng)格 */transition: color 0.3s ease;}ol,ul{/* 去除自帶的ugly樣式。 */list-style:none }/* 這些節(jié)點(diǎn)部分屬性沒有繼承父節(jié)點(diǎn)樣式，所有繼承一下，并取消outline，外輪廓的效果 */a,h1,h2,h3,h4,h5,h6,input,select,button,textarea {font-family: inherit;font-size: inherit;font-weight: inherit;font-style: inherit;line-height: inherit;color: inherit;outline: none;}button,input[type='submit'],input[type='button'] {/* 可點(diǎn)擊小手 */cursor: pointer;}/* 取消部分瀏覽器數(shù)字輸入控件的操作按鈕 apperance可以改變控件的外觀。 */input[type='number'] {-moz-appearance: textfield;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {margin: 0;-webkit-appearance: none;}/*** 刪除Firefox中的內(nèi)邊框和填充。*/button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}/*** 讓html5中的hidden在IE10中正確顯示*/[hidden] {display: none;}template {/* 有些瀏覽器會(huì)顯示template 不過template標(biāo)簽用的也少，自行取舍。 */display: none;}input,textarea,button,select{border:none;}input:focus,textarea:focus,button:focus,select:focus{outline: none;/* 木有外邊框 */}

下一次學(xué)習(xí)再來記錄。
白白

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的哔哩哔哩注册--表单练习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。