【前端学习之HTML&CSS进阶篇】-- HTML第五篇 -- 表单练习(Bilibili注册界面模仿)

最新推荐文章于 2022-11-10 13:45:10 发布
最新推荐文章于 2022-11-10 13:45:10 发布
阅读量664 收藏 6
点赞数 2
分类专栏： 前端学习 文章标签： css html 前端 html5 交互
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lc1852109/article/details/123829319
版权

【前端学习之HTML&CSS进阶篇】-- HTML第五篇 – 表单练习(Bilibili注册界面模仿)

文章目录


本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

lc

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css。
在前几节博客中我们学习到了HTML中的表单元素，并简单了解了一下美化样式，这节博客我们来以B站的注册界面为例，进行一个简单的实际练习。

代码实现

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
body{
    line-height: 1.5;
    background-image: url(../bg.png);
}
.gap{
    margin-top: 200px;
}
.form{
    width: 980px;
    margin: 1em auto;
}
.form h2{
    text-align: center;
    font-size: 38px;
    border-bottom: 1px solid #ddd;
    height: 30px;
    margin-bottom: 60px;
}
.form h2 span{
    background-color: #fff;
    padding: 0 20px;
}
/* 统一a元素颜色 */
a{
    color: #00a1d6;
}
/* 统一文本框样式 */
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;
    color: #606266;
    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;
}
/* 表单区域 */
.form .form-area{
    width: 423px;
    margin: 0 auto;
}
.form .form-area .form-item{
    margin: 50px 0;
    position: relative;
}
.form .form-area .form-item .error{
    position: absolute;
    width: 240px;
    right: -250px;
    color: #f45d90;
    top: 10px;
    font-size: 12px;
    /* 默认隐藏，方便JS书写 */
    display: none;
}
/* 当左边的输入有错误时，显示错误信息 */
.form .form-area .form-item.haserror .error{
    display: block;
}.form .form-area .form-item.haserror input{
    border-color: #f45d90;
}
.form .form-area .form-item .select .select-item{
    float: left;
    height: 40px;
    width: 140px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    box-sizing: border-box;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.form .form-area .form-item .select .select-item{
    position: relative;
}
.form .form-area .form-item .select .select-item ul{
    /* 默认隐藏 */
    display: none;
    /* 最大高度 */
    max-height: 256px;
    /* 溢出滚动条 */
    overflow-y: scroll;
    color: #606266;
    background-color: #fff;
    padding: 10px 0;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 50px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;

}
.form .form-area .form-item .select .select-item ul li{
    height: 34px;
    padding: 0 20px;
    cursor: pointer;
    line-height: 34px;
}
.form .form-area .form-item .select .select-item ul li:first-child{
    color: #00a1d6;
    font-weight: bold;
}
.form .form-area .form-item .select .select-item ul li:hover{
    background-color: #f5f7fa;
}
.form .form-area .form-item .select .input{
    float: left;
    height: 40px;
    width: 283px;
}
.form .form-area .form-item .select .input input{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.form .form-area .form-item .select .select-item .title{
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    color: #909399;
    cursor: pointer;
}
.form .form-area .form-item button{
    height: 40px;
    background-color: #00a1d6;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}
.form .form-area .form-item button:hover{
    background-color: #33b4de;
}
.form .form-area .form-item .sncode{
    width: 130px;
    height: 36px;
    position: absolute;
    right: 2px;
    top: 2px;
}
.form .form-area .readme{
    margin-top: -40px 0;
    font-size: 12px;
}
.form .form-area .readme .checkbox{
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    box-sizing: border-box;
}
.form .form-area .readme input{
    display: none;
}
.form .form-area .readme input:checked+.checkbox{
    border-color: #00a1d6;
}
.form .form-area .readme input:checked+.checkbox::after{
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    background-color: #33b4de;
    border-radius: 2px;
    margin-left: 2.5px;
    margin-top: 2.5px;
}
.form .form-area .form-item .fill{
    box-sizing: border-box;
    width: 100%;
}
.form .form-area .tip{
    margin-top: -40px; 
    font-size: 12px;
    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;
}

<!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="./css/reset.css">
    <link rel="stylesheet" href="./css/routine.css">
</head>
<body>
    <div class="gap"></div>
    <div class="form">
        <h2>
            <span>注册</span>
        </h2>
        <div class="form-area">
            <div class="form-item">
            <!-- <div class="form-item haserror"> -->
                <input type="text" placeholder="账号">
                <div class="error">
                    该昵称已被他人占用
                </div>
            </div>
            <div class="form-item">
            <!-- <div class="form-item haserror"> -->    
                <input type="password" placeholder="密码 (6-16个字符组成，区分大小写)">
                <div class="error">
                    密码强度不够
                </div>
            </div>
            <div class="form-item">
                <div class="select clearfix">
                    <div class="select-item">
                        <div class="title">
                            中国大陆
                        </div>
                        <ul>
                            <li>Lorem.</li>
                            <li>Nemo!</li>
                            <li>Nobis.</li>
                            <li>Porro.</li>
                            <li>Eum.</li>
                            <li>Nisi!</li>
                            <li>Unde!</li>
                            <li>Esse!</li>
                            <li>Eveniet.</li>
                            <li>Consectetur!</li>
                        </ul>
                    </div>
                    <div class="input">
                        <input type="text" placeholder="填写常用的手机号">
                    </div>
                </div>
            </div>
            <div class="form-item">
                <input type="text" placeholder="请输入短信验证码">
                <button class="sncode" type="button">点击获取</button>
            </div>
            <div class="readme">
                <label>
                    <input type="checkbox">
                    <span class="checkbox"></span>
                    <span>我已同意</span>
                        <a href="">《bilibili弹幕网用户使用协议》</a>
                        和
                        <a href="">《bilibili弹幕网账号中心规范》</a>
                </label>
            </div>
            <div class="form-item">
                <button class="fill">注册</button>
                <!-- <button class="fill" disabled>注册</button> -->
            </div>
            <div class="tip">
                <a href="">已有账号，直接登陆&gt;</a>
            </div>
        </div>
    </div>
</body>
</html>

结果展示

在这里插入图片描述
怎么样，是不是感受到了前端学习的魅力呢，任何一个复杂的网站，都是由我们学过的一些知识灵活结合而成的，我们在学习的过程中，要不断的进行相关的练习，熟练掌握各种技巧，就可以实现网站的设计。

总结

本节博客结束后，我们关于HTML的部分就彻底结束了，接下来会不定期（可能会是两天一更，也可能是三天一更）更新关于CSS进阶部分的内容，敬请期待。

在这里插入图片描述

生如昭诩
关注
专栏目录
前端学习（30）：表单练习
歌谣的博客
12-06 294
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
Web前端开发中的表单练习
Jackeyloveadzz的博客
08-25 743
在web前端开发中，练习tabled的使用是非常重要的，通过表单的练习可以很好的帮助我们掌握表单的使用方式。 针对最后一行，设置第二个table，该table中设置table-layout: fixed;属性（浏览器自动表格布局算法），可达到td自动平分tr的效果。
html表单的练习
lyn789的博客
08-24 848
一个表单的练习， 这是在网页显示中的展示。 form.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
Web前端——表格表单练习
qq_53715074的博客
11-10 2305
要求： 网页源代码： 网页效果图： 要求： 网页源代码： 网页效果图： 要求： 网页源代码： 网页效果图：
【html】表单元素练习
萌宅鹿的技术小屋
01-18 411
源于 how2j教程 实现如下效果： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312"> </head> <body> <table width="100%" > <tr&g...
html5 案例练习（注册页面）
baipenggui_bo
08-16 450
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>世纪佳缘</title> </head> <body> <table width="600" align="center" > <caption><h4>青春不常在，抓紧谈恋爱</h...
Web前端开发大作业-低仿Bilibili，纯Html、CSS、JavaScript实现
05-31
网站基于Html5、CSS3和原生JavaScript实现，参照Bilibili的设计，并包含各种常用元素、样式、交互功能，内容丰富，可供前端入门人员参照学习。 2.1整体设计 Dilidili整体以白色为主色调，纯净、简约兼容性好，有效...
bilibili-html-demo:一些仅由HTML，CSS和Little Js设计的漂亮网站！
04-23
B 站 HTML 学习 demo 首页 可能需要使用的资源 CDN <!-- font-awesome --> <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" /> 目录 效果名 预览 源码 登录页 ...
bilibili-api-docs:bilibili-api 的开发文档
07-24
bilibili-api-docs Python 库 的文档。 请向 dev 分支发起 PR。 若新增文档命名请使用 连字符命名法，如：this-is-an-example.md。 并在 docs/_sidebar.md 中增加对应目录。 使用技术：
基于Bilibili前端面试经验的Html、JavaScript、TypeScript、CSS设计源码宝典
最新发布
09-29
本项目为Bilibili前端面试精华版源码宝典，汇聚了Html、JavaScript、TypeScript和CSS等前端技术，共计171个文件，包括66个Markdown文件、32个PNG图片、26个HTML文件、25个JavaScript文件、11个JPG图片、2个JSON文件...
HTML网页练习之网易邮箱注册页面
12-01
使用HTML+CSS+JavaScript搭建的网易邮箱注册页面，所用代码和素材都已经包含在压缩包中，涉及网页的搭建和客户端对用户名、密码等的格式验证。欢迎大家下载参考
学习前端的练习页面
05-22
学习前端的练习页面，自己无聊的时候写的想，新人入门可以看看多练习操作啊。很有必要努力学习，找到好工作。主要的功能我也忘记了，可以下载以后自己看，不要差评
bootstrap表单页面练习
11-30
基于bootstrap框架的练习。提供效果图，素材，知识点介绍ppt。完整页面、既能练习整体布局，又能练习表单知识点。正是好材料啊。只要1分哦
html+css高仿B站的注册页面
08-07
自己练习html和css时做的一个高仿B站注册页面，没有用到js，单纯是静态页面，仅供大家学习参考！禁止商用！
登录和注册html页面（简洁美观）
05-25
简洁美观的登录和注册html页面，从17素材网站充钱下载所得，分享出来供大家使用。
bilibili-img-uploader：Chrome扩展程序bilibili img uploader。
01-30
bilibili_img_uploader（Chrome） 哔哩哔哩图片上传插件，可以使用作为一个图床，国内速度快，各种图片格式选择。由于发布到Chrome插件市场需要收费，所以推荐直接下载解压之后用Chrome类浏览器手动导入安装即可。 ...
HTML表单小练习
longting_的博客
05-20 1500
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
前端练手小项目「表单」「JS」「04」
weixin_60789461的博客
03-03 545
学长仓库里的项目，做一遍的目的是做JS练习&&找到常用JS函数 效果图： 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de.
Web练习2 表单网页
cjf16337023的博客
03-26 486
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>Blog Edit</title> <style type="text/css"> *{font-size:20px;font-family:...
PC端HTML&CSS学习笔记详解：从基础到实战应用
本资源是一份详细的PC端HTML与CSS学习笔记，旨在帮助读者深入理解这两种前端开发基石。HTML部分涵盖了HTML的基本概念，如什么是HTML、常用的浏览器以及Web标准，强调了HTML语法规范，包括文档类型声明DOCTYPE、lang...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

生如昭诩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值