淘宝登陆界面

最新推荐文章于 2023-03-16 10:38:10 发布

overload1997

最新推荐文章于 2023-03-16 10:38:10 发布

阅读量1.6k

点赞数 1

文章标签： html5 html css

本文链接：https://blog.csdn.net/overload1997/article/details/120630413

版权

<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .div {
            width: 100%;
            height: 800px;
            background-image: url(https://gw.alicdn.com/imgextra/i3/O1CN01iyYdem1GQd1yGgA0a_!!6000000000617-0-tps-2500-600.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .login_box {
            /* 透明效果 */
            filter: alpha(Opacity=80);
            -moz-opacity: 0.8;
            opacity: 0.8;
            /* 登陆盒子属性 */
            float: left;
            width: 400px;
            height: 200px;
            background-color: white;
        }

        .empty_div1 {
            float: left;
            width: 100%;
            height: 200px;
            /* background-color: blue; */
        }

        .empty_div2 {
            float: left;
            width: 70%;
            height: 400px;
            /* background-color: blue; */
        }

        .empty_div3 {
            float: left;
            width: 100%;
            height: 20px;
            /* background-color: blue; */
        }

        .empty_div4 {
            float: left;
            width: 10%;
            height: 200px;
            /* background-color: red; */
        }

        .login_by_password {
            float: left;
            width: 20%;
            height: 25px;
            /* background-color: white; */
        }

        .login_by_short_message {
            float: right;
            width: 70%;
            height: 25px;
            /* background-color: greenyellow; */
        }

        .account {
            float: right;
            width: 90%;
            height: 50px;
            /* background-color: red; */
        }

        .password {
            float: right;
            width: 90%;
            height: 50px;
            /* background-color: pink; */
        }

        .empty_div7 {
            float: left;
            width: 40%;
            height: 25px;
            /* background-color: green; */
        }

        .login {
            float: right;
            width: 50%;
            height: 25px;
            /* background-color: white; */
        }

        .login_by_weibo {
            float: left;
            width: 50%;
            height: 25px;
            /* background-color: purple; */
        }

        .login_by_airpay {
            float: right;
            width: 40%;
            height: 25px;
            /* background-color: orange; */
        }
    </style>
</head>

</html>

<header>
    <img src="image/taobao.png">
</header>

<body>
    <div class="div">
        <div class="empty_div1">
        </div>

        <div class="empty_div2">
        </div>

        <div class="login_box">
            <div class="empty_div3">
            </div>

            <div class="empty_div4">
            </div>

            <div class="login_by_password">
                密码登陆
            </div>

            <div class="login_by_short_message">
                短信登陆
            </div>

            <div class="account">
                <img src="image/login.png"> 登陆账号: <input placeholder="请输入您的账号"> </input>
            </div>

            <div class="password">
                <img src="image/password.png"> 登陆密码: <input type="password" placeholder="请输入您的密码"> </input>
            </div>

            <div class="empty_div7">
            </div>

            <div class="login">
                <button>
                    登陆
                </button>
            </div>

            <div class="login_by_weibo">
                <img src="image/weibo.png"> 微博登陆
            </div>

            <div class="login_by_airpay">
                <img src="image/airpay.png"> 支付宝登陆
            </div>
        </div>
    </div>
</body>

<footer align="center">
    阿里巴巴集团&nbsp;&nbsp;|&nbsp;&nbsp;阿里巴巴国际站&nbsp;&nbsp;|&nbsp;&nbsp;阿里巴巴中国站&nbsp;&nbsp;|&nbsp;&nbsp;全球速卖通&nbsp;&nbsp;|&nbsp;&nbsp;淘宝网&nbsp;&nbsp;|&nbsp;&nbsp;天猫&nbsp;&nbsp;|&nbsp;&nbsp;聚划算&nbsp;&nbsp;|&nbsp;&nbsp;一淘&nbsp;&nbsp;|&nbsp;&nbsp;阿里妈妈&nbsp;&nbsp;|&nbsp;&nbsp;飞猪&nbsp;&nbsp;|&nbsp;&nbsp;虾米&nbsp;&nbsp;|&nbsp;&nbsp;阿里云计算&nbsp;&nbsp;|&nbsp;&nbsp;云OS&nbsp;&nbsp;|&nbsp;&nbsp;万网&nbsp;&nbsp;|&nbsp;&nbsp;支付宝&nbsp;&nbsp;|&nbsp;&nbsp;来往
</footer>```