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

左手的ㄟ右手 2022-11-29 08:07 201阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center]  
调整后的效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 1]  
二、主要技术记录

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

2.图片背景

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

（2）background-size :cover

关于详细图片设置请参考[背景设置][Link 1]

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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/b8b58fc1d8554c6c8aa3d888c293c317.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/445618e7010a44f7b9c7a9eee76d2a1e.png
[Link 1]: https://blog.csdn.net/baidu_25343343/article/details/52741547