2022年欢迎来到Jsp编程第三课时——综合案例（三）

2023-07-14 58

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 2022年欢迎来到Jsp编程第三课时——综合案例（三）

JSP代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
    *{
      text-align: center;
      align-content: center;
      margin: 30px;
      font-size: 30px;
      font-weight: 700;
      font-family: "微软雅黑";
      padding: 2px;
      color: red;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: linear-gradient(red, pink, violet);
    }
    article{
    }
   </style>
<title>登录页面</title>
</head>
<body>
<article>
      <h1>欢迎来到2021年个人QQ登录界面</h1>
    <form action="ServlectDengLuLogic" method="post">
    <img src="img/b.jpg"  style="border-radius: 70%; height: 200px;"/>
        用户名:<input type="text" name="user" id="text" maxlength="8"><br>
        身份证号:<input type="text" name="user" id="text" maxlength="18"><br>
        QQ号：<input type='text'  name='qq'><br>
        密码:<input type='password' name='psd'><br>
<input type='checkbox' value='flase' checked='checked' name='ispsd'>记住密码&nbsp;&nbsp;    
    <input type='checkbox' value='true' name='islogin'>自动登录<br>
    <input type='submit' value='登录'><br>
    </form>
    </article>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: linear-gradient(red, orange, yellow, pink);
}
body {
    background-color: #ffffff;
}
li {
    list-style: none;
}
left {
    width: 480px;
    float: left;
}
.header {
    width: 1040px;
    height: 100px;
    float: right;
}
.top {
    float:  right;
}
.main {
    width: 500px;
    margin: 0 auto;
}
.one h1 {
    font-size: 46px;
    font-weight: 400;
    margin-bottom: 20px;
}
.two {
    font-size: 28px;
    color: #333333;
    margin-bottom: 64px;
    float: left;
}
.there {
    float: right;
    margin-bottom: 64px;
}
.there a {
    font-size: 28px;
    text-decoration: none;
    color: #359eff;
}
.there a:hover {
    color: #094683;
}
.input-outer input {
    height: 50px;
    width: 438px;
    margin-bottom: 40px;
    border-radius: 10px;
    border: 1px solid #c1c1c1;
    color: #c1c1c1;
    font-size: 20px;
}
.input-outer span,
.input-phone span {
    font-size: 25px;
    text-align: center;
    line-height: 50px;
    color: #333333;
}
.input-type select {
  margin: auto;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #c1c1c1;
    font-size: 20px;
    float: left;
}
.input-phone input {
    height: 50px;
    width: 268px;
    border-radius: 10px;
    border: 1px solid #c1c1c1;
    font-size: 20px;
    margin-left: 20px;
}
.input-qq input {
    height: 50px;
    width: 268px;
    border-radius: 10px;
    border: 1px solid #c1c1c1;
    font-size: 20px;
    margin-left: 20px;
}
.input-home input {
    height: 50px;
    width: 260px;
    border-radius: 10px;
    border: 1px solid #c1c1c1;
    font-size: 20px;
    margin-left: 20px;
}
.input-sex  input{
    height: 50px;
    width: 268px;
    border-radius: 10px;
    border: 1px solid #c1c1c1;
    font-size: 20px;
    margin-left: 20px;
}
.six p {
    color: #c1c1c1;
    font-size: 14px;
}
.sub input {
  align-content: center;
  text-align: center;
    height: 50px;
    width: 440px;
    margin: 40px 0;
    font-size: 20px;
    color: #ffffff;
    background-color: #3588ff;
    border: 1px solid #c1c1c1;
    border-radius: 10px;
}
.type-radio span {
  align-content: center;
  text-align: center;
    font-size: 14px;
    color: #c1c1c1;
}
.footer {
  align-content: center;
  text-align: center;
    margin: 40px 0;
    text-align: center;
    color: #c1c1c1;
    }
h1{
 /* text-shadow: 5px 5px 5px red; */
 color: red;
}
</style>
<title>注册页面</title>
</head>
<body>
<h1 style="background: aquamarine; color: red; font-weight: 900; text-align: center;">欢迎来到2021年个人QQ注册界面</h1>
            <article style="text-align: center; align-content: center; text-align: center;">
             <form action="ServlectZhuCe" method="post">
         <img  src="img/a.jpg" style= "border-radius: 89%;"  height="200px" align="center"/>
             <div class="input-outer">
                  <h1>用户名：</h1><br><input type="text" name="user" id="text" maxlength="8">
             </div>
         <div class="input-sex">
             <h2> 输入性别</h2>
              <h2>男:</h2><input type="radio" name="sex" id="" value="1" checked="checked"/>
      <h2>女:</h2><input type="radio" name="sex" id="" value="0" checked="checked" /> 
             </div> 
             <div class="input-qq">
                     <h1>QQ号：</h1><br><input type="text" name="qq" maxlength="11" minlength="11">
                 </div>
             <div class="input-outer">
                  <h1>密码 ：</h1><br><input type="password" name="psd" id="password" maxlength="16">
             </div>
                 <div class="input-phone">
                     <h1>手机号：</h1><br><input type="text"  name="sj"   maxlength="11" minlength="11" >
                 </div>
                  <div class="input-home">
                     <h1>家庭地址：</h1><br><input type="text"  name="home"   maxlength="11" minlength="11" >
                 </div>
                 <div class="six">
                     <p>可通过手机号找回密码</p>
                 </div>
             </div> 
             <div class="sub">
                 <input type="submit" value="立即注册">
             </div>
             </form>
             </article>
             <div class="type-radio">
                 <input type="radio" checked><span style="text-align: center;">同意开通QQ空间</span>
                 <br>
                 <input type="radio" checked><span style="text-align: center;">我已阅读并同意相关服务条款和隐私政策开始进行登录QQ页面</span>
             </div>
            <div>
              <footer>
                <h1>这是QQ的注册页面</h1>
              </footer>
            </div>
         </div>
     </div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: linear-gradient(red, orange, yellow, pink);
}
body {
    background-color: #ffffff;
}
li {
    list-style: none;
}
left {
    width: 480px;
    float: left;
}
.header {
    width: 1040px;
    height: 100px;
    float: right;
}
.top {
    float:  right;
}
.main {
    width: 500px;
    margin: 0 auto;
}
.one h1 {
    font-size: 46px;
    font-weight: 400;
    margin-bottom: 20px;
}
.two {
    font-size: 28px;
    color: #333333;
    margin-bottom: 64px;
    float: left;
}
.there {
    float: right;
    margin-bottom: 64px;
}
.there a {
    font-size: 28px;
    text-decoration: none;
    color: #359eff;
}
.there a:hover {
    color: #094683;
}
.input-outer input {
    height: 50px;
    width: 438px;
    margin-bottom: 40px;
    border-radius: 10px;
    border: 1px solid #c1c1c1;
    color: #c1c1c1;
    font-size: 20px;
}
.input-outer span,
.input-phone span {
    font-size: 25px;
    text-align: center;
    line-height: 50px;
    color: #333333;
}
.input-type select {
  margin: auto;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #c1c1c1;
    font-size: 20px;
    float: left;
}
.input-phone input {
    height: 50px;
    width: 268px;
    border-radius: 10px;
    border: 1px solid #c1c1c1;
    font-size: 20px;
    margin-left: 20px;
}
.input-qq input {
    height: 50px;
    width: 268px;
    border-radius: 10px;
    border: 1px solid #c1c1c1;
    font-size: 20px;
    margin-left: 20px;
}
.input-home input {
    height: 50px;
    width: 260px;
    border-radius: 10px;
    border: 1px solid #c1c1c1;
    font-size: 20px;
    margin-left: 20px;
}
.input-sex  input{
    height: 50px;
    width: 268px;
    border-radius: 10px;
    border: 1px solid #c1c1c1;
    font-size: 20px;
    margin-left: 20px;
}
.six p {
    color: #c1c1c1;
    font-size: 14px;
}
.sub input {
  align-content: center;
  text-align: center;
    height: 50px;
    width: 440px;
    margin: 40px 0;
    font-size: 20px;
    color: #ffffff;
    background-color: #3588ff;
    border: 1px solid #c1c1c1;
    border-radius: 10px;
}
.type-radio span {
  align-content: center;
  text-align: center;
    font-size: 14px;
    color: #c1c1c1;
}
.footer {
  align-content: center;
  text-align: center;
    margin: 40px 0;
    text-align: center;
    color: #c1c1c1;
    }
h1{
 /* text-shadow: 5px 5px 5px red; */
 color: red;
}
</style>
<title>注册页面</title>
</head>
<body>
<h1 style="background: aquamarine; color: red; font-weight: 900; text-align: center;">欢迎来到2021年个人QQ注册界面</h1>
            <article style="text-align: center; align-content: center; text-align: center;">
             <form action="ServlectZhuCe" method="post">
         <img  src="img/a.jpg" style= "border-radius: 89%;"  height="200px" align="center"/>
             <div class="input-outer">
                  <h1>用户名：</h1><br><input type="text" name="user" id="text" maxlength="8">
             </div>
         <div class="input-sex">
             <h2> 输入性别</h2>
              <h2>男:</h2><input type="radio" name="sex" id="" value="1" checked="checked"/>
      <h2>女:</h2><input type="radio" name="sex" id="" value="0" checked="checked" /> 
             </div> 
             <div class="input-qq">
                     <h1>QQ号：</h1><br><input type="text" name="qq" maxlength="11" minlength="11">
                 </div>
             <div class="input-outer">
                  <h1>密码 ：</h1><br><input type="password" name="psd" id="password" maxlength="16">
             </div>
                 <div class="input-phone">
                     <h1>手机号：</h1><br><input type="text"  name="sj"   maxlength="11" minlength="11" >
                 </div>
                  <div class="input-home">
                     <h1>家庭地址：</h1><br><input type="text"  name="home"   maxlength="11" minlength="11" >
                 </div>
                 <div class="six">
                     <p>可通过手机号找回密码</p>
                 </div>
             </div> 
             <div class="sub">
                 <input type="submit" value="立即注册">
             </div>
             </form>
             </article>
             <div class="type-radio">
                 <input type="radio" checked><span style="text-align: center;">同意开通QQ空间</span>
                 <br>
                 <input type="radio" checked><span style="text-align: center;">我已阅读并同意相关服务条款和隐私政策开始进行登录QQ页面</span>
             </div>
            <div>
              <footer>
                <h1>这是QQ的注册页面</h1>
              </footer>
            </div>
         </div>
     </div>
</body>
</html>

2022年欢迎来到Jsp编程第三课时——综合案例（三）

JSP代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景