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、项目展示图
登录界面1：
部分代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生登录</title>
<link rel="stylesheet" href="./sass/interface.css">
<script src="./js/注册页面.js"></script>
</head>
<body>
<form class="log-in">
<h1>用户登录</h1>
<p><input type="text" placeholder="账号" class="number"></p>
<p><input type="password" placeholder="密码" class="userpwd"></p>
<p class="Click-on">
<a href="./班级管理页面.html"><input type="button" value="登录" class="Board"></a>
<a href="#"><input type="button" value="注册" id="registered"></a>
</p>
<div>
<a href="#">忘记密码</a>
<a href="#">找回密码</a>
</div>
<div class="other">
<ul class="box">
<li class="List">
<a href="#">
<img src="./img/图层 2.png" alt="">
<span><b>Q Q</b></span>
</a>
</li>
<li class="List">
<a href="#">
<img src="./img/图层 3.png" alt="">
<span><b>微信</b></span>
</a>
</li>
</ul>
</div>
</form>
<div id="registeredpage">
<!--弹窗头部-->
<div class="modal">
<div class="modal-header">
<b>
<p>用户注册</p>
<span class="close">×</span>
</b>
</div>
<!--弹窗文本-->
<div class="modal-content">
<div class="account">
<span>账号：</span>
<input type="text" placeholder="请输入学号" class="student-ID">
</div>
<div class="secret">
<span>密码：</span>
<input type="password" placeholder="请输入密码" class="login-password">
</div>
<div class="article">
<input type="button" value="确认并注册" class="affirm">
</div>
</div>
</div>
</div>
</body>
</html>登录界面2：
部分代码：
<html>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>登录(Login)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSS -->
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/supersized.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="assets/js/html5.js"></script>
<![endif]-->
<script type='text/javascript'>
var code ; //在全局定义验证码
function createCode(){
code = "";
var codeLength = 4;//验证码的长度
var checkCode = document.getElementById("code");
var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
'S','T','U','V','W','X','Y','Z');//随机数
for(var i = 0; i < codeLength; i++) {//循环操作
var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）
code += random[index];//根据索引取得随机数加到code上
}
checkCode.value = code;//把code值赋给验证码
}
//校验验证码
function validate(){
var password=document.getElementById("password").value;
var username=document.getElementById("username").value;
if(username!="pengxiang"){
alert("用户名不正确！");
return false;
}
if(username!="123456"){
alert("密码不正确！");
return false;
}
var inputCode = document.getElementById("Captcha").value.toUpperCase(); //取得输入的验证码并转化为大写
if(inputCode.length <= 0) { //若输入的验证码长度为0
alert("请输入验证码！"); //则弹出请输入验证码
return false;
}else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
alert("验证码输入错误！"); //则弹出验证码输入错误
createCode();//刷新验证码
document.getElementById("Captcha").value = "";//清空文本框
return false;
}else { //输入正确时
alert("登录成功,正在跳转...");
}
return true;
}
function agree(){
if(document.getElementById('cb').checked){
alert("您已同意服务条款！");return true; }
else
alert("您尚未同意服务条款！");
return false;
}
</script>
</head>
<body>
<div class="page-container">
<h1>登录(Login)</h1>
<form action="Modest/index.html" method="post">
<input type="text" name="username" class="username" placeholder="请输入您的用户名！">
<input type="password" name="password" class="password" placeholder="请输入您的用户密码！">
<input type="Captcha" class="Captcha" name="Captcha" placeholder="请输入验证码！">
<input type="button" id="code" onclick="createCode()" style="height:40px;width:120px" title='点击更换验证码' />
<button type="submit" class="submit_button">登录</button>
<div class="error"><span>+</span></div>
</form>
</div>
<!-- Javascript -->
<script src="assets/js/jquery-1.8.2.min.js" ></script>
<script src="assets/js/supersized.3.2.7.min.js" ></script>
<script src="assets/js/supersized-init.js" ></script>
<script src="assets/js/scripts.js" ></script>
</body>
<div style="text-align:center;">
</div>
</html>
登录界面3：
其中登录3界面带有3D动画，可以出现相关的动画效果，部分代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆/注册</title>
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="https://unpkg/font-awesome@4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<a href="#" class="login"><i class="fa fa-user-circle"></i></a>
</header>
<main>
<div class="flip-modal login">
<div class="modal modal-login">
<a href="#" class="close fa fa-close"></a>
<div class="tabs">
<a href="#" class="login active">登陆</a>
<a href="#" class="register">注册</a>
</div>
<div class="content">
<div class="errormsg"></div>
<form action="/login" method="post">
<div class="input-field">
<i class="fa fa-user-o"></i>
<input type="text" name="username" placeholder="用户名">
</div>
<div class="input-field">
<i class="fa fa-lock"></i>
<input type="password" name="password" placeholder="密码">
</div>
<div class="input-field">
<button type="submit">登录</button>
</div>
</form>
</div>
</div>
<div class="modal modal-register">
<a href="#" class="close fa fa-close"></a>
<div class="tabs">
<a href="#" class="login">登陆</a>
<a href="#" class="register active">注册</a>
</div>
<div class="content">
<div class="errormsg"></div>
<form action="/register" method="post">
<div class="input-field">
<i class="fa fa-user-o"></i>
<input type="text" name="username" placeholder="请输入用户名">
</div>
<div class="input-field">
<i class="fa fa-lock"></i>
<input type="password" name="password" placeholder="请输入密码">
</div>
<div class="input-field">
<i class="fa fa-lock"></i>
<input type="password" name="password2" placeholder="再次输入密码">
</div>
<div class="input-field">
<button type="submit">注册</button>
</div>
</form>
</div>
</div>
</div>
</main>
<script>
function $(selector) {
return document.querySelector(selector);
}
$('header .login').onclick = function(e){
e.stopPropagation()
$('.flip-modal').style.display = 'block'
}
$('.flip-modal').addEventListener("click",function(e){
e.stopPropagation()
if(e.target.classList.contains('login')){
$('.flip-modal').classList.remove('register')
$('.flip-modal').classList.add('login')
}
if(e.target.classList.contains('register')){
$('.flip-modal').classList.remove('login')
$('.flip-modal').classList.add('register')
}
if(e.target.classList.contains('close')){
$('.flip-modal').style.display = 'none'
}
})
document.addEventListener("click",function(){
$('.flip-modal').style.display = 'none'
})
$('.modal-login form').addEventListener("submit",function(e){
e.preventDefault()
if(!/^\w{3,8}$/.test($('.modal-login input[name=username]').value)) {
$('.modal-login .errormsg').innerText = '用户名需输入3-8个字符，包括字母数字下划线'
return false
}
if(!/^\w{6,16}$/.test($('.modal-login input[name=password]').value)) {
$('.modal-login .errormsg').innerText = '密码需输入6-16个字符，包括字母数字下划线'
return false
}
this.submit()
})
$('.modal-register form').addEventListener("submit",function(e){
e.preventDefault()
if(!/^\w{3,8}$/.test($('.modal-register input[name=username]').value)) {
$('.modal-register .errormsg').innerText = '用户名需输入3-8个字符，包括字母数字下划线'
return false
}
if(!/^\w{6,16}$/.test($('.modal-register input[name=password]').value)) {
$('.modal-register .errormsg').innerText = '密码需输入6-16个字符，包括字母数字下划线'
return false
}
if($('.modal-register input[name=password]').value !== $('.modal-register input[name=password2]').value) {
$('.modal-register .errormsg').innerText = '两次密码不一致'
return false
}
this.submit()
})
</script>
</body>
</html>请关注微信公众号：coding加油站获取
更多推荐
【HTML作业】HTML登录界面
发布评论