【HTML练习】登录注册界面模板1

1、引言

你是否有过相关设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

登录注册界面采用html5,css3技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，回复“电影登录模版免费获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面

登录注册界面采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用），java，python等相关作业使用自己常使用的工具亦可完成相关二次开发。

2.3、作品技术介绍

html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计

3、案例演示

首页，首页运用轮播图展示相关影片，带有导航栏可以跳转更多的界面，以及跳转到登录注册界面

相关代码如下：

 <!-- 导航栏 --><nav><input type="checkbox" id="check"><label class="checkbtn" for="check"><img class="checkbtn_img" src="data:images/ul.png" alt="列表"></label><label><img src="data:images/logo.png" alt="" class="logo_img"></label><ul><li><a class="action" href="#">精选</a></li><li><a href="Subpage/TVseries/TVseries.html">电视剧</a></li><li><a href="Subpage/Movie/movie.html">电影</a></li><li><a href="Subpage/variety show/variety show.html">综艺</a></li><li><a href="Subpage/Documentary/Documentary.html">纪录片</a></li><li><a href="Subpage/table/table.html">注册/登录</a></li></ul></nav><!-- 轮播图 --><div class="banner"><div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide"><img src="data:images/swp1.jpg" alt="" srcset=""></div><div class="swiper-slide"><img src="data:images/swp2.jpg" alt="" srcset=""></div><div class="swiper-slide"><img src="data:images/swp3.jpg" alt="" srcset=""></div><div class="swiper-slide"><img src="data:images/swp4.jpg" alt="" srcset=""></div><div class="swiper-slide"><img src="data:images/swp5.jpg" alt="" srcset=""></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></div><!-- 内容块 --><div class="content"><!-- 电视剧 --><div class="TV_series"><div class="max_title"><a href="Subpage/TVseries/TVseries.html">电视剧</a></div><!-- 移动端 --><div class="mobile_max"><div class="pc_box"><div class="pc_main"><div class="back_img"><img src="data:images/tv_1.jpg" class="back_img_wh"></div></div><div class="introduce"><span>完美伴侣</span><span>高圆圆回轨 陷入中年爱情</span></div></div><div class="pc_box"><div class="pc_main"><div class="back_img"><img src="data:images/tv_2.jpg" class="back_img_wh"></div></div><div class="introduce"><span>别宠我·短剧首播</span><span>少女为进冷宫花式怼皇帝</span></div></div><div class="pc_box"><div class="pc_main"><div class="back_img"><img src="data:images/tv_4.jpg" class="back_img_wh"></div></div><div class="introduce"><span>开端·1.11首播</span><span>白敬亭赵今麦重启人生</span></div></div><div class="pc_box"><div class="pc_main"><div class="back_img"><img src="data:images/tv_5.jpg" class="back_img_wh"></div></div><div class="introduce"><span>雪中悍刀行</span><span>张若昀胡军共赴江湖</span></div></div><div class="pc_box"><div class="pc_main"><div class="back_img"><img src="data:images/tv_6.jpg" class="back_img_wh"></div></div><div class="introduce"><span>镜·双城</span><span>李易峰陈钰琪跨世虐恋</span></div></div><div class="pc_box"><div class="pc_main"><div class="back_img"><img src="data:images/tv_7.jpg" class="back_img_wh"></div></div><div class="introduce"><span>你是我的荣耀</span><span>杨洋迪丽热巴共谱浪漫爱情</span></div></div></div><!-- PC端 --><div class="pc_max"><div class="pc_box"><div class="pc_main"><div class="back_img"><img src="data:images/tv_1.jpg" class="back_img_wh"></div></div><div class="introduce"><a href="#"><span>完美伴侣</span></a><span>高圆圆回轨 陷入中年爱情</span></div></div><div class="pc_box"><div class="pc_main"><div class="back_img"><img src="data:images/tv_2.jpg" class="back_img_wh"></div></div><div class="introduce"><a href="#"><span>别宠我·短剧首播</span></a><span>少女为进冷宫花式怼皇帝</span></div></div><div class="pc_box"><div class="pc_main"><div class="back_img"><img src="data:images/tv_4.jpg" class="back_img_wh"></div></div><div class="introduce"><a href="#"><span>开端·1.11首播</span></a><span>白敬亭赵今麦重启人生</span></div></div><div class="pc_box"><div class="pc_main"><div class="back_img"><img src="data:images/tv_5.jpg" class="back_img_wh"></div></div><div class="introduce"><a href="#"><span>雪中悍刀行</span></a><span>张若昀胡军共赴江湖</span></div></div><div class="pc_box"><div class="pc_main"><div class="back_img"><img src="data:images/tv_6.jpg" class="back_img_wh"></div></div><div class="introduce"><a href="#"><span>镜·双城</span></a><span>李易峰陈钰琪跨世虐恋</span></div></div><div class="pc_box"><div class="pc_main"><div class="back_img"><img src="data:images/tv_7.jpg" class="back_img_wh"></div></div><div class="introduce"><a href="#"><span>你是我的荣耀</span></a><span>杨洋迪丽热巴共谱浪漫爱情</span></div></div></div></div>

登录以及注册界面

登录注册界面有相关的校验，可以学习相关的tab界面的书写，相关代码如下：

<!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"><link rel="stylesheet" type="text/css" href="css/table.css"><title>Table</title>
</head><body><div class="table"><div class="table_item"><div class="active">登录</div><div>注册</div></div><div class="table_center"><form method="post" id="Resetform" name="addForm" onsubmit="return false"><div id="table_center_div" class="div_v"><p>账号</p><input type="text" name="name" id="name" placeholder="请输入用户名" onblur="checkName()"><br /><span class="span_p" id="span_name">*请输入合法昵称</span><p>密码</p><input type="password" name="pwd" id="pwd" placeholder="请输入6位以上有效数字" onblur="checkPwd()"><span class="span_p" id="span_pwd">*请输入6位以上有效数字</span><br /><input type="button" class="submit_btn" id="btn" value="登录" onclick="chlik_sub()" name=""><input type="button" class="reset_btn" onclick="resetBtn()" value="重置"><input type="button" class="reset_btn" onclick="backBtn()" value="返回首页"></div></form><form method="post" id="Resetform"><div class="div_v"><p>用户名</p><input type="text" name="username" id="username" placeholder="请输入用户名" onblur="checkUsername()"><span class="span_p" id="span_username">*请输入用户名</span><p>密码</p><input type="password" name="userpwd" id="userpwd" placeholder="请输入6位以上有效数字" onblur="checkUserpwd()"><span class="span_p" id="span_userpwd">*请输入6位以上有效数字</span><p>手机号</p><input type="text" name="userphone" id="userphone" placeholder="请输入手机号" onblur="checkUserphone()"><span class="span_p" id="span_userphone">*请输入手机号</span><br /><input type="button" class="submit_btn" onclick="subBtn()" id="Btn" value="注册"></div></form></div></div><script src="js/table.js"></script>
</body></html>

总结

以上就是本次项目的全部内容，需要交流或者免费获取代码请关注微信公众号：coding加油站，回复“电影登录模版”免费获取

【HTML练习】登录注册界面模板1相关推荐

【Vue作业]---Vue登录注册界面
1.引言你是否有过相关设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题.你想要解决 ...
php mysql注册登录界面_php实现登录注册界面
php实现登录注册界面首先你要搭建一个自己的数据库我用wamp64创了一个people的数据库具体操作可以参考该搭建链接: 这里就讲下我实现的功能代码: 创建sql.func.php实现一些基本 ...
右侧按钮登录注册html,翻转式用户登录注册界面设计
这是一款非常实用的翻转式用户登录注册界面设计效果.该用户登录注册界面使用纯CSS3来制作,在用户点击登录和注册两个按钮时,登录和注册界面可以以水平翻转的方式来回切换,效果非常的酷. 制作方法 HTML ...
Android开发：登录/注册界面的编写
目录新建一个空项目(或Activity) 在xml中绘制登录界面关掉ActionBar 运行(最终效果图) 后记在实际开发中,几乎所有的APP都会涉及到用户注册/登录页面的制作,因此本文以And ...
html5/css登录注册网页模板
html5/css登录注册网页模板免费下载地址:https://www.html5tricks.com/9-useful-html5-css3-login-form.html
python做一个登录注册界面_Python 实现简单的登录注册界面
Python 实现简单的登录注册界面注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import message ...
python做一个登录注册界面_python做一个登录注册界面的方法
python做一个登录注册界面的方法发布时间:2020-08-21 10:37:05 来源:亿速云阅读:111 作者:小新这篇文章主要介绍python做一个登录注册界面的方法,文中介绍的非常详细 ...
python-简单用户登录注册界面实现
用户登录注册界面实现 # 登录注册页面 # 登录注册系统 # 要求:能够实现注册新用户.能够实现老用户登录.能够退出系统. # 1.先打印系统首页 # 2.注册--注册成功,用户名已存在 # 3.登录 ...
Lance老师UI系列教程第三课-QQ登录注册界面的实现（android-2012最新版）
分类: android UI教程2012-08-06 22:37 3731人阅读评论(6) 收藏举报 uiandroidqqlayoutbutton UI系列教程第三课:腾讯登录注册界面的实现今 ...
AndroidStudio实现用户登录注册界面代码（一）
首先使用Android Studio的布局文件xml实现界面设计第一步:新建工程项目MyAPP 选择Empty Activity 点击"下一步" 1.在res/layout/ac ...

【HTML练习】登录注册界面模板1

【HTML练习】登录注册界面模板1相关推荐

最新文章

热门文章