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

目标: 利用css样式布局, 实现登录页面效果
效果图:
移动端登录页面-(1)HTML结构搭建练习_第1张图片

步骤一: 搭建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>Documenttitle>
    <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>

移动端登录页面二(less样式结构练习)

你可能感兴趣的:(web笔记,前端入门学习,css,css3,前端)