web 实验2

最新推荐文章于 2024-10-13 18:47:07 发布

Ayyy_

最新推荐文章于 2024-10-13 18:47:07 发布

阅读量44

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Ayyy_/article/details/130304981

版权

这是一个使用HTML和CSS构建的响应式用户注册页面，通过JavaScript处理窗口大小变化和横屏切换，动态调整根字体大小以适应不同设备屏幕。页面包含用户名、手机号、密码和确认密码输入框，以及注册按钮和已有账号链接。

摘要由CSDN通过智能技术生成

<!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">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>王安妮-202031050293-实验2</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);   //横屏切换时执行
    </script>
    <!-- 外链式 -->
    <link rel="stylesheet" href="maincss.css">
    
        
</head>
<body>
    <!-- 头部 -->
    <div id="header">
        <div class="head_left"></div>
        <div class="head_right"></div>
        <div class="head_center">用户注册</div>
    </div>
    <!-- 内容 -->
    <div id="content">
        <div class="kong"></div>
        <div class="content_left1">用户名</div>
        <div class="content_center1"><input type="text" placeholder="&nbsp;请输入用户名" class="mykk"></div>
        <div class="content_left2">手机号</div>
        <div class="content_right2">发送验证码</div>
        <div class="content_center2"><input type="text" placeholder="&nbsp;请输入手机号" class="mykk2"></div>
        <div class="content_left3">密码</div>
        <div class="content_center3"><input type="password" class="mykk"></div>
        <div class="content_left4">确认密码</div>
        <div class="content_center4"><input type="password" class="mykk"></div>
        <div class="register">注&nbsp;&nbsp;册</div>

        <div class="id">已有账号</div>
        <div class="changenumber">更换手机号</div> 
    </div>
    <!-- 底部 -->
    <div id="bottom">
        <div class="final1">首页</div>
        <div class="final3">设置</div>
        <div class="final2"></div>
    </div>
    
           
</body>
</html>

css部分：

body{
    margin: 0px;
}
.head_left{
    float: left;
    width: 1.04rem;
    height: 1.32rem;
    background-image: url("img/sub_back.png");
    background-repeat: no-repeat;
    background-size: .55rem .55rem;
    background-position: .45rem .36rem;
   

}
.head_center{

    height: 1.32rem;
    margin: 0rem 1.04rem 0rem 1.04rem;
    text-align: center;
    font-size: .57rem;
    padding: .37rem 0rem .38rem 0rem ;
    line-height: .57rem;
    color: #fff;
    /* 自动内减 */
    box-sizing: border-box;    
 

}
.head_right{
    float: right;
    width: 1.04rem;
    height: 1.32rem;
    background-image: url("img/sub_more.png");
    background-repeat: no-repeat;
    background-size: .55rem .55rem;
    background-position: 0rem .36rem;

}
#header{
    background-color: #e66c06;
    position:fixed;
    top: 0px;
    width: 100%;
    
}
.content_left1{
    width: 2.64rem;
    height: 1.22rem;
    float: left;
    font-size: .47rem;
    text-align: center;
    padding: .62rem .75rem .09rem .46rem;
    color: #5f5f5f;
    /* 自动内减 */
    box-sizing: border-box;  

}
.content_center1{
    height: 1.22rem;

    
}

.content_left2{
    width: 2.64rem;
    height: 1.22rem;
    float: left;
    font-size: .47rem;
    text-align: center;
    padding: .62rem .75rem .09rem .46rem;
    color: #5f5f5f;
    /* 自动内减 */
    box-sizing: border-box; 
}
.content_center2{
    height: 1.22rem;  
} 

.content_right2{
    height:1.22rem ;
    width: 4.00rem;
    float: right;
    font-size: .34rem;
    text-align:left;
    padding-top: .67rem;
    padding-left: 0rem;
    box-sizing: border-box; 
    color: #e66c06;  
}
.content_left3{
    width: 2.64rem;
    height: 1.22rem;
    float: left;
    font-size: .47rem;
    text-align: left;
    padding: .62rem .75rem .09rem .46rem;
    color: #5f5f5f;
    /* 自动内减 */
    box-sizing: border-box; 

}
.content_center3{
    height: 1.22rem; 
}
.content_left4{
    width: 2.64rem;
    height: 1.22rem;
    float: left;
    font-size: .47rem;
    text-align: center;
    padding: .62rem .21rem .09rem .46rem;
    color: #5f5f5f;
    /* 自动内减 */
    box-sizing: border-box; 
}
.content_center4{
    height: 1.22rem; 
}
.mykk{
    border: none;
    border-bottom: 2px solid #a1a1a1;
    font-size: .44rem;
    width: 70%;

}
.mykk2{
    border: none;
    border-bottom: 2px solid #a1a1a1;
    font-size: .44rem;
    width: 35%;

}

.register{
    height: 1.08rem;
    text-align: center;
    font-size: .50rem;
    margin: .67rem .40rem 0rem .40rem;
    padding-top: .26rem;
    box-sizing: border-box; 
    background-color: #e66c06;
    color: #fff;

}
.id{
    height: .61rem;
    width: 1.76rem;
    float: left;
    font-size: .27rem;
    text-align: center;
    padding-top: .33rem;
    box-sizing: border-box; 
    color: #5f5f5f;
    

}
.changenumber{
    height: .61rem;
    width: 1.90rem;
    float: right;
    font-size: .27rem;
    text-align: center;
    padding-top: .33rem;
    padding-right: .52rem;
    box-sizing: border-box; 
    color: #5f5f5f;
    

}
.kong{
    height: 1.32rem ;
}
#bottom{
    background-color: #e66c06;
    position:fixed;
    bottom: 0px;
    width: 100%;
}

 .final1{
    float: left;
    width: 1.47rem;
    height: 1.46rem;
    background-image: url("img/main_home1.png");
    background-repeat: no-repeat;
    background-size: .64rem .64rem;
    background-position: .53rem .17rem;
    font-size: .31rem;
    color: #fff;
    text-align: center;
    padding: .89rem .30rem .07rem .53rem ;
    box-sizing: border-box;
   

}
.final2{

    height: 1.32rem;
    margin: 0rem 1.47rem 0rem 1.47rem;
    text-align: center;
    font-size: .57rem;
    padding: .37rem 0rem .38rem 0rem ;
    line-height: .57rem;
    /* 自动内减 */
    box-sizing: border-box;    
 

}
.final3{
    float: right;
    width: 1.47rem;
    height: 1.46rem;
    background-image: url("img/main_config1.png");
    background-repeat: no-repeat;
    background-size: .64rem .64rem;
    background-position: .25rem .17rem;
    font-size: .31rem;
    color: #fff;
    text-align: center;
    padding: .89rem .52rem .07rem .18rem ;
    box-sizing: border-box;
}