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

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 移动端登录页面-(1)HTML结构搭建练习 -> 正文阅读

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

目标: 利用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>