移动端登录页面-(1)HTML结构搭建练习

目标: 利用css样式布局, 实现登录页面效果效果图:步骤一: 搭建html结构<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0,maxim

麻瓜呀

3764人浏览 · 2022-03-10 18:48:53

麻瓜呀 · 2022-03-10 18:48:53 发布

目标: 利用css样式布局, 实现登录页面效果
效果图:
在这里插入图片描述

步骤一: 搭建html结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <title>Document</title>
    <script src="./js/flexible.js"></script> /* 引入flexible文件 */
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
      <div class="layout">
          <div class="box">
              <div class="user">
                  <input type="text" placeholder="用户名/账号/手机号" class="usn" ></input>
                  <input type="password" placeholder="请输入您的密码"
                  class="psw"></input>
              </div>
              <button class="login">登录</button>

              <div class="other">
                <a href="#" class="register">注册账号</a>
                <a href="#" class="forget">忘记密码</a>
              </div>

              <div class="devision"></div>
              <div class="outreach">
                <img src="./images/icon-1.png">
                <img src="./images/icon-2.png">
                <img src="./images/icon-3.png">
              </div>
          </div>
      </div>
  </body>
</html>