学完表单之后的一次小练习~ 明天解封回家啦！
效果图
1. reg.css
.clearfix::after{content: "";display: block;clear: both;}body{line-height: 1.5px;}.form a{color: #00a1d6;}.form{width: 857px;margin: 1em auto;}.form h2{text-align: center;border-bottom: 1px solid #ddd;height: 10px;margin-bottom: 60px;}.form h2 span{background-color: white;font-size: 28px;padding: 0 20px;}/* 表单区域 */.form-area{width: 423px;margin: 0 auto;}.form-area .form-item{margin: 50px 0;position: relative;}.form-area .form-item .select .select-item, .form-area .select .input{float: left;height: 40px;}.form-area .select .select-item{width: 140px;border: 1px solid #dcdfe6;border-radius: 4px;box-sizing: border-box;border-top-right-radius: 0;border-right: none;position: relative;}.form-area .select .select-item ul{/* 最大像素 */max-height: 256px;background-color: white;/* 绝对定位 遮挡后方 */position: absolute;z-index: 1;left: 0;top: 50px;width: 100%;/* 设边框前以防宽度变化 */box-sizing: border-box;border: 1px solid #dcdfe6;border-radius: 4px;color: #606266;padding: 10px 0;font-size: 14px;overflow-y: auto;display: none;}.form-area .select .select-item ul li{height: 25px;padding: 2px 0;cursor: pointer;line-height: 25px;}.form-area .select .select-item ul li.active{color: #00a1d6;font-weight: bold;}.form-area .select .select-item ul li:hover{background-color: #f5f7fa;}.form-area .select .input input{border-radius: 0 4px 4px 0;}.form-area .select .input{width: 283px;}.form-area .select .select-item .title{height: 40px;padding: 0 20px;line-height: 40px;color: #909399;cursor: pointer;}.form-area .form-item .btn-sncode{width: 130px;height: 38px;position: absolute;right: 2px;top: 1px;}.form-area .form-item .error{position: absolute;width: 240px;right: -250px;top: 18px;color: #f45d90;font-size: 12px;display: none;}.form-area .form-item.haserror .error{display: block;}.form-area .readme{margin: -40px 0;font-size: 12px;}.form-area .readme .checkbox{display: inline-block;width: 14px;height: 14px;border: 1px solid #dcdfe6;border-radius: 4px;box-sizing: border-box;}.form-area .readme input{display: none;}.form-area .readme input:checked+.checkbox{border-color: #00a1d6;}.form-area .readme input:checked+.checkbox::after{content: "";display: block;width: 7px;height: 7px;background-color: #00a1d6;border-radius: 2px;margin-left: 2.5px;margin-top: 2.5px;}/* 同统一的文本框样式 */input[type="text"],input[type="password"]{border: 1px solid #dcdfe6;/* 宽度撑满 */width: 100%;/* 边框也计算在宽度之内 */box-sizing: border-box;border-radius: 4px;height: 40px;/* 文本离左边距 */text-indent: 1em;font-size: 14px;font-family: "PingFangSC-Medium";}input[type="text"]:hover,input[type="password"]:hover{border-color: #c0c4cc;}input[type="text"]::placeholder,input[type="password"]::placeholder{color: #ccc;}/* 聚焦 */input[type="text"]:focus,input[type="password"]:focus{border-color: #00a1d6;}/* 统一设置按钮ys */button{height: 40px;background-color: #00a1d6;border-radius: 4px;font-size: 14px;color: white;cursor: pointer;}button:hover{background-color: #33b4de;}button.fill{width: 100%;box-sizing: border-box;}.txtright{text-align: right;}button:disabled{background-color: #f5f5f5;color: rgba(0,0,0,.25);border: 1px solid #d9d9d9;box-sizing: border-box;cursor: not-allowed;}
2. html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册页面</title><link rel="stylesheet" href="reset.css"><link rel="stylesheet" href="reg.css"></head><body><div class="form"><h2><span>注册</span></h2><div class="form-area"><div class="form-item haserror"><input type="text" placeholder="账号"><div class="error">已被他人占用</div></div><div class="form-item"><input type="password" placeholder="密码"></div><div class="form-item"><div class="select clearfix"><div class="select-item"><div class="title">中国大陆</div><ul><li>Lorem.</li><li class="active">Cumque.</li><li>Rem.</li><li>Asperiores.</li><li>At!</li><li>Veniam.</li><li>In.</li><li>Quisquam!</li><li>Culpa.</li><li>Sequi.</li></ul></div><div class="input"><input type="text" placeholder="填写手机号"></div></div></div><div class="form-item"><input type="text" placeholder="输入短信验证码"><button type="button" class="btn-sncode">点击获取</button></div><div class="readme"><label><input type="checkbox"><span class="checkbox"></span><span>我已同意<a href="">《哔哩哔哩用户协议》</a>和<a href="">《哔哩哔哩账号中心规范》</a></span></label></div><div class="form-item"><button disabled class="fill">注册</button></div><div class="readme txtright"><a href="">已有账号直接登录></a></div></div></div></body></html>
3. reset.css
/* /eric/tools/css/reset/ v2.0 | 0126License: none (public domain)*/html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}body {line-height: 1;}ol,ul {list-style: none;}blockquote,q {quotes: none;}blockquote:before,blockquote:after,q:before,q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}a {text-decoration: none;color: inherit;}input,textarea,button,select{border: none;}input:focus,textarea:focus,button:focus,select:focus{outline: none;outline-offset: 0;}
