web实验用户注册界面

怼烎@ 2023-03-12 10:58 48阅读 0赞

HTML代码部分

在这里插入代码片
    <!DOCTYPE>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>用户注册</title>
    	<link rel="stylesheet" href="reg.css">
    
    </head>
    <body>
    
    	<div id="container">
    		
    		<h1>空壳公司用户注册</h1>
    		<hr />
    		
    		<form method="post" action="URL" autocomplete="on">
    			<label>用 户:
    				<input type="text" placeholder="请输入用户名" name="username" required/>
    			</label>
    			<br />
    			<label>密	码:	 
    				<input type="password" placeholder="请输入新密码" name="pwd" required/>
    			</label>
    			<br />
    			<label>确	认:
    				<input type="password" placeholder="请再次输入密码" name="pwd2" required/>
    			</label>
    			<br />
    			<label>姓	名:
    				<input type="text" placeholder="请输入真实姓名" name="name" required/>
    			</label>
    			<br />
    			<label>邮	箱:
    				<input type="email" placeholder="请输入电子邮箱" name="email" required/>
    			</label>
    			<br />
    			<label>手	机:
    				<input type="tel" placeholder="请输入手机号码" name="tel"/>
    			</label>
    			<br />
    			<button type="submit">
    				提交注册
    			</button>
    			<button type="reset">
    				清空内容
    			</button>
    			
    		</form>
    	</div>
    
    </body>
    </html>

css代码部分

#container{
        
    	background-color:#87CEEB;
    	color:#2F4F4F;
    	padding:15px;
    	margin:100px auto 0px;
    	width:600px;
    	text-align:center;
    	font-family:"微软雅黑 Light";
    	box-shadow:10px 10px 15px black;/*美化界面*/
    }
    hr{
        
    	width:80%;
    	border:#8B0000 1px solid;
    	margin-bottom:15px;
    }
    body{
        
    	background-image:url("1.jpg");
    }
    input{
        
    	width:180px;
    	height:20px;
    	margin:5px;
    	font-size:16px;
    	font-family:"微软雅黑 Light";
    }
    button{
        
    	width:120px;
    	height:40px;
    	background-color:#F08080;
    	border:0px;
    	color:white;
    	margin:10px;
    	font-size:18px;
    	font-family:"宋体";
    	font-weight:bold;
    }
    
    button:hover{
        
    	background-color:#800000;
    	color:#B0C4DE;
    }

实现界面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY0MzkwMA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY0MzkwMA_size_16_color_FFFFFF_t_70]: /images/20230312/c0ea9a0d152748259a5200bebf01c72d.png