利用HTML,CSS,JS实现登录页面的制作

最新推荐文章于 2024-09-29 11:40:01 发布

华丽的臻丶

最新推荐文章于 2024-09-29 11:40:01 发布

阅读量2k

点赞数 1

分类专栏： html应用实战文章标签： html css js

本文链接：https://blog.csdn.net/hualidezhen/article/details/115185097

版权

html应用实战专栏收录该内容

2 篇文章 0 订阅

订阅专栏

利用HTML,CSS,JS实现登录页面的制作

最近在学习html的前端技术，主要是页面的制作，加上之前也学习了css和js，为了巩固知识点，同时提高自己实践能力，打算结合这些做一个登录和注册的页面（这个项目里面包括了三大技术大部分的知识点，在html前端学习中也是一个比较典型的一个案例）
这个项目将会分两章发出，这章实现登录页面
一：登录页面的基本代码

<!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>
</head>
<style>
    @import './6-邮箱登录.css';
    	body{
		font-size: 20px;
		margin: 0px;
		padding: 0px;
		background: url("logo.gif");
		background-repeat: no-repeat;
		background-position: right,bottom;
		background-color: #7DDC87;
	}
	input {
		border: 1px solid yellow;
		border-radius:20px;
		line-height: 25px;
	}
	.btn{
		width:70px;
		height:30px;
		color:blue;
		font-size:28sp;
		border:1px solid yellow;
		border-radius:20px;
	}
	 .btn:link .btn:VISITED {
		background-color: #F0F0F0;
    } 
    .btn:HOVER {
		background-color: #148D08;

	}
    
</style>
<script type="text/javascript">
    function checkRegister(form){
        //验证昵称 根据name属性取组件 及当前登录页面输入的用户名
        var newname=form.name.value.trim();
        //获取注册成功后的用户名
        var testname=document.getElementById('name').value
        if(newname!=testname||newname==null){
            alert("用户名错误,请重试");
            return false;
        }
        //获取当前登录页面输入的密码
        var newpwd =form.pwd.value;
        //获取注册成功后传入的密码
        var testpwd =document.getElementById('pwd').value
        if(newpwd!=testpwd||newpwd==null)
            {
                alert("用户名错误,请重试");
                 return false;
            }
    }
    </script>
<body>
    <center>
		<form action="6.课程表.html" method="get" onsubmit=" return checkRegister(this)">
			<table>
				<tr><td>用户名:</td>
				<td><input type="text" name="name" id="username"></td>
					<td>@163.com</td></tr>
				<tr><td>密&nbsp;&nbsp;码:</td>
				<td><input type="password" name="pwd" id="username"></td>
					<td><a href="">忘记密码</a></td></tr>	
			</table>
				<input type="submit" value="登录" class="btn">
					&nbsp;<a href="7-注册页面.html">注册邮箱</a>
		</form>
	</center>
</body>
</html>

CSS文件（页面的细节优化中，内部样式和外部样式两种方式我都用上了）

div{
	color:red;
	font-size:30px;
	}
	#div1{
	color:blue;
	font-weight:bold;
	font-size:30px;
	}
	.c1{
	color:red;
	font-size:30px
	}
	.c2{
	color:bule;
	}
	 div a{
		color:red;
		cursor:pointer;
		
	}