哔哩哔哩注册--表单练习
生活随笔
收集整理的這篇文章主要介紹了
哔哩哔哩注册--表单练习
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
嗶哩嗶哩注冊(cè)–表單練習(xí)
HTML代碼
- 可能代碼有些不足或者用詞不當(dāng)?shù)?/li>
- 希望大家能夠見諒
- 這是一次bilibili的注冊(cè)表單練習(xí)
- 里面都有詳細(xì)注釋
- 當(dāng)然一個(gè)網(wǎng)頁有許多種 這只是其中一種 是為了相互交流
- 希望大家喜歡
- 最后的效果是這樣子的
- 接下來就是css 代碼 也會(huì)附上自己的注釋 ，有不足的地方請(qǐng)指出，因?yà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;}/* 這底下就是一些按鈕的 樣式 比較簡單 */ 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í)再來記錄。
- 白白
總結(jié)
以上是生活随笔為你收集整理的哔哩哔哩注册--表单练习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL安装及可能出现的问题
- 下一篇： Response文件下载