哔哩哔哩注册--表单练习
生活随笔
收集整理的这篇文章主要介绍了
哔哩哔哩注册--表单练习
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
哔哩哔哩注册–表单练习
HTML代码
- 可能代码有些不足或者用词不当等
- 希望大家能够见谅
- 这是一次bilibili的注册表单练习
- 里面都有详细注释
- 当然一个网页有许多种 这只是其中一种 是为了相互交流
- 希望大家喜欢
- 最后的效果是这样子的
- 接下来就是css 代码 也会附上自己的注释 ，有不足的地方请指出，因为都是一些简单的个人理解。谢谢啦。
css代码：
.clearfix::after {content: "";display: block;clear: both; } /* 这段代码的作用是 在浮动的父元素上 加上clearfix 解决那个浮动带来的高度塌陷问题 */body{line-height: 1.5; } /* 这里是设置整个页面的行高 */.form a{color: #00a1d6; }/* 设置在 .form 下的所有 a元素的颜色为 这个颜色 */.form {width: 980px;margin: 1em auto; } /* 设置 .form 的宽度 然后margin： 1em(距上面一个字体距离) auto(水平居中)； */.form h2 {text-align: center;/* 文本居中 */font-size: 38px;/* 字体大小 */border-bottom: 1px solid #dddddd;/* 给定一个下划线 */height: 28px;/* 设置高度 */margin-bottom: 60px;/* 把下划线移到 穿过文字中间 */ } /* 设置 .form 下的h2 元素 */.form h2 span {padding: 0 20px;/* 文字左右距离那个下划线的距离 */background-color: #ffffff; }/* 这里是设置 span 元素 利用颜色遮挡注册上的下划线 *//* 给放置表单的大区域 设置一个 范围 */ .form-area {width: 423px;/* 定宽 */margin: 0 auto;/* 水平居中 */ }/* 第一个文本框 */ .form-area .form-item {margin: 50px 0px;/* 这个地方是设置整个表单区域 每个表单之间的上下距离 */position: relative;/* 这里给定一个相对定位 是这个区域下面有用到绝对定位 */ }/* 这里是那个错误提示 */ .form-area .form-item .error{position: absolute;/* 绝对定位 */width: 240px;right: -260px;font-size: 12px;color: #f45d98;top: 10px;display: none;/* 隐藏 */ }.form-area .form-item.haserror .error{display: block;/* 显示 .form-item.haserror 这么设置的原因是方便那个后端人员使用js控制 */ }/* 这里是设置 文本框的 一些样式 */ input[type="text"], input[type="password"] {border: 1px solid #dcdfe6;/* 边框 */width: 100%;/* 宽度100% 这里设置100% 是随那之前定的宽度 要撑满这个区域 */box-sizing: border-box;/* 这里给一个链接 然后里面介绍了一下 这个 bor-sizing布局 *//* https:www.jianshu.com/p/e2eb0d8c9de6 */border-radius: 4px;/* 这个 是圆角 具体设置 需要大家去查啦 */height: 40px;font-size: 14px;text-indent: 1em;/* 这个 是文本框 那个文字 距离那个 边框的距离 *//* 就像这样 不设置 |不设置距离 | *//* 设置距离 | 设置距离 | *//* 就是文字开始距离边框的距离 */ }/* 这里是使用伪类 hover 设置鼠标滑过的那个效果 */ input[type="text"]:hover, input[type="password"]:hover {border-color: #c0c4cc;/* 这是边框背景颜色 */ }/* 这个 使用伪类 placeholder 设置文本框预写的那个文字的颜色 具体的其他的用法 还没有学到 */ input[type="text"]::placeholder, input[type="password"]::placeholder {border-color: #ccc; }/* 这个是利用伪类 设置那个 鼠标点击的 那个样式 *//* 好像是叫做聚焦吧 个人理解 请见谅 */ input[type="text"]:focus, input[type="password"]:focus {border-color: #00a1d6; }/* 这里是 设置那个下拉框和 文本框在一起的那个一个表单 *//* 使用浮动将他们放置在一列 还有定高 */ .form-area .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 0 0 4px;/* 这里是设置那个边框的四个方向的圆角 */box-sizing: border-box;border-right: none;/* 这里是去除 右边的边框 */position: relative; }/* 这个 和上面那个 宽度加在一起就是 那个大的定宽 刚好撑满 */ .form-area .select .input {width: 281px; }/* 这里 就是那些li 的元素 的样式 */ .form-area .select .select-item ul{/* 最大高度 */max-height: 256px;/* 这个是最大高度 意思是 超过这个高度就会 显示下拉条 *//* 但是改变下拉条的样式 要在css进阶才会学习 */background-color: #ffffff;position: absolute;z-index: 1;/* 这个 z-index 是在那个定位中学习的 *//* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 *//* 这个作用是在js控制弹出时 才产生作用 遮挡下面的文字 */left: 0;top:50px;/* 这个地方是调整 那个下拉框的 位置 */width: 100%;border: 1px solid #dcdfe6;border-radius: 4px;color: #606266;padding: 10px 0;/* 这个是框内文字 距离上边框距离 */font-size: 14px;overflow-y: auto;/* 这是出现下拉条 */display: none;/* 这个是隐藏 */ }/* 弹出效果 需要靠js控制 */.form-area .select .select-item ul li{padding:0 20px;/* 文字距离左右边框距离 */cursor: pointer;/* 这个是鼠标样式 鼠标点进 这个下拉框 时 是一个小手状态 就是鼠标图标样式 */height: 34px;line-height: 34px;/* line-height 和高度同高 垂直居中 */ }/* 这里是hover 效果 */ .form-area .select .select-item ul li:hover{background-color: #f5f5fa; }/* 这一段 是那个选中效果 */ .form-area .select .select-item ul li.active{color: #00a1d6;font-weight: bold;/* 文字加粗 */ }/* 这个是下拉框里面 其中 一个 做个样式 让后面做的人明白 */ .form-area .select .select-item .title {height: 40px;line-height: 40px;padding: 0 20px;color: #909399;cursor: pointer; }/* 这里是设置旁边的文本框 */ .form-area .select .select-item input{border-radius: 0 4px 4px 0; }/* 这里是设置什么 协议的那一段 */ .form-area .readme{margin: -40px 0;/* 这个是距离 上下距离 为了不改变 表单之间的距离 */font-size: 12px; }/* 那个多选框的样式 */ .form-area .readme .checkbox{display: inline-block;/* 将span 设置为行块盒 */ /* inline-block就是以内联块级元素呈现。具体变现为：块级元素同行显示，并可以修改width、height、 *//* padding、margin等属性。 */width: 14px;height: 14px;border: 1px solid #dcdfe6;border-radius: 4px;}.form-area .readme input:checked+.checkbox{border-color: #00a1d6; }/* 隐藏原有的那个 多选框的样式 */ .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%;/* 这里同样是为了撑满 那个定宽 */box-sizing: border-box; }/* 这是最后那个 已有帐号，直接登录 那个 直接设置为文本靠右就可以啦 */ .txtright{text-align: right; }- 在这也把那个重置样式也放一份在这里 不过重置样式 没有很多注释啦
- 全文大都是个人理解 用语或者用词都不太专业
- 如果哪里出错啦 请大家指出来
- 发布博客是为了记录自己 也是为了交流
- 然后最后就是谢谢大家 能够看完啦
重置样式
html{/* 标准字体大小可以，在移动端使用的rem适配的话会动态改变。 */font-size:14px;/* 使用IE盒模型（个人取舍，我一般设置width是这是盒子的真实大小，包括padding和border） */box-sizing: border-box;}html,body{/* 在有些手机浏览器中点击一个链接或着可点击元素的时候，会出现一个半透明的灰色背景； */-webkit-tap-highlight-color: rgba(0, 0, 0, 0);/* 提升移动端滚动的体验效果 */-webkit-overflow-scrolling: touch;overflow-scrolling: touch;/* 与浏览器窗口高度一致 */height: 100%;}body{/* 有些背景默认为浅灰色，所以统一设置为纯白 */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;}/* 去除浏览器默认的margin和padding, 自行删减一些不必要的标签 */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;/* 取消超链接的默认下划线 */text-decoration:none;/* antd里面还做了 ， 看你团队需不需要这样的风格 */transition: color 0.3s ease;}ol,ul{/* 去除自带的ugly样式。 */list-style:none }/* 这些节点部分属性没有继承父节点样式，所有继承一下，并取消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'] {/* 可点击小手 */cursor: pointer;}/* 取消部分浏览器数字输入控件的操作按钮 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中的内边框和填充。*/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 {/* 有些浏览器会显示template 不过template标签用的也少，自行取舍。 */display: none;}input,textarea,button,select{border:none;}input:focus,textarea:focus,button:focus,select:focus{outline: none;/* 木有外边框 */}- 下一次学习再来记录。
- 白白
总结
以上是生活随笔为你收集整理的哔哩哔哩注册--表单练习的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： MySQL安装及可能出现的问题
- 下一篇： Response文件下载