HTML5+CSS3实现华为账号登录

有你真好...

已于 2023-12-13 11:33:25 修改

阅读量668

点赞数 2

文章标签： html5 css3 华为

于 2023-05-29 23:19:33 首次发布

本文链接：https://blog.csdn.net/qq_62185873/article/details/130938544

版权

一、前言

对于华为账号登录是自学时做的一个作品，想要学习的小伙伴，可以借鉴的，下面我会展示效果图和部分代码。这个页面相对的简单，页面元素较少，对于初学者可以自己尝试一下！

（注：此次做了华为的一系列网页，可以前往我的主页进行查看）

二、效果成品图

三、代码展示（为HTML代码，CSS代码在下方链接，需要自取）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为账号-登录</title>
    <link rel="stylesheet" href="../css/work.css">
</head>

<body>


    <div>
        <div class="head1">
            <div class="head1_1" style="margin: 0 auto;">
                <img src="../imgs/logo.png" alt="">
                <span id="head1_i1">|</span>
                <span>华为商城</span>
            </div>
        </div>
        <!-- 头部 -->
        <div class="header" style="margin: 0 auto;">
            <div class="i1">
                华为帐号登录
            </div>

            <div class="i2">
                <span class="left">
                    <div class="le1">
                        <img src="../imgs/erweima.png" alt="">
                    </div>
                    <p>若您使用华为手机，请前往“设置”>“华为帐号”扫码登录。</p>
                </span>
                <span class="mid"></span>
                <span class="right">
                    <input type="text" class="in1" placeholder="手机号/邮件地址/账号名">
                    <input type="password" class="in1" style="margin-bottom: 10px;" placeholder="密码">
                    <p class="rip">短信验证码登录</p>
                    <div class="ridiv">登录</div>
                    <div class="ridiv1">
                        <span style="margin-left: 85px;">注册</span>
                        <span style="color: #e5e5e5;">|</span>
                        <span>忘记密码</span>
                        <span style="color: #e5e5e5;">|</span>
                        <span>遇到问题</span>
                    </div>
                    <div class="ridiv2">
                        <img src="../imgs/qq.png" alt="">
                        <img src="../imgs/zhifubao.png" alt="">
                        <img src="../imgs/weixin.png" alt="">
                    </div>
                </span>
            </div>

        </div>
        <!-- 中间 -->
        <div style="background-color: #f5f5f5;width:100%;">
            <div class="container">
                <div class="contain">
                    <p class="en1">
                        <a href="">华为账号用户协议</a>
                        <span>|</span>
                        <a href="">关于华为账号与隐私的声明</a>
                        <span>|</span>
                        <a href="">常见问题</a>
                        <span>|</span>
                        <a href="">Cookies</a>
                    </p>
                    <p class="en2">华为帐号 版权所有 2011-2023</p>
                </div>


            </div>


        </div>

    </div>
</body>

</html>