CSS 登陆

最新推荐文章于 2024-09-03 14:47:13 发布

yohooJoker

最新推荐文章于 2024-09-03 14:47:13 发布

阅读量317

点赞数

本文链接：https://blog.csdn.net/m0_58826255/article/details/117746196

版权

知识点

CSS的几种基本选择器(id,clss)
< img >标签调用背景图片(本地调用->src="…/…/")
< a href=" ">标签
< form ></ form >表单的几种类型(text,password,submit,check~)
< hr >水平线，< br >换行
< border >边框标签及其属性

源码
这是登录页面的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>登录</title>
<style>
#para1 { text-align:center; color:red; }
#boder{
border-color: #FF0000;
/*border-width: 15px 20px 30px 20px;*/
border-style: solid;
border-radius: 25px;
width: 300px;
height: 150px;
align: center;
text-align: center;

}
/*body{*/
/* text-align: center;*/
/*}*/
div{ margin:0 auto; width:400px; height:100px; border:0px solid #F00}
</style>
</head>
<body background="山水.jpg">
<div>
<form id="boder">
<b>登录</b><br>
请填写个人信息
<hr>
账号:<input type="text"><br>
密码:<input type="password"><br>
<input type="submit" value="提交">
没有账号? <a href="../LoginDemo/register.html">注册一个</a>

</form>
</div>
</body>
</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>Document</title>
</head>
<link rel="stylesheet" href="./css/rotate.css">
<style type="text/css">

</style>
<script type="text/javascript" src="./js/login.js"></script>

<body>
   <div class="">
      <img src="./images/12.jpg" alt="" class="img_beij div1">
      <div class="">
         <div class="circle div2"></div>
         <div class="circle2 div3">
            <div class="login div4">
               <h1>立即登陆</h1>
               <br>
               <p>邮箱</p>
               <br>
               <input type="text" onBlur="userEmalc()" id="userEmal" name="userEmal">
               <br><br>
               <p>密码</p>
               <br>
               <input type="password" placeholder="密码长度至少为6位" onBlur="userPsdc()" id="userPsd" name="userPsd">
               <br><br>
               <a class="a2" href="">忘记密码?</a>
               <br><br>
               <button class="button" id="login" onclick="denglu()">登陆</button>
               <a href="../zonghe/register.html" class="a1">
                  <button class="button" id="register">
                     注册
                  </button>
               </a>
            </div>
         </div>
      </div>
   </div>
</body>
<script type="text/javascript">
   //登陆
   function denglu() {
      var email_chuan = localStorage.getItem("email");
      var psd1_chuan = localStorage.getItem("psd1");
      var zhuce = localStorage.getItem("zhuce");
      console.log(psd1_chuan)
      console.log(zhuce)


      var userEmal = document.getElementById("userEmal").value;
      var userPsd = document.getElementById("userPsd").value;

      if (email_chuan === userEmal) {
         if (psd1_chuan === userPsd && zhuce === '1') {
            alert('登陆成功')
            window.open('../zonghe/index.html')
         }
         else {
            alert('密码错误')
         }
      }
      else {
         alert('该账号不存在')
      }
   }

   //邮箱
   function userEmalc() {
      var userEmal = document.getElementById("userEmal").value;
      var name = 'userEmal'
      if (!userEmal) {
         alert('邮箱不能为空')
      }
      else {
         var emailzz = zz(name, userEmal)
      }
   }

   //密码
   function userPsdc() {
      var userPsd = document.getElementById("userPsd").value;
      var name = 'userPsd'
      console.log(userPsd)
      if (!userPsd) {
         alert('密码不能为空')
      }
      else {
         var psd1zz = zz(name, userPsd)
      }
   }

   function zz(name, val) {
      var zz = 0;
      var tof;
      switch (name) {
         case 'userEmal':
            zz = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            tof = zz.test(val)
            console.log(tof)
            break;
         case 'userPsd':
            zz = /^.*(?=.*[0-9])(?=.*[a-z])\w{6,}/
            tof = zz.test(val)
            break;
      }
      if (!tof) {
         alert('格式错误')
      }
   }
</script>

</html>

效果如下图所示：