HTML前端代码问卷星仿写（学习使用）

枕梦东栏

已于 2024-06-01 20:22:43 修改

阅读量1.4k

点赞数 10

文章标签：前端 html 学习

于 2024-06-01 20:16:21 首次发布

本文链接：https://blog.youkuaiyun.com/2401_83334819/article/details/139379006

版权

原创内容，仅供学习交流使用

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <link href="new_file.css" rel="stylesheet" />
       <style type="text/css">
           body {
               background: #cccccc url(img/微信图片_20240601195225.jpg) no-repeat fixed center/100%;
               position: relative;
           }

           .box1 {
               width: 150px;
               height: 50px;
               border: 1px solid transparent;
               margin-top: 30px;
               margin-left: 40px;
           }

           .box2 {
               width: 250px;
               height: 50px;
               border: 1px solid transparent;
               float: right;
               margin-right: 30px;
           }

           .box3 {
               width: 550px;
               height: 500px;
               background-color: aliceblue;
               border: 1px solid transparent;
               position: absolute;
               top: 45%;
               left: 50%;
               transform: translate(-50%, -50%);
               justify-content: center;
               align-items: center;
               border-radius: 20px;
           }

           .box4 {
               width: 60px;
               height: 30px;
               border-radius: 30px;
               border: 1px solid aliceblue;
               text-align: center;
               color: aliceblue;
               margin-top: 10px;
           }

           .box5 {
               width: 100px;
               height: 30px;
               border-radius: 30px;
               border: 1px solid aliceblue;
               text-align: center;
               color: aliceblue;
               margin-top: 10px;
               margin-left: 15px
           }

           .box6 {
               width: 500px;
               height: 60px;
               border: 1px solid transparent;
               margin-left: 25px;
           }

           .box7 {
               width: 35px;
               height: 1px;
               background-color: orange;
               border: 1px solid orange;
               margin-left: 40px;
               margin-top: -20px;
           }

           .box8 {
               width: 500px;
               height: 40px;
               border: 1px solid darkgray;
               margin-right: 25px;
               margin-top: 20px;
               text-align: center;
               border-radius: 1px;
           }

           .box9 {
               width: 500px;
               height: 40px;
               border: 1px solid transparent;
               margin-right: 25px;
               margin-top: 10px;
               text-align: left;
               border-radius: 1px;
           }

           .box10 {
               width: 165px;
               height: 40px;
               border: 1px solid transparent;
               text-align: center;
               float: right;
               color: #cccccc;
           }

           .box11 {
               width: 500px;
               height: 40px;
               background-color: orange;
               border: 1px solid orange;
               margin-right: 25px;
               margin-top: 20px;
               text-align: center;
               border-radius: 1px;
               color: aliceblue;
           }

           .box12 {
               width: 500px;
               height: 40px;
               border: 1px solid transparent;
               margin-right: 25px;
               margin-top: 20px;
               text-align: center;
               border-radius: 1px;
           }

           .box13 {
               width: 500px;
               height: 40px;
               border: 1px solid transparent;
               margin-right: 25px;
               margin-top: 5px;
               text-align: center;
               border-radius: 1px;
           }

           .box14 {
               width: 300px;
               height: 100px;
               border: 1px solid transparent;
               float: right;
               margin-top: 40%;
               text-align: left;
           }

           .box15 {
               width: 500px;
               height: 100px;
               border: 1px solid transparent;
               margin-top: 0px;
               margin-right: 25px;
               box-sizing: border-box;
           }

           .box16 {
               width: 40px;
               height: 40px;
               margin-top: 0px;
               border-radius: 50%;
               margin-left: 20px;
               margin-right: 80px;
               justify-content: center;
               align-items: center;
               border: 1px solid darkgray;
               float: right;
               box-sizing: border-box;
           }

           .spaced-text {
               margin-right: 20px;
           }

           .text-with-lines {
               display: inline-block;
               position: relative;
               padding: 0 10px;
               line-height: 1.5;
           }

           .text-with-lines::before,
           .text-with-lines::after {
               content: '';
               display: block;
               position: absolute;
               width: 150px;
               height: 1px;
               width: 40%;
               top: 50%;
               background-color: #cccccc;
           }

           .text-with-lines::before {
               left: -40px;
           }

           .text-with-lines::after {
               right: -40px;
           }
       </style>
   </head>
   <body>
       <div class="box14">
           <p class="tight-text">《登顶武功山》</p>
           <h3 class="tight-text">拍摄于问卷星团队二月徒步之旅</h3>
       </div>
       <div class="box1">
           <img src="img/wjx-logo@2x.png" width="150px" height="50px" />
       </div>
       <div class="box2">
           <div class="box4">注册</div>
           <div class="box5">返回首页</div>
       </div>
       <div class="box3">
           <div class="box6">
               <p>
                   <span class="spaced-text">账号登录</span>
                   <span>验证码登录</span>
               </p>
               <div class="box7"></div>
               <div class="box8">
                   <input type="text" class="input-field" placeholder="用户名/Email/手机" />
               </div>
               <div class="box8">
                   <input type="text" class="input-field" placeholder="请输入登录密码" />
               </div>
               <div class="box9">
                   <input type="checkbox" name="gxh" /><span>下次自动登录</span>
                   <div class="box10"><a href="https://www.wjx.cn/register/forgetpassword.aspx">忘记用户名/密码？</a></div>
               </div>
               <div class="box11">
                   <p>登录</p>
               </div>
               <div class="box12"><a href="https://www.wjx.cn/register/register.aspx?type=1">立即注册</a></div>
               <div class="box13"><span class="text-with-lines">更多登录方式</span></div>
               <div class="box15">
                   <div class="box16">
                       <img src="img/th.jpg"/>
                       <h6>企业微信</h6>
                   </div>
                   <div class="box16">
                       <img src="img/OIP-C.jpg" />
                       <h6>微信登录</h6>
                   </div>
                   <div class="box16">
                       <img src="img/q.png" />
                       <h6>QQ登录</h6>
                   </div>
               </div>
           </div>
       </div>
   </body>
</html>

<!-- css部分
body {
   width: 100vw;
   height: 100vh;
   margin: 0;
   padding: 0;
   background: #cccccc url(img/你好.jpg) no-repeat center center / cover;
   position: relative;
}

.box2 {
   position: absolute;
   top: 10px;
   right: 30px;
   width: 350px;
   height: 50px;
   border: 1px solid red;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-right: 30px;
}

.box7 {
margin-top: 10px;
}

.box6 p {
   margin-bottom: 0ox;
   margin-left: 15px;
   font-size: 22px;
   margin-bottom: 20px;
}

.box8 {
   width: 0px;
   padding: 0px;
   border: 1px solid orange display: inline-block;
   margin-bottom: 0px;
   border-radius: 1px;
}

.input-field {
   /* 设置输入框的样式，使其与盒子保持一致 */
   width: 100%;
   /* 使输入框宽度与盒子宽度相同 */
   padding: 12px;
   /* 内边距，可以与盒子不同 */
   border: none;
   /* 去除输入框的默认边框 */
   box-sizing: border-box;
   /* 确保padding和border不会增加输入框的总宽度 */
}

.box11 p {
margin-top: 6px;
font-size: 18px;
}

.box14 p {
   font-size: 30px;
   color: aliceblue;
   margin-left: 0px;
}

.box14 h3 {
   margin-left: 0rem;
   color: aliceblue;
   margin-bottom: 0rem;
}

.box16 {
   position: relative;
   width: 70px;
   height: 70px;
}

.box16 img {
   width: 100%;
   height: auto;
   border-radius: 50%;
   -o-object-fit: cover;
}

.box16 h6 {
   position: relative;
   margin-top: 25px;
   font-size: 9px;
   box-sizing: border-box;
   color: darkgrey;
}

.box13 {
color: darkgray;
}

.tight-text {
   margin: 0;
   padding: 0;
   line-height: 2;
   font-size: 20px;
   font-family: Arial, sans-serif;
   color: aliceblue;

} -->