Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

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

coding加油站 2022-08-06 10:14:30 阅读数:1 评论数:0 点赞数:0 收藏数:0

登录界面的练习作业模版

案例图如下:

更多代码请关注公众号(coding加油站)回复“电影登录模版”免费获取

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

 相关代码如下:

 <!-- 导航栏 -->
<nav>
<input type="checkbox" id="check">
<label class="checkbtn" for="check">
<img class="checkbtn_img" src="images/ul.png" alt="列表">
</label>
<label>
<img src="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="images/swp1.jpg" alt="" srcset="">
</div>
<div class="swiper-slide">
<img src="images/swp2.jpg" alt="" srcset="">
</div>
<div class="swiper-slide">
<img src="images/swp3.jpg" alt="" srcset="">
</div>
<div class="swiper-slide">
<img src="images/swp4.jpg" alt="" srcset="">
</div>
<div class="swiper-slide">
<img src="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="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="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="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="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="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="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="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="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="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="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="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="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加油站)回复“电影登录模版”免费获取

版权声明
本文为[coding加油站]所创,转载请带上原文链接,感谢
https://blog.csdn.net/pandas23/article/details/126166542

支付宝红包,每日可领(支付宝免费1-2元支付红包)