【前端基础】div居中显示和背景的设置

一、描述
今天,学校安排的实习布置了简单的静态页面设计(主要学会使用JS、dom的认知),所给页面如下(感觉太丑了,就想进行一下调整):

在这里插入图片描述
调整后的效果:
在这里插入图片描述
二、主要技术记录

1.div调整(包括居中):
调整div的padding 建议使用%进行,因为页面大小可能会变化,代码如下:
(不一定需要50%,按需引入)

<div style="padding-top: 10%; padding-left: 60%;">

2.图片背景

(1)background :url() :可远程图片(https://sm.ms/ 可进行上传本地图片到远程 )也可相对地址(不再赘述)

(2)background-size :cover

关于详细图片设置请参考背景设置

3.使用正则进行匹配

    let re=/^\d{9,10}@(qq||163)[.](com|cn)$/;

^:以什么开始
$:以什么结束
():含有什么值 ,| :或逻辑
\d:数字
{}量词

4.注意区分value与innerHTML

最后完整代码献给大家,若什么错误,望指出!感谢大家支持

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>dom05.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>


  <script type="text/javascript">
  		/*
  			初始化页面时,对应输入框后的错误提示不显示
  			对于用户名,密码,手机号码,邮箱这四个文本框在每一个输入框进行
  			操作时进行校验,如果光标进入对应文本框,后续错误提示不现实,光标离开输入框时对具体数据进行校验
  			对于性别的选中校验根据checked进行判断和信息显示

  			对于表单点击注册提交时,无论上面标签有无输入校验操作,都需要对以上的输入框进行统一校验操作,
  			只有全部满足条件校验成功后才能正确注册提交,
  			否则页面不实现跳转显示,在提交时如果以上输入选择框校验错误需要将具体的错误信息进行显示提示
  		*/

      function f1() {
         console.log("进入用户名为空提示测试");
        let userCheck=document.getElementById("user");
        console.log(userCheck.value);
        if(userCheck.value==""){
          console.log("yes");
          document.getElementById("userMention").innerHTML="用户名不能为空";
        }else{
          document.getElementById("userMention").innerHTML="";
        }

      }
      function f2() {
        console.log("进入密码设置错误提示测试");
        let passwordCheck=document.getElementById("password1");
        // console.log("passwordtest"+passwordCheck.value);
        if(passwordCheck.value.length<6||passwordCheck.value.length>10)
          document.getElementById("passwordMention").innerHTML="密码必须在6~10位之间";
        else
          document.getElementById("passwordMention").innerHTML="";

     }
      function f3() {
          console.log("进入密码 不一致提示测试");
        let passwordCheck1=document.getElementById("password1");
        let passwordCheck=document.getElementById("password2");
         if(passwordCheck1.value!=passwordCheck)
          document.getElementById("passwordMention2").innerHTML="密码 不一致";
         else
           document.getElementById("passwordMention2").innerHTML="";
      }

      function f4() {
          console.log("进入手机号码格式不正确提示测试");
          let res=/^(135|151||183)\d{8}$/;
          let phoneCheck=document.getElementById("phone").value;
          console.log(res.test(phoneCheck))
        if(!res.test(phoneCheck))
          document.getElementById("phoneMention").innerHTML="手机号码格式不正确";
        else
          document.getElementById("phoneMention").innerHTML="";
      }

      function f5() {
        console.log("进入邮箱格式不正确提示测试");
        let res = /^\d{9,10}@(qq||163)[.](com|cn)$/;
        let mailCheck = document.getElementById("mail").value;
        console.log()
        if (!res.test(mailCheck))
          document.getElementById("mailMention").innerHTML = "邮箱格式不正确";
        else
          document.getElementById("mailMention").innerHTML = "";
      }
      function handleSummit() {

            let user=document.getElementById("user").value;
            let password=document.getElementById("phoneMention").value;
            let password2=document.getElementById("passwordMention2").value;
            let phone2=document.getElementById("phoneMention").value;
            let mail=document.getElementById("mailMention").value;

            let boy1=document.getElementById("boy").checked;
            let girl1=document.getElementById("girl").checked;

            if(boy1||girl1)
              document.getElementById("sexMention").innerHTML="";
            else
              document.getElementById("sexMention").innerHTML="请选择性别";
            var flag=true;
            if(user=="")
            {
              alert("请输入用户名");
              flag=false;
            }


            if(password.length<6||password.length>10)
            {
              alert("注意密码规范");
              flag=false;
            }


            if(password2!=password)
            {
              alert("注意密码一致");
              flag=false;
            }


            let re=/^\d{9,10}@(qq||163)[.](com|cn)$/;
            if(!re.test(mail))
            {
              alert("邮箱不正确");
              f5();
            }
            if(flag)
              alert("注册成功!");
            else
              alert("注册失败");
      }

      function clearContent() {
        document.getElementById("userMention").innerHTML="";
        document.getElementById("passwordMention").innerHTML="";
        document.getElementById("passwordMention2").innerHTML="";
        document.getElementById("phoneMention").innerHTML="";
        document.getElementById("mailMention").innerHTML="";

        document.getElementById("user").value="";
        document.getElementById("password1").value="";
        document.getElementById("password2").value="";
        document.getElementById("sex1").value="";
        document.getElementById("phone").value="";
        document.getElementById("mail").value="";
      }


  </script>

  <style type="text/css">
    body{
      background: url("https://i.loli.net/2020/08/09/B9n3zJFyTQAqlM7.jpg");
      background-size: cover;
      background-repeat: no-repeat;
    }


  caption,td{
    color: lightseagreen;
  }

   table{
     /*background: darkgray;*/
     /*border-radius: 2px;*/

   }
  </style>
  <body id="container" >
  <div style="padding-top: 10%; padding-left: 60%;">

    <table border="1">
    			<caption>用户注册</caption>

    			<form action="">
	    			<tr>
	    				<td>用户名:</td>
	    				<td><input type="text" id="user" onblur="f1()"></td>
	    				<td><span style="color: red;" id="userMention"></span></td>
	    			</tr>
	    			<tr>
	    				<td>密码:</td>
	    				<td><input type="password" id="password1" onblur="f2()"></td>
	    				<td><span style="color: red;" id="passwordMention"></span></td>
	    			</tr>
	    			<tr>
	    				<td>重复密码:</td>
	    				<td><input type="password" id="password2" onblur="f3()"></td>
	    				<td><span style="color: red;" id="passwordMention2"></span></td>
	    			</tr>
	    			<tr>
	    				<td>性别:</td>
	    				<td>
	    					<input type="radio" id="boy"><input type="radio" id="girl"></td>
	    				<td><span style="color: red;" id="sexMention"></span></td>
	    			</tr>
	    			<tr>
	    				<td>手机号码:</td>
	    				<td><input type="text" id="phone" onblur="f4()"></td>
	    				<td><span style="color: red;" id="phoneMention"></span></td>
	    			</tr>
	    			<tr>
	    				<td>邮箱:</td>
	    				<td><input type="text" id="mail" onblur="f5()"></td>
	    				<td><span style="color: red;" id="mailMention"></span></td>
	    			</tr>
	    			<tr>
	    				<td></td>
	    				<td>
	    					<input type="submit" value="注册" style="color: lightseagreen" onclick="handleSummit()">
	    					<input type="reset" value="清空数据" style="color: lightseagreen" onclick="clearContent()">
	    				</td>
	    				<td></td>
	    			</tr>
    			</form>
    		</table>

  </div>
  </body>
</html>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值