哔哩哔哩注册–表单练习
HTML代码
- 可能代码有些不足或者用词不当等
- 希望大家能够见谅
- 这是一次bilibili的注册表单练习
- 里面都有详细注释
- 当然一个网页有许多种 这只是其中一种 是为了相互交流
- 希望大家喜欢
- 最后的效果是这样子的
<!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>注册 </span></h2>
<div class="form-area">
<div class="form-item haserror">
<input type="text" name="" id="" placeholder="账号">
<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="填写手机号码">
</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" name="" id="">
<span class="checkbox"></span>
<span>
我已同意
<a href="#">
《哔哩哔哩弹幕网用户使用协议》
</a>
和
<a href="#">
《哔哩哔哩隐私政策》
</a>
</span>
</label>
</div>
<div class="form-item">
<button type="button" class="fill">注册</button>
</div>
<div class="readme txtright">
<a href="">已有账号，直接登录></a>
</div>
</div>
</div>
</body>
</html>
- 接下来就是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;
/* 木有外边框 */
}
扫一扫
649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
