华为短信验证码登录页面

桃花加酥

已于 2024-03-13 16:22:39 修改

阅读量779

点赞数 16

分类专栏：网页设计文章标签：华为 html css 前端

于 2024-03-07 20:50:17 首次发布

本文链接：https://blog.csdn.net/2301_81323885/article/details/136545538

版权

网页设计专栏收录该内容

8 篇文章 0 订阅

订阅专栏

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
         width: 1472.8px;
         height: 834.4px;
         background-color: #ffffff;
         float: left;
         margin-top: 30px;
        }
        .box2{
            width: 1472px;
         height: 38px;
         float: left;
         background-color:#DEDEDE;
         color: #000000;

        }
        .box6{
            width: 1472px;
            height: 38px;
            color: #000000;
            background-color: #f1f1f1;
            float: left;
            position: relative;
            bottom: 20px;
        }
        .box7{
            width: 90px;
            height: 38px;
            background-color: #f1f1f1;
            float: left;
            position: relative;
            left: 320px;

        }
       .pan{
        color: #d0d0d0;
        position: relative;
        left: 324px;
        top: 4px;
       }
        .nb{
            width: 90px;
            height: 38px;
            background-color: #f1f1f1;
            color: #000;
            position: relative;
            left: 340px;
            top: 4px;
            font-weight: 700;
        }
        .box8{
            width: 1338px ;
            height:177px ;
            background-color: #ffffff;
            float: left;
            margin-top: 2px;
        }
        .box9{
            width: 1338px;
            height: 90px;
            background-color: #ffffff;
            position: relative;
            top: 40px;
        }
      .nn{
        width: 181px;
        height: 33px;
        float: left;
        background-color: #ffffff;
        position: relative;
        top: 30px;
        left: 628px;
        color: #191919;
        font-size: 25.6px;
      }
.box10{

width: 1338px;

height: 340.5px;

background-color: #ffffff;

color: #191919;

}

.box11{

width: 257px;

height: 340px;

background-color: #ffffff;

margin-left: 240px;

position: relative;

right: -51px;

}

.box12{

width: 160px;

height: 160px;

background-color: #f7f7f7;

margin-left: 85px;

float: left;

position: relative;

top: 80px;

right: 45px;

}

.box13{

width:255px ;

height: 90px;

background-color: #ffffff;

color: #828282;

margin-top:91px;

float: left;

}

.box14{

width: 0.5px;

height: 267px;

background-color: #b9b1b1;

position: relative;

bottom: 273px ;

left: 210px;

float: left;

}

.box15{

width: 434px;

height: 45px;

background-color: #f1f1f1;

float: left;

margin-top: -251px;

border-radius:8px;

margin-left: 263PX;

}

.pan{

color: #d0d0d0;

position: relative;

left: 328px;

top: 4px;

}

.box16{

width:322px;height:45px;

border-radius:8px;

position: relative;

left: 760px;

bottom: 465px;

}

.jjjjj{

color: #8686ef;

float: left;

position: relative;

left: 332px;

bottom: 334px;

}

{

position: relative;

top: 81px;

right: 117px;

}

.box17{

width: 350px;

height:61px ;

background-color: #eba6a9;

float: left;

font-size: 25px;

color: #fff7f5;

text-align: center;

position: relative;

left: 28px;

bottom: 243px;

border-radius:8px;

}

.box19{

width: 1472.8px;

height: 133px;

background-color: #f1f1f1;

float: left;

position: relative;

bottom:77px;

left: -796px;

}

.box20{

width: 1472.8px;

height: 25px;

background-color: #f1f1f1;

position: relative;

top: 21px;

}

.ku{

color: #d4d8db;

position: relative;

left: 514px;

top: 0px;

}

.gg{

color: #828282;

text-align: center;

position: relative;

left: 518px;

}

.ggg{

color: #828282;

text-align: center;

position: relative;

left: 514px;

}

.kuy{

color: #d4d8db;

position: relative;

left: 515px;

top: 0px;

}

.gggg{

color: #828282;

text-align: center;

position: relative;

left: 518px;

}

.kuyi{

color: #d4d8db;

position: relative;

left: 518px;

top: 0px;

}

.ggggg{

color: #828282;

text-align: center;

position: relative;

left: 521px;

}

.box21{

width: 1183px;

height: 54px;

float: left;

text-align: center;

background-color: #f1f1f1;

position: relative;

bottom: -24px;

}

.mmm{

color: #aaaaaa;

text-align: center;

position: relative;

left: 161px;

top: 14px;

}

</style>

</head>

<body>

< img src="../素材/img/华为3333334.png" width="90" height="38">

</div>

</div>

<span class="nn">短信验证码登录</span>

</div>

< img src="../素材/img/下载.png"width="128" height="128" style="margin:16px 0px 0px 16px;">

</div>

&emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp;

 若您使用华为手机，请前往“设置”>“华为帐号”扫码登录。

</div>

</div>

</select>

</div>

&emsp; &emsp; &emsp; &emsp; &emsp; &emsp; <input type="text" placeholder="&emsp;短信验证码" style="width:434px;height:45px; background-color:#f2f2f2; border:1px ; border-radius:8px; float:left; margin-bottom:300px; ">

获取验证码

</span>

</span>

<span class="gg">华为帐号用户协议</span>

<span class="ggg">关于华为账号与隐私的声名</span>

<span class="ggggg">Cookies</span>

</div>

</div>

</body>

</html>

效果:如下图: