<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
<script type="text/javascript">
function setRootFontSize(){
var rootHtml = document.documentElement;
var rem = rootHtml.clientWidth / (1080 / 100); //1080为设计图px宽度
rootHtml.style.fontSize = rem + "px";
}
setRootFontSize(); //网页首次载入时执行一 次
window.addEventListener("resize", setRootFontSize, false); //网页大小改变时执行
window.addEventListener("orientationchange", setRootFontSize, false); //横屏切换时执行
function init(){
document.getElementById("errorArea").style.display="none";
}
function checkReg(){
var errorArea = document.getElementById("errorArea");
if(document.getElementById("username").value=="")
{
errorArea.style.display = "block";
errorArea.innerText = "*用户名不能为空";
}
else if(document.getElementById("number").value=="")
{
errorArea.style.display = "block";
errorArea.innerText = "*手机号码不能为空";
}
else if(document.getElementById("password").value=="")
{
errorArea.style.display = "block";
errorArea.innerText = "*密码不能为空";
}
else if(document.getElementById("password_again").value=="")
{
errorArea.style.display = "block";
errorArea.innerText = "*请输入密码";
}
else{
window.location.href="new_file.html";
}
}
</script>
<style>
body{
margin: 0;
}
#header{
background-color: #e66c05;
height: 1.32rem;
}
.header_left{
float: left;
background-image: url("sub_back.png");
width: 1.15rem;
height: 1.32rem;
background-repeat: no-repeat;
background-position:0.46rem 0.37rem ;
background-size: 0.55rem 0.55rem;
}
.header_right{
float: right;
width: 1.15rem;
height: 1.32rem;
background-image:url("sub_more.png");
background-position: 0.46rem 0.37rem;
background-size: 0.55rem 0.55rem;
background-repeat: no-repeat;
}
.header_center{
text-align: center;
font-size:0.57rem ;
line-height: 0.57rem;
padding: 0.35rem 0rem 0.37rem 0rem;
margin: 0rem 1.15rem 0rem 1.15rem;
color: #ffffff;
}
.header_left img{
width: 0.58rem;
height: 0.55rem;
}
.main_left,.number_left,.password_left{
float: left;
width: 2.1rem;
height: 1.1rem;
font-size: 0.42rem;
line-height: 0.42rem;
padding: 0.62rem 0rem 0rem 0.49rem;
color: #606060;
}
.main_center,.number_center,.password_center{
height: 1.21rem;
padding: 0.62rem 0rem 0rem 0rem;
line-height: 0.42rem;
font-size:0.42rem ;
}
input{
width: 7.62rem;
height: 0.64rem;
border-top:none ;
border-left: none;
border-right: none;
border-bottom-color: #a1a1a1;
padding-left: 0.14rem;
padding-bottom:0.01rem ;
font-size:0.42rem ;
}
::-webkit-input-placeholder{
color: #a5a5a5;
font-size: 0.42rem;
}
:-moz-placeholder{
color: #a5a5a5;
font-size:0.42rem ;
line-height: 0.42rem;
}
::-moz-placeholder{
color: #a5a5a5;
font-size: 0.42rem;
line-height: 0.42rem;
}
:-ms-input-placeholder{
color: #a5a5a5;
font-size: 0.42rem;
line-height: 0.42rem;
}
#number{
width: 3.84rem;
}
.number_left,.password_left,.password_center{
padding-top: 0rem;
}
.number_center{
float: center;
padding-top:0rem ;
}
.number_right{
float:right;
padding-right:2.18rem ;
padding-top:0rem ;
word-spacing: 0.16rem;
color: #e76b09;
font-size:0.34rem ;
line-height: 0.34rem;
}
.register_center{
text-align: center;
width: 10rem;
background-color:#e66c05 ;
margin-left:0.39rem ;
margin-top: 0.6rem;
font-size: 0.45rem;
color: #FFFFFF;
padding-top:0.33rem ;
padding-bottom: 0.30rem;
}
#register{
background-color: #E66C05;
border: none;
width: 100%;
}
.other_left{
float: left;
font-size: 0.26rem;
padding-top:0.35rem ;
padding-left: 0.5rem;
}
.other_right{
float: right;
font-size: 0.26rem;
padding-right: 0.5rem;
padding-top:0.35rem ;
}
#ender{
position: fixed;
bottom: 0;
line-height: 1.44rem;
background-color: #e66c05;
width: 100%;
height: 1.46rem;
}
.photograph_left{
float: left;
height: 1.25rem;
width: 1.18rem;
background-color:#FFFFFF ;
margin-left:0.26rem ;
}
#ender #pl{
float: left;
height: 0.56rem;
width: 0.61rem;
padding: 0.18rem 0.27rem 0.52rem 0.27rem;
}
.photograph_left .inside{
float: left;
width: 0.6rem;
height: 0.24rem;
line-height: 0.24rem;
font-size: 0.28rem;
color: #E66C05;
margin: -0.4rem -0.14rem -0.32rem 0.3rem;
}
.photograph_right{
background-color: #E66C05;
float: right;
height: 1.25rem;
width: 1.18rem;
margin-right:0.26rem
}
.photograph_right img{
float: right;
height: 0.56rem;
width: 0.61rem;
padding: 0.18rem 0.27rem 0.52rem 0.27rem;
}
.photograph_right .inside{
float: right;
width: 0.6rem;
height: 0.24rem;
line-height: 0.24rem;
font-size: 0.28rem;
color: #FFFFFF;
margin: -0.4rem 0.25rem -0.32rem -0.25rem;
}
#errorArea{
margin-left:1.8rem ;
padding-left: 1.rem;
padding-top:0.2rem ;
font-size:0.5rem ;
color: #E66C05;
}
</style>
</head>
<body onload="init()">
<div id="header">
<div class="header_left"></div>
<div class="header_right"></div>
<div class="header_center">用户注册</div>
</div>
<div id = "mainArea">
<div class="main_left">用户名</div>
<div class="main_center"><input id = "username"type="text" placeholder="请输入用户名"></div>
<div class="number_left">手机号</div>
<div class="number_right">发送验证码</div>
<div class="number_center"><input id="number" type="text" placeholder="请输入手机号"></div>
<div class="password_left">密码</div>
<div class="password_center"><input id="password" type="password" ></div>
<div class="password_left">确认密码</div>
<div class="password_center"><input id="password_again" type="password" ></div>
<div id="errorArea">*用户名不能为空</div>
<div class="register_center"><input id = "register" type="button" align="center" value="注册" onclick="checkReg()"></div>
<div class="other_left">已有帐号</div>
<div class="other_right">更换手机号</div>
</div>
<div id="ender">
<div class="photograph_left"><img id="pl"src="main_home2.png"><div class="inside">首页</div></div></li>
<div class="photograph_right"><img id="pr"src="main_config1.png"><div class="inside">设置</div></div>
</div>
</body>
</html>
实验二css样式及页面布局
于 2023-09-04 00:51:41 首次发布