使用HTML+CSS完成华为官网登录页面效果（静态页面）

最新推荐文章于 2023-05-31 14:00:00 发布

八月和我

最新推荐文章于 2023-05-31 14:00:00 发布

阅读量3.2k

点赞数 5

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_52882006/article/details/126963085

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/css/huaweiRegister.css">

</head>
<body>
    <body style="background-color: #eff1f5"></body>
    <div style="width: 1500px;height: 30px;background-color: black;">
        <div class="d1">
            <img src="../static/images/language_logo.png" alt="" width="15px">
            简体中文(中国)
        </div>
    </div>
    <div style="width: 1500px;height: 70px;background-color: white;">
        <img src="../static/images/huawei-logo.jpg" alt="" width="130px" style="position: relative;top: 20px;left: 150px;">
    </div>
    <div class="box">
        <div class="d2">Uniportal帐号登录</div>
        <div class="d6"><input type="text" placeholder="&nbsp;&nbsp;帐号名/邮箱/手机号/W3帐号"
            style="  height: 42px;
            line-height: 42px;
            background: #ffffff;
            border: 1px solid #d4d4d4;
            border-radius: 2px;
            outline: none;
            width:100%;
            margin-top:10px;margin-bottom:10px;"
        /></div>
       <!-- <div><input type="password" style="width:450px;height:43px;margin-top:10px;margin-bottom:10px;border: 1px solid darkgray;" /></div>  -->
        <div><input type="password" placeholder="&nbsp;&nbsp;密码" style="
            height: 42px;
            line-height: 42px;
            background: #ffffff;
            border: 1px solid #d4d4d4;
            border-radius: 2px;
            outline: none;
            width:100%;
            margin-top:10px;margin-bottom:10px;"
            />
        </div>
        <div class="d3" >短信验证码登录</div>
        <div>
            <input type="submit" value="登录" style="display: block;
                max-height: 48px !important;
                padding: 15px 20px;
                width: 100%;
                text-align: center;
                background-color: #C7000B;
                border: 1px solid #C7000B;
                border-radius: 4px;
                font-size: 18px;
                font-weight: 500;
                color: #ffffff;"
            />
        </div>
        <div class="d4">立即注册&nbsp;|&nbsp;忘记密码&nbsp;|&nbsp;修改密码</div>
        <div class="d6">
            <img src="../static/images/wenhao.png" alt="" width="15px">
            点击获取更多帮助？
        </div>
    </div>
    <div style="width: 1500px;height: 30px;background-color: black;position:relative;bottom: 0px; ">
        <div class="d5">版权所有 © 华为技术有限公司 1998-2022。保留一切权利。粤A2-20044005号</div>
    </div>
</body>
</html>

.box{
    background-color:white;
    width: 325px;
    height: 285px;
    padding: 100px;
    margin-top: 50px;
    margin-bottom: 60px;
    position: relative;
    left:500px;
}
.d1{color: white;position: absolute;right: 100px;font-size: 12px;}
.d2{
      height: auto;
      font-family: PingFangSC-Semibold;
      font-size: 29px;
      font-weight: 400;
      color: #333333;
      letter-spacing: 0;
      word-wrap: break-word;
      word-break: break-all;
      text-align: center;
      margin-top:-40px;
      margin-bottom:30px;
}
.d3{color: blue;font-size: 15px;margin-top:15px;margin-bottom:15px;position: relative;left: 225px;}
.d4{color: blue;font-size: 15px;margin-top:15px;margin-bottom:15px;text-align: center;}
.d5{color: darkgray;position: absolute;left: 30px;bottom: 5px;font-size: 12px;}
.d6{color: dimgray;font-size: 15px;text-align: center;}

页面效果如下