lovecoding
/
W260426


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
							<!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">
    <!-- 引入iconfont字体库 -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5209207_75gnoupm8ng.css">
</head>

<body>
    <!-- 最外层容器 -->
    <div class="container clearfix">
        <!-- 登录页面左侧图片 -->
        <div class="left-img"></div>
        <!-- 登录页面主要功能部分 -->
        <div class="right-content">
            <!-- 顶部导航栏 -->
            <div class="top-bar clearfix">
                <div class="logo clearfix">
                    <img src="./img/logo-mi2.png" alt="logo">
                    <span>小米账号</span>
                </div>
                <div class="top-nav">
                    <ul class="clearfix">
                        <li>用户协议</li>
                        <li>隐私政策</li>
                        <li>帮助中心</li>
                        <li class="line">|</li>
                        <li>中文(简体)
                            <i></i>
                        </li>
                    </ul>
                </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 class="inp">
                        <input type="checkbox">
                    </div>
                    <div class="text">
                        已阅读并同意<u>小米账号使用协议</u>和<u>小米账号隐私政策</u>
                    </div>
                </div>
                <!-- 登录按钮 -->
                <div class="login-btn">
                    <div class="inp-btn">
                        <button>登录</button>
                    </div>
                    <div class="text-btn clearfix">
                        <span>忘记密码？</span>
                        <span>注册账号</span>
                    </div>
                </div>
                <!-- 其他登录方式 -->
                <div class="login-other">
                    <p>其他登录方式</p>
                    <ul class="clearfix">
                        <li>
                            <i class="iconfont icon-qq"></i>
                        </li>
                        <li>
                            <i class="iconfont icon-zhifubao"></i>
                        </li>
                        <li>
                            <i class="iconfont icon-weibo"></i>
                        </li>
                        <li>
                            <i class="iconfont icon-weixin"></i>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 底部区域 -->
            <div class="bottom-bar">
                小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号
            </div>
        </div>
</body>

</html>