httml+csss实现华为登录界面2（简易版）

最新推荐文章于 2024-07-12 20:49:16 发布

是aaaa阿腾阿

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量510

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/Satenga/article/details/126981153

版权

httml+csss实现华为登录界面2

直接上代码，是a腾阿

注：不是很美观，自己调整把（开摆了）

效果图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta http-equiv="refresh" content="3"></meta>-->
    <title>是aaaa阿腾阿</title>
    <link rel="stylesheet" href="../static/huawei_css.css">
</head>
<body>
    <div class="head">
        <div class="the-head-1">
            <img src="https://uniportal.huawei.com/uniportal1/images/language_logo_phone.png" alt="logo">
            <span>简体中文(中国)</span>
        </div>
        <div class="the-head-2">
            <img src="https://uniportal.huawei.com/uniportal1/rest/hwidcenter/logon-logo" alt="huawei">
        </div>
    </div>

    <div class="section">
        <div class="contain">
            <div class="contain-title">
                <span>Uniportal帐号登录</span>
            </div>
            <div class="contain-input">
                <input type="text"  placeholder="账号名/邮箱/手机号/W3账号">
            </div>
            <div class="contain-input">
                <input type="password" placeholder="密码">
            </div>
            <div class="contain-text">
                <a href="#">短信验证码登录</a>
            </div>
            <div class="contain-button">
                <button>登录</button>
            </div>
            <div class="contain-text2">
                <div class="set_a">
                <a href="#">立即注册</a>
                <span>|</span>
                <a href="#">忘记密码</a>
                <span>|</span>
                <a href="#">修改密码</a>
                </div>
            </div>
            <div class="contain-foot">
                <img src="https://uniportal.huawei.com/uniportal1/images/pic/icon_bangzhu@2x.png" alt="logo">
                <span><a href="#">点击获取更多帮助？</a></span>
            </div>

        </div>
    </div>

</body>
</html>

css

*{
    padding: 0;
    margin: 0;
}
body{
    background: #eff1f5;
}
div.head{
    height: 300px;
    width: 100%;
    /*background: darkgray;*/
    /*border:2px solid red;*/
    margin-bottom: 20px;
}
/*.head:nth-child(1){*/
    /*!*background: black;*!*/
    /*height: 40px;*/
    /*width: 100%;*/

/*}*/

div.head>div.the-head-1{
    width: 100%;
    height: 50px ;
    /*border: 2px solid red;*/
    background:#262b3a ;
}
div.head > div.the-head-1>img{
    position: absolute;
    right: 300px;
    /*margin-top: 3px;*/
    width: 25px;
    height: 25px;
    /*margin-top: 5px;*/
    padding-top: 5px;
    color: white;
}

div.head > div.the-head-1>span{
    position: absolute;
    right: 190px;
    /*margin-top: 3px;*/
    ;
    /*margin-top: 5px;*/
    padding-top: 7px;
    color: white;
}

div.head>div.the-head-2{
    width: 100%;
    height: 75px ;
    /*border: 2px solid red;*/
    background: white;
}

div.head > div.the-head-2>img{
    position: absolute;
    left: 100px;
    /*margin-top: 3px;*/
    width: 175px;
    height: 45px;
    /*margin-top: 5px;*/
    padding-top: 15px;
}

div.section>div.contain{
    position: absolute;
    width: 500px;
    height: 500px;
    background-color: white;
    left: 0;
    right: 0;
    top: 320px;
    bottom: 0;
    margin:auto;
    border-radius: 5px;

}

div.section>div.contain>div.contain-title{
    width: 500px;
    position: relative;
    height: 70px;
    /*border: 2px solid red;*/
    margin-top: 60px;

}

div.section>div.contain>div.contain-title span{
    display: block;
    font-size: 40px;
    text-align: center;


}

div.section>div.contain>div.contain-input{
    /*display: block;*/
    /*width: 500px;*/
    /*height: 30px;*/
    /*margin-top: 20px;*/
    margin-bottom: 20px;
    margin-top: 20px;
    display: flex;
    /*left: 5px;*/
    flex-direction: column;
    /* width: 260px;
    height: 260px; */
    justify-content: center;
    align-items: center;
    /*border: 1px solid black;*/
}

div.section>div.contain>div.contain-input input{
    box-sizing: border-box;
    color:black;
    font-size: 15px;
    height: 50px;
    width: 305px;
    background: rgba(255, 255, 255, 0.2);
    /*border: 1px solid rgba(255, 255, 255, 0.5);*/
    /* border: none; */
    padding: 10px;
    border-radius: 5px;
    transition: 0.5s;
    outline: none;
    letter-spacing: 1px;
    /*text-align: center;*/
}

div.section>div.contain>div.contain-text  a{
    display: block;
    text-align: right;
    margin-bottom: 10px;
}
div.section>div.contain>div.contain-button  {
    /*display: flex;*/
    width: 500px;
    /*align-items: center;*/
    /*margin-right: 50%;*/
    height: 50px;
    /*border: 2px solid red;*/
    /*position: absolute;*/
    /*margin-right: 5px;*/
}
div.section>div.contain>div.contain-button button  {
    /*display: flex;*/
    width: 500px;
    height: 50px;
    /*align-items: center;*/
    border: none;
    background: #C70008;
    font-size: 30px;
    color: white;
    /*margin-right: 50%;*/
}

div.section>div.contain>div.contain-text2{
    width: 500px;
    height: 30px;
    /*border: 2px solid red;*/
    padding-top: 10px;
    margin-top: 20px;

}
div.section>div.contain>div.contain-text2>div.set_a{
    display: block;
    text-align: center;


}
div.section>div.contain>div.contain-foot{
    width: 500px;
    height: 35px;
    margin-top: 20px;
    /*border: 2px solid red;*/
}

div.section>div.contain>div.contain-foot img{
    position:relative;
    left: 30%;
    /*text-align: center;*/
}
div.section>div.contain>div.contain-foot span{

    position:relative;
    left: 32%;
    top: -10px;

    /*text-align: center;*/
}



/*.head:nth-child(1) img{*/
    /*position: absolute;*/
    /*right: 300px;*/
    /*!*margin-top: 3px;*!*/
    /*width: 25px;*/
    /*height: 25px;*/
    /*!*margin-top: 5px;*!*/
    /*padding-top: 5px;*/
/*}*/


/*.head.the-head-1>span{*/
    /*position: relative;*/
    /*right: 5px;*/
    /*text-align: center;*/
/*}*/