TEST___学习记录-javaweb_css_红浪漫怀旧主题KTV的实现 

！---首页实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎光临红浪漫</title>
</head>
<body background="pages/3.jpg" >
<div align="center">
<h1><font size="87" color="#ffc0cb">欢迎光临红浪漫</h1>

<a href="pages/login.html" target="_blank"> <font face="微软雅黑" size="20" color="#ffc0cb">我要登录 </font></a><br>
<a href="pages/login_regest.html" target="_blank"><font face="微软雅黑" size="20" color="pink"> 我要注册 </font></a>


</div>

</body>
</html>
登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆界面</title>
</head>
<body bgcolor="#ffc0cb">
<form action="login_scuess.html" method="get">
<div align="center"><font size="36px" color="#dc143c">欢迎登录红浪漫怀旧年代主题KTV</font><br><br><br>
用 户 名<input id = "username" type="text" name="username"><br><br>
密    码<input id = "password"  type="password" name="pwd"><br><br>
    <input id="btnSub" type="submit" value="登录">

</div>
</body>
<script type="text/javascript">
     var btnSub = document.getElementById("btnSub");
    btnSub.onclick = function (){
        var unEle = document.getElementById("username");
        var unPWD = document.getElementById("password");
        var unValue = unEle.value;
        var PWDValue = unPWD.value;
        if (unValue==""){
            alert("用户名为空，请重新输入！！")
            return false;
        }
        if (PWDValue == "" ){
            alert("密码不能为空，请输入密码！！")
            return false;
        }return true;
    }
</script>

</html>
登录成功页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆成功</title>
</head>
<body background="4.png">

<h1><font color="#ffc0cb">登陆成功~</font></h1>
<h2><font color="#ffc0cb">欢迎光临~</font></h2>
<h3><font color="#ffc0cb">欢迎光临~</font></h3>
<h4><font color="#ffc0cb">欢迎光临~</font></h4>
<h5><font color="#ffc0cb">欢迎光临~</font></h5>
<h6><font color="#ffc0cb">欢迎光临~</font></h6>
</body>
</html>

注册页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
</head>
<body bgcolor="#ffe4c4">
<form action="regest_scuess.html" method="get">
    <div align="center"><font size="36px" color="#dc143c">欢迎注册红浪漫KTV</font><br><br><br><br>
用户名<input id = "username"  type="text" name="username"><br><br>
密  码<input id = "password" type="password" name="pwd"><br><br>
性  别 <input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女<br>
爱  好<input type="checkbox" name="hobby" value="sing" checked>sing
<input type="checkbox" name="hobby" value="dance">dance
<input type="checkbox" name="hobby" value="rap" >rap<br>
国  别 <select name="like">
    <option value="cn" >中国</option>
    <option value="mg" >美国</option>
    <option value="dg" >德国</option>
    <option value="xrb" >小日子过的不错的日本人</option>
</select><br>
<input id="sub" type="submit" value="注册">
<input type="reset">
    </div>

</body>
<script type="text/javascript">
    var sub = document.getElementById("sub")
    sub.onclick = function (){
        var uname = document.getElementById("username");
        var upwd = document.getElementById("password");
        var nameValue = uname.value;
        var pwdValue = upwd.value;
        if (nameValue == ""){
            alert("用户名不能为空！")
            return false;
        }if (pwdValue == ""){
            alert("密码不能为空！")
            return false;
        }return true;
    }
</script>
</html>

注册成功页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册成功</title>
</head>
<body bgcolor="#ffc0cb">
<div align="center"><font size="46px" color="#dc143c">注册成功，欢迎加入光临红浪漫~~~</font><br>
    <a href="login.html"><font size="36px" color="black">点击返回登录页面</font></a>
</div>
</body>
</html>

 

测试


posted @ 2021-09-06 20:26  Yapi酱  阅读(66)  评论(1)    收藏  举报