web前端课程第一次作业----注册页面代码(2018-9-14)

www.nekonekolili.top/file/webF/work.zip

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>注册</title>
  <link rel="shortcut icon" type="image/x-icom" href="./resource/logo/icon.ico">
  <!--载入样式表-->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/register.css">
  <!--载入脚本-->
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/register.js"></script>
</head>
<body>
  <audio class="mus" src="resource/backSetting/the_sky.mp3" loop="true" autoplay="true"></audio>
  <div class="video">
    <video class="backV" autoplay="true" loop="loop" src="resource/backSetting/Damsal_in_the_rain.mp4">
    </video>
  </div>
  <div class="logo">
    <img src="./resource/logo/blue.Dra.png">
  </div>
   <div class="body">
     <form action="handlPage.do" id="submitForm" method="POST">
      <div class="register">
        <div class="item icon"><img src="./resource/logo/blue.Dra.png" alt=""></div>
        <div class="item title"><span>注册</span></div>
        <div class="item username"><input type="text" maxlength="11" minlength="11"  placeholder="账号"  required /><hr /></div>
        <div class="item password"><input type="password" maxlength="6" minlength="6" placeholder="密码" required/><hr /></div>
        <div class="item comfirm"><input type="password" maxlength="6" minlength="6" placeholder="再次输入账号" required/><hr /></div>
        <div class="item gender">

            <input type="radio" name="gender" value="male" id="male"><label for="male"><div class="option" onclick="selectRadio(this)">宅男</div></label>
            <input type="radio" name="gender" value="female" id="famale"><label for="famale"><div class="option" onclick="selectRadio(this)">腐女</div></label>
            <input type="radio" name="gender" value="noKnow" id="nokonw"><label for="nokonw"><div class="option" onclick="selectRadio(this)">秀吉</div></label>

        </div>
        <div class="item birthday">
          <span>生日：</span>
           <input type="date" required  name="birthday">
           <hr />
        </div>
        <div class="item email">

          <input type="email" placeholder="邮件地址" name="email" required>
          <hr />
        </div>
        <div class="item tel">

          <input type="tel" placeholder="电话号码" name="tel" required>
          <hr />
        </div>
        <div class="item submit">
          <a class="a-button" href="javascript:void(0);" onclick="submit(&quot;#submitForm&quot;)">
            提交
          </a>
        </div>
      </div>
    </form>

   </div>


</body>
</html>

网站格式化，百度可得

个人常用样式

body{

  overflow: hidden;
}
div.video
{
  position: absolute;
  height: 100%;
  width:100%;
}
video.backV
{

  width: 100%;
}
div.body
{
  position: absolute;
  height: 100%;
  width:100%;
  background-color: rgba(0,0,0,0.7);

}
div.register
{
  position:absolute;
  height: 100%;
  width: 20%;
  background-color: rgba(255,255,255,0.4);
  right: 0;
  z-index: 20;
}
div.body div.register img
{
  width:60%;
}
div.body div.register div.title span{
  display: block;
  font-size: 25px;
  font-family:inherit;
  font-weight:bolder;
  text-align: center;
}
div.username input,
div.password input,
div.comfirm input,
div.email input,
div.tel input,
div.birthday input
{
  border-width: 0;
  outline: none;
  width: 100%;
}
div.birthday
{
  width:50%;
}
div.birthday span
{
   color:#a9a9a9;
}
hr{
   background-color: #0099FF;
   border-width: 0px;
   height: 1px;
}
div.gender input
{
  display: none;
}
div.gender div.option
{
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0,0,0,0.4);
  border-radius: 4px;
  padding: 2px 4px;

}
div.gender div.option:hover
{
  background: #99CCFF;
  cursor: pointer;
}


div.submit
{
  height: 30px;
  width: 100px;

}
div.submit .a-button
{
    display: inline-block;
    text-decoration: none;
    color: white;
  background: #FF6699;
    width: 100%;
    height: 100%;
    text-align: center;
  line-height: 30px;

}
div.submit .a-button:hover
{
  background: #FF3399;
    text-decoration: none;
}

div.register div.item
{
  margin: 20px 0;
}
div.register
{
  padding:40px 20px;
}
div.register div.submit
{
  display: inline-block;
  margin-top:10%;
  margin-left: 60%;
}

.logo
{
  position: absolute;
  width:100%;
  z-index: 10;
  top: 30%;
}
input
{
  background-color: rgba(255, 255, 255, 0);
  color: white;
}

jquery

function submit(id)
{

 $(id)[0].submit();
}


function selectRadio(element)
{

 $(".option").css({"background-color":"rgba(255,255,255,0)"});
  $(element).css({"background":"#99CCFF"});

}

posted on 2018-09-16 19:38 莉艾尔·雷冯德阅读(398) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

莉艾尔·雷冯德

web前端课程第一次作业----注册页面代码(2018-9-14)

导航

公告