没有那么好看的注册页面

<!-- 报错窗口 -->
    <div class="error_alert">
      <img src="./img/123.png" alt="">
      <p>My God 出错啦！</p>
    </div>
    <!-- 登陆成功弹窗 -->
    <div class="success_alert">
      <img src="./img/success.png" alt="">
      <p>登陆成功!</p>
    </div>
    <!-- 背景图片 -->
    <div class="biggest_backgound">
      <div class="back" onclick="back_index()"><img src="./img/back.png" alt=""></div>
      <div class="title">
        <div class="title_list">
          <img src="./img/C2C.png" alt="">
          <p>Welcome to C2C !</p>
        </div>
        <div class="title_content">
          <div class="title_content_top">
            <div>
              <p>电话号码</p>
              <input class="tel_value" type="number" placeholder="请输入号码">
            </div>
            <div>
              <p>账号密码</p>
              <input class="password_value" type="password" placeholder="请输入账号密码(不能小于6位数)">
            </div>
            <div>
              <p>姓名</p>
              <input class="sex_value" type="text" placeholder="请输入姓名">
            </div>
          </div>
          <div class="title_content_middle">
            <span>性别</span>
            <div class="title_content_inpt">
              <input type="checkbox" name="nex_name" value="0">男
              <input type="checkbox" name="nex_name" value="1">女
              <input type="checkbox" name="nex_name" value="3">沃尔玛购物袋
            </div>
          </div>
          <div class="title_content_bottom">
            <p>选择头像</p>
            <form id="form">
              <label>
                <img id="pic" src="./img/file.png" alt="">
                <input style="display:none;" name="file" type="file" onchange="upload()" />
              </label>
            </form>
          </div>
          <div class="Register_but" onclick="Register_but()">注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册</div>
        </div>
      </div>
    </div>

*{
  margin: 0;
  padding: 0;
}
/* 背景图片 */
.biggest_backgound{
  height: 100vh;
  background-image: url(../img/QQ20230922180428.png);
  background-size:100% 100%;
  opacity: 90%;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.back{
  position: absolute;
  top: 0.5%;
  left: 0.5%;
  width: 10%;
}
.back img{
  width: 90%;
}
.title{
  width: 75%;
  height: 85%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
}
.title_list{
  width: 100%;
}
.title img{
  width: 25%;
  border-radius: 50%;
  margin: 1% 0 6% 5%;
}
.title_list p{
  font-size: 25px;
  letter-spacing: 1%;
  font-weight: 900;
  margin-left: 2%;
}
.title_content{
  width: 85%;
  padding: 7.5%;
}
.title_content_top input{
  margin: 0.5vh 10% 1vh 10%;
  width: 85%;
  height: 2vh;
  border: 1.5px transparent solid;
  border-radius: 2px;
  padding: 1vh 0% 1vh 2%;
  outline: none;
  transition: all 0.5s;
}
.title_content p{
  margin: 1% 0;
}
.title_content_middle{
  margin-top: 10%;
  display: flex;
  align-items: center;
}
.title_content_middle input[type=checkbox]{
  margin-left: 5%;
  margin-right: 1%;
  width: 20px;
  height: 30px;
}
.title_content_bottom{
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 10%;
}
.Register_but {
  width: 100%;
  height: 5vh;
  border-radius: 50px;
  background-color: #3388FF;
  color: aliceblue;
  font-size: 20px;
  font-weight: 700;
  margin: 3vh 0% 0 0%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
/* 报错弹窗 */
.error_alert{
  width: 70%;
  height: 10%;
  margin: 20% 15% 0 15%;
  position: absolute;
  border-radius: 15px;
  background-color: #D84C31;
  display: flex;
  justify-content: center;
  transition: all 0.5s;
  opacity: 0;
  z-index: 999;
}
.error_alert p{
  padding: 0 5%;
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: aliceblue;
}
.error_alert img{
  margin-top: 2%;
  width: 20%;
  height: 80%;
}
/* 登陆成功弹窗 */
.success_alert{
  width: 70%;
  height: 10%;
  margin: 20% 15% 0 15%;
  position: absolute;
  border-radius: 15px;
  background-color: #52a652;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
  opacity: 0;
  z-index: 999;
}
.success_alert p{
  padding: 0 15%;
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: aliceblue;
}
.success_alert img{
  margin-top: 2%;
  margin-left: 2%;
  width: 20%;
  background-color: aliceblue;
  border-radius: 50%;
}
.back:hover{
  opacity:0.5;
}
.title_content_inpt {
  width: 85%;
  display: flex;
  align-items: center;
}