|
|
@@ -1,17 +1,19 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
+
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Document</title>
|
|
|
<!-- 引入css文件 rel="stylesheet" href为css文件路径 -->
|
|
|
- <link rel="stylesheet" href="./css/login.css">
|
|
|
+ <link rel="stylesheet" href="./css/login.css">
|
|
|
</head>
|
|
|
+
|
|
|
<body>
|
|
|
<!-- 最外层容器 -->
|
|
|
<div class="container clearfix">
|
|
|
<!-- 登录页面左侧图片 -->
|
|
|
- <div class="left-img"></div>
|
|
|
+ <div class="left-img"></div>
|
|
|
<!-- 登录页面主要功能部分 -->
|
|
|
<div class="right-content">
|
|
|
<!-- 顶部导航栏 -->
|
|
|
@@ -19,7 +21,7 @@
|
|
|
<div class="logo clearfix">
|
|
|
<img src="./img/logo-mi2.png" alt="logo">
|
|
|
<span>小米账号</span>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
<div class="top-nav">
|
|
|
<ul class="clearfix">
|
|
|
<li>用户协议</li>
|
|
|
@@ -30,9 +32,42 @@
|
|
|
<i></i>
|
|
|
</li>
|
|
|
</ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 登录框 -->
|
|
|
+ <div class="login-box">
|
|
|
+ <!-- 登录框切换按钮 -->
|
|
|
+ <div class="login-tab clearfix">
|
|
|
+ <div class="active">登录</div>
|
|
|
+ <div >注册</div>
|
|
|
+ </div>
|
|
|
+ <!-- 文本框区域 -->
|
|
|
+ <div class="login-input">
|
|
|
+ <div>
|
|
|
+ <!-- placeholder 占位符 -->
|
|
|
+ <input type="text" placeholder="邮箱/手机号码/小米ID">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <input type="password" placeholder="密码">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 协议区域 -->
|
|
|
+ <div class="login-agreement">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- 登录按钮 -->
|
|
|
+ <div class="login-btn">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- 其他登录方式 -->
|
|
|
+ <div class="login-other">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 底部区域 -->
|
|
|
+ <div class="bottom-bar">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</body>
|
|
|
+
|
|
|
</html>
|
