web前端作业2

最新推荐文章于 2024-03-20 16:33:58 发布

深红一号

最新推荐文章于 2024-03-20 16:33:58 发布

阅读量119

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_71474212/article/details/129950125

版权

1，制作注册页

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册界面</title>
  <style>
    body{
      background: #159f9f;
    }
    .container{
      margin: 0 auto;
      width: 500px;
    }
    form{
      width: 450px;
      margin: 0 auto;
      background: #FFF;
      border-radius: 15px;
      position: relative;
    }
    h1{
      font-size: 28px;
      text-align: center;
      color: #FFF;
    }
    .p{
      color: red;
      margin-left: 33px;
      display: inline-block;//不占单独一行的块级元素
    }
    label{
      font-size: 18px;
      font-weight: bold;
    }
    .register{
      height: 35px;
      width: 300px;
    }
    .q{
      color:red;
      margin-left:17px;
      display:inline-block;
    }
    .checkbox{
      margin-left: 100px;
      display: inline-block;
      width: 15px;
      height: 15px;
    }
    .submit{
      border-radius: 7px;
      margin-left: 150px;
      height: 35px;
      width: 150px;
      background-color: #000;
      border: none;
      display: block;
      padding: 0;
      color: #FFF;
      font-weight: bold;
      cursor: pointer;
    }
    a{
      text-decoration: none;
      font-weight: bold;
    }
    .left,.right{
      position: absolute;
      bottom: 20px;
    }
    .left{
      left: 20px;
    }
    .right{
      right: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>新用户注册</h1>
    <form>
      <br>
      <span class="p">*</span>
      <label for="username">用户名</label>
      <input type="text" name="" id="username" placeholder="" class="register"><br><br>
      <span class="p">*</span>
      <label for="phonenumber">手机号</label>
      <input type="text" name="" id="phonenumber" class="register">
      <br><br>
      <span class="q">*</span>
      <label for="pwd">登录密码</label>
      <input type="password" name="" id="pwd" class="register"><br><br>
      <span class="q">*</span>
      <label for="c_pwd">确认密码</label>
      <input type="password" name="" id="c_pwd" class="register"><br><br>
      <span class="p">*</span>
      <label for="verify">验证码</label>
      <input type="text" id="verify" class="register" name=""><br><br>
      <input type="checkbox" class="checkbox" name="">
      <span style="font-size:15px">我已阅读并同意《用户注册协议》</span>
      <br><br>
      <input type="submit" name="" value="同意以上协议并注册" class="submit" onclick="register(this)"><br>
      <a href="index.html" class="left">返回首页</a>
      <a href="login.html" class="right">开始登录</a>
    </form>
  </div>
  <script>
    var checkbox=document.getElementsByClassName('checkbox');
    function register(btn){
      if(checkbox[0].checked==true){
        alert("注册成功！");
      }
      else{
        alert("请先阅读并同意《用户注册协议》！")
      }
    }
  </script>
</body>
</html>

2，西瓜视频登录页

代码

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>西瓜视频登录</title>
        <style type="text/css">
            body {
                background-color: #ccc;
            }
 
            .container {
                width: 660px;
                height: 480px;
                margin: 100px auto 100px;
                background-color: white;
                border-radius: 5px;
            }
 
            .head_1 {
                width: 610px;
                height: 66px;
                padding-left: 25px;
                padding-right: 25px;
                border-bottom: 1px solid #F1F1F1;
            }
 
            .head_1>.font_1 {
                font-size: 20px;
                color: #0c0d0f;
                line-height: 66px;
            }
 
            .head_1>.close {
                display: inline-block;
                line-height: 66px;
                font-weight: bold;
                color: #999999;
                float: right;
            }
 
            .body_1 {
                width: 660px;
                height: 260px;
                padding-top: 40px;
            }
 
            .body_1>.box_1 {
                width: 330px;
                height: 260px;
                padding-left: 60px;
                padding-right: 28px;
                border-right: 1px solid #F1F1F1;
                float: left;
            }
 
            .body_1>.box_2 {
                width: 241px;
                height: 260px;
                float: left;
            }
 
            .foot_1 {
                width: 330px;
                height: 20px;
                padding-left: 60px;
                padding-right: 28px;
                margin-top: 16px;
                margin-bottom: 36px;
            }
 
            .foot_2 {
                width: 475px;
                height: 20px;
                color: #606266;
                font-size: 14px;
                padding-bottom: 20px;
                padding-left: 185px;
            }
 
            .line_1,
            .box_2_l1 {
                width: 330px;
                height: 20px;
                padding-bottom: 16px;
                font-size: 16px;
                color: #0c0d0f;
            }
 
            .line_2,
            .line_3 {
                width: 310px;
                height: 32px;
                background-color: #F2F2F2;
                padding: 8px 10px;
            }
 
            .line_2>select {
                height: 32px;
                background-color: #F2F2F2;
                border: none;
                text-indent: 4px;
            }
 
            .line_2>.input_1 {
                width: 245px;
                height: 32px;
                border: none;
                background-color: #F2F2F2;
            }
 
            .line_3 {
                margin-top: 20px;
                font-size: 15px;
                color: #606266;
            }
 
            .line_3>.input_2 {
                width: 240px;
                height: 32px;
                border: none;
                background-color: #F2F2F2;
            }
 
            .line_4 {
                width: 330px;
                height: 40px;
            }
 
            .line_5 {
                width: 330px;
                height: 20px;
                font-size: 12px;
            }
 
            .line_5>.input_3 {
                width: 6px;
                height: 8px;
                border: 1px solid #F1F1F1;
                border-radius: 3px;
            }
 
            .line_6 {
                width: 330px;
                height: 48px;
            }
 
            .line_6>button {
                width: 330px;
                height: 48px;
                border: none;
                border-radius: 2px;
                background-color: #fe3355;
                color: #ffffff;
                font-size: 16px;
            }
 
            .box_2_l1 {
                width: 213px;
                padding-left: 28px;
                padding-bottom: 0px;
            }
 
            .box_2_l2 {
                width: 187px;
                height: 206px;
                margin-top: 16px;
                padding: 0px 28px;
            }
 
            .box_2_l2>.img_1 {
                width: 85%;
            }
 
            [class^="font_line"] {
                font-size: 14px;
                color: #606266;
                margin-bottom: 0px;
            }
 
            .font_line_2 {
                margin-top: 0px;
            }
 
            [class^="foot_font"] {
                font-size: 14px;
                color: #606266;
            }
 
            .foot_1>img {
                height: 20px;
            }
 
            .foot_font_2 {
                margin-left: 82px;
            }
 
            .input_4 {
                width: 12px;
                height: 12px;
            }
 
            .link_1 {
                color: #236ddb;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="head_1">
                <span class="font_1">登录</span>
                <span class="close">X</span>
            </div>
            <div class="body_1">
                <div class="box_1">
                    <div class="line_1">密码登录</div>
                    <div class="line_2">
                        <select name="" id="">
                            <option>+86</option>
                            <option>+852</option>
                            <option>+853</option>
                            <option>+886</option>
                        </select>
                        <input type="text" class="input_1" name="" id="" placeholder="请输入手机号">
                    </div>
                    <div class="line_3">
                        <input type="password" class="input_2" name="password" id="" placeholder="请输入密码"">忘记密码
                </div>
                <div class=" line_4">
                    </div>
                    <div class="line_5">
                        <input class="input_3 type=" checkbox" name="记住密码" id="">
                        <span class="font_2">记住密码</span>
                    </div>
                    <div class="line_6">
                        <button>登录</button>
                    </div>
                </div>
                <div class="box_2">
                    <div class="box_2_l1">扫码登录</div>
                    <div class="box_2_l2">
                        <img class="img_1" src="./img/西瓜二维码.png" alt="">
                        <p class="font_line_1">
                            打开
                            <span style="color: #fe3355;">
                                西瓜视频手机APP
                            </span>
                        </p>
                        <p class="font_line_2">
                            我的-扫一扫登录
                            <span>
                                <img src="./img/问号.png" alt="" style="width: 14px;">
                            </span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="foot_1">
                <span class="foot_font_1">
                    其他方式：
                </span>
                <img src="./img/抖音.png" alt="">
                <img src="./img/QQ.png" alt="">
                <img src="./img/微信.png" alt="">
                <span class="foot_font_2">
                    手机验证码登录
                </span>
            </div>
            <div class="foot_2">
                <input class="input_4" type="checkbox" name="用户协议" id="">
                登录即代表你同意<a class="link_1" href="https://www.ixigua.com/user_agreement/" target="_blank">用户协议</a>和<a
                    class="link_1" href="https://www.ixigua.com/privacy_policy/" target="_blank">隐私政策</a>
            </div>
        </div>
    </body>
</html>