LOADING

MiniKano的小窝


 

【造轮子】重写小米云服务页面

2021年9月25日 0条评论 1.6k次阅读 3人点赞 kanokano

很久没练过写网页了，这次又来造轮子了 :鹿乃_邪魅一笑:
P.S：观察了原版网页源码，又了解到了网页中的新布局：flex布局
目前还不会任意尺寸的的media适配，所以在小尺寸设备上可能有布局上的bug，后面完善学习了再回来填坑吧 :鹿乃_打扰了:

效果图：

附源码:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title>仿写小米云服务</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            color: white;
        }

        a {
            text-decoration: none;
        }

        .mi_bg {
            position: fixed;
            height: 100%;
            width: 100%;
            background-image: linear-gradient(#1851D7, #3766D5);
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        .banner {
            display: flex;
            position: relative;
            height: 58px;
            padding: 5px 20px 0px 30px;
            align-items: baseline;
            /* flex */
            justify-content: space-between;
        }

        .cloud-logo {
            display: inline-block;
            height: 100%;
            padding-left: 60px;
            line-height: 57px;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABcCAMAAADUMSJqAAAB71BMVEUAAAAxsP8qr/81sP89q/8qff8qg/8qsv8qi/8qh/8qsf//ogAqsf8qsf8rdP8srv8tlf8vqP//mwD/mwD/hgApn/8ob///lAAqqP//iQArr/8qlf8rtP8rsP8qnv8rtP//mAArr/8pcf//mQAqcf8sq///owD/cgD/jwD/kQAqqf//agD/oQApb/8qsP8qmf8qk/8qoP8qpf//aQApkP//oAAqsP//iwD/agAqsv//ogAqkf//dwAqtP8rc/8rsv//ogD/bgD/owD/eAD/mwD/hAArpP//nAD/lgApj///ewArrf8qsP8obv8rjv8pdf//mAD/dQAqlv//iAD/hAAqb///gAArnf8qmf//lgArkf//aAApcP8pb/8rcP8rrf//gAApnP8po/8obv8pmf8plv8pp/8pqf8poP8plP8pj/8pjf8pi/8pf/8pif8ph/8qrv8phf//fAD/jQAqsf8pgf8pg///dAD/fwApn/8pk///kAAprP8pfP8peP8pov8pnv8pmP8pkv//mgAppf8ppv//kwApm/8pkf8pev8ocf//igApq///eQApsP//hgD/hAD/dwD/iAD/ggD/agD/cQD/lQD/bwApr/8pdf//bAAqs///lwD/nQD/oAAodv//aAD/gwD/bgAoc///dgBvn5cgAAAAYXRSTlMAC+gFCPX00fT03tnMsjsoHxb88/LMvauimYeEfHRvaGFaV1BIQTAvGfn39PLx7uzp4t7Y0crGwsG9vbesqKKgg2BaUEE8NS0O/fr5+Pft7Ojo59vb18O+r6OQhIJ8clQOhvW13wAABLNJREFUaN7tmPdXE0EQxzeJiiIo2Hvvvffee+89RY0JxkRjSYiaIBCJgAVEIAK2P9TZ2ezO3l3u6fPibzd/wOd932fmZvYdc8stt9xyyy23/lPVzayt8R731tTOHFtp9NyqZGdvPJ5pv3//3r11s3wVRC+sKgK7t8Rubg6sm1sx9oxiMZnsjMfjkv36dXjKsIqgh9UCm5y0NAcCr8Op7MT6SsB3JqG4kwyyA4FAOBzOZv0TPc7Z05KQG5yU2OgklfL78/krznvJdXPf5ATZ/lAoN8sh2wdzgsLb2xUbhCP77mqHYmZj7kyZ3KG7dx9MdwavEbnR9z3KnQc2wNc4+pjGcjbkVmxyAux000In8JmcncEBJ3Y+H8rlkP32mhP47l7IrbOzkJvYke1O4Ful7xaT7wfAbopENjiBV8s5aSHfyMbckegpJ3CvXCgBgMvcwgnAo9GRjuA2M5hO89zRBmdwnruFC1dOcuDkgcjd8O/wYR6Px0u+w6ZeRoAd+xf42Bm1Vavicr7FIlQzCPC3IncsNoox9q27+8eXz89/fex4/PjFi64P7ydsnjrniN2uml0tFiGxwUkKcyMblJTYjwS8n8OfI7wL4J/ePXmydPLBsqe4mh+1XsxNA57V2AhHtoT3q+Rd3wW8sbHn6hKL6N3FpOGoAdo4g8oJsBOW5C8UvLVn/AEju34Tj50UbDpqOpv3UrITIzj8Wxktja2tPV/HzTHkroHcyCbf5ET2ktjPRlBDAd6ByQn+ZmC+4RYXBdvOd1r5jnE2wtG5VQuHvxl/WDs7eDB1tmlOmtScIPupDfydhA9slGyPF+Fx0yL0A9yYu0GyJZzmnJwL+OA+eljhnMRNu8qveglzotiAfvpwuHCuJRdwlXxgtFwkSX7UkH1fOFFHLYe5IyQFcz9EuHUU9eSDi5B9SPqmR4TuG3OrXiaQ/XK47vwjaiHnAr6n9LTqLB16YotBIXZU+UY2wrvlKJZ1PrhNnDRgG2cQ2FpudBIjNsJttJDzQSG9Cg89+iY2woGdJvYjYre1+VRDf9k4X4HwVcIJsY2HHoUjO0HsV3WMLVdz3qFpaTTCT2Qku5l8i8NDvjH3M8UeGsPYevM+p+SkpRofm7aHHgeFfCP71at5jG0h5+bk1NBNGckmJ39gD/XtYux6mX1uGcUp8tAHYFfJ3PiIUL4T4sNUufv6TvvYYvtpoY/oNvVS952m3EbfPPjPApfebzvnUjnzLMNHBDkRvbRlDwH7Z2ESY3ut+5waKhfXFFxWxBZOiE1OXgo2BC/w6Fts9zmt3Lpl6oES0r6diGFXQSknwA4GIfri5Xb7fDwax5pGuamX1tzIxtwcHrzB2H6bfT5OO3OeiQY2wLUZxOA6u4BsqAWg3brPLQe6fm2KlpXYJ7SsAI2+KXdQ1ErQfvCsdZ+fOWB6x631E9tw6HXfQ8TGOgnf6ZIdHaZ9PtnyKKq/jEfNZoGjFHKiqnDTB23dcUx/zh1m1vLNWk2PTX2BY259BoN6XQTx7M7+qZcuTJhwfvPU+XYPUc/0c/JgNpgWShvmJrZek+b95U+SQ9O3b1hzVO+lcKLPoLVW7rq1oI655ZZbbrnlllsVq9/VNWoQAI/o7wAAAABJRU5ErkJggg==) no-repeat 0 0px;
            background-size: 36%;
        }

        .right {
            display: inline-block;
            font-size: 14px;
        }

        .split {
            display: inline-block;
            vertical-align: middle;
            height: 12px;
            width: 1px;
            margin: 0 11px 2px 11px;
            background-color: #A3B9EF;
        }

        .main-box {
            position: relative;
            /* 使用flex布局解决图片缩放问题 */
            display: flex;
            height: 80%;
            width: 100%;
            align-items: center;
        }

        .main-left {
            padding: 0 19% 5% 19%;
        }

        .main-box .main-title {
            font-size: 58px;
        }

        .main-left .login span:hover {
            color: #1890FF;
        }

        .main-left .login span {
            width: 180px;
            font-size: 18px;
            color: #1851DF;
        }

        .main-left .login {
            display: inline-block;
            height: 56px;
            width: 320px;
            border-radius: 100px;
            background-color: #FFFFFF;
        }

        .main-left .sub-title {
            margin: 22px 0 52px 0;
            font-size: 20px;
            color: #d2ddf6;
        }

        .main-left .mi-logo {
            display: inline-block;
            margin: 8px 7px 12px 11px;
            vertical-align: middle;
            height: 24px;
            width: 24px;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMNSURBVHgB7ZqxctNAEIb/UzyTOJVDSpixKKiTktKuwww8AZgGAg32E8R5AicN0MXwAoYXwCpT2jUFygyUgGkCYUiO3bNkS7Isy4oU6TL5ZqSz7mR7V7t3t3crgSWRTVTwB9u4oGMFVaoyIeiQVD/GXPATdqAc4BwnMKhcw0AcYIQlEHFuUkKfokECP6TLbToqyA6LHsY7LsXbiZJziVRACf4Xr+gHm8hW6DDYEl3678MoReYqIHdRo9YjLHaJrLHpaIk3+BDWaIRVypfYI+H7yF94xqSjp2QKYcYC6kaJNoqIQFu8xr6/yoN8gUdU9FBkJOrUJyz3cqIA+bxZILeJYoRV3HWHW28fYB8zUXx4Hmq6F8oCztP/An2YWMG1QA16UcEZTaxwXUjgCfSDowIINdue4Sd0ZBUbhgrMdIVkLzlRZTTrFAbdXlLPH/a4/E2j3WmMAPNezX/92Vr4FXJ9UsCIMXTWadTa2UNiWAEW6JiCzGFISMPCt/r+uk59sRICWwafkDVswS2a5J/3LvcgglxwH7hqdtqz7pIUgWoJSWff4250+6YJ3DLHZZAHZIWOhRSolJCU90/j3Xe/ATw+8tfdSW/gYxcykSVsqU+H/roy9YnNKlLATG4BL9xJy4EV53d7+vnrYPY75Q06neCypKNA2DDrHQa9yriU01liX/0olDI3CuTNjQJ5wwrY0Bf7Wlhgqd3ggmHr7kJkAYlf0BWJoZDPaJNoBZ3IG93Q2IWXid74JtjOBFdTwTXAt4F/qbmoPZyWcLbR+9AR2ic1OK0DXSHZDWeT1IJ+WNOtxXN8hG6M82hOKLFOuSj95gOLT0oB5UaUTIMuCHTdxN80lFjDAfSwgk37QZM000QBpzPH3GrIEYl9b9rVF8ypVKb0J9EKxVj4rrcqNE9Mk1ubWlLcA0yBsfDtYHVUorvhKGEiX5RrL5XoZpSpaKp2x9scGCl35lzYHOGZeC977Cor1JxUVA3ZYqmJleamOG+uxFLAi+91G0NlN93teTNQzsN2ypH6LKj8h2HS123+Ax5k2JhlsVzoAAAAAElFTkSuQmCC) no-repeat;
            background-size: contain;
        }

        .login div {
            width: 200px;
            margin: 8px auto;
        }

        .main-right {
            width: 90%;
        }

        .main-right img {
            width: 95%;
        }

        .footer {
            height: 114px;
            text-align: center;
            position: fixed;
            width: 100%;
            bottom: 0px;
        }

        .lang,
        .links,
        .rights {
            font-size: 12px;
        }

        .lang {
            margin-bottom: 24px;
        }

        .links {
            margin-bottom: 4px;
        }

        .lang a,
        .lang span {
            color: rgba(255, 255, 255, 0.8);
            padding: 0 1px 0 1px;
        }

        .links a,
        .rights {
            padding: 0 1px 0 1px;
            color: #9ab3ea;
        }

        .lang .earth {
            width: 15px;
            height: 15px;
            vertical-align: middle;
            margin-right: 4px;
        }
    </style>
</head>

<body class="mi_bg">
    <div class="banner">
        <!-- 此处最好为button -->
        <div class="cloud-logo">小米云服务</div>
        <div class="right">
            <a href="https://i.mi.com/static2?filename=MicloudWebStatic/res/home/mi-lab.htm&locale=zh_CN#3" target="_blank">客户端</a>
            <div class="split"></div>
            <a href="https://i.mi.com/guide/zh-CN/welcome" target="_blank">了解云服务</a>
        </div>
    </div>
    <div class="main-box">
        <div class="main-left">
            <div class="main-title">小米云服务</div>
            <div class="sub-title">随时随地，管理你的所有设备和数据</div>
            <a class="login" href="https://account.xiaomi.com" target="_blank">
                <div>
                    <div class="mi-logo"></div>
                    <span>使用小米帐号登录</span>
                </div>
            </a>
        </div>
        <div class="main-right">
            <img src="https://land.xiaomi.net/mcfe/micloud-web-home/cover-1.50ca28f8.png" alt="小米云服务" class="main-photo">
        </div>
    </div>
    <div class="footer">
        <div class="lang">
            <svg t="1632543857692" class="earth" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1443" width="200" height="200"><path d="M1024 512c0-281.6-230.4-512-512-512S0 230.4 0 512c0 260.288 196.288 477.888 448 507.712 12.8 4.288 29.888 4.288 51.2 4.288h17.088c281.6-4.288 507.712-230.4 507.712-512z m-72.512 8.512c0-25.6-4.288-51.2-8.576-76.8v-25.6c4.288 29.888 8.576 59.776 8.576 93.888v8.512zM72.512 512c0-29.888 4.288-59.712 8.576-89.6 17.024 21.312 64 21.312 72.512-8.512 21.312 12.8 46.912 12.8 46.912 38.4 0 76.8 4.288 157.824 72.576 157.824 0 0 29.824 12.8 46.912 59.776 4.288 17.024 46.912 0 46.912 0 46.976 0 0 21.312 0 72.512 0 46.912 110.976 119.488 110.976 119.488 0 29.824 4.224 55.424 8.512 76.8-21.312 0-42.688 4.224-55.488 8.512-204.8-38.4-358.4-217.6-358.4-435.2z m546.176 426.688c0-12.8-12.8-17.088-29.888-12.8 12.8-59.776 21.312-98.176 51.2-123.776 42.688-38.4 4.288-81.024-29.888-76.8-25.6 4.288-8.512-34.112-34.112-34.112s-55.488-46.912-85.312-64c-17.088-8.512-34.176-29.888-64-34.112-25.6 0-59.776 21.312-59.776 4.224 0-55.424-4.224-89.6-8.512-106.624 0-12.8-8.512-4.288 25.6-4.288 17.088 0 8.512-34.112 25.6-38.4 17.088 0 59.712 17.088 68.288 8.512C486.4 448 550.4 622.912 550.4 486.4c0-17.088-8.512-42.688 0-59.712 34.112-59.776 64-110.976 59.712-115.2 0-4.288-34.112-8.576-59.712 0-8.512 4.224 4.288 17.024-8.512 21.312-46.976 12.8-89.6-12.8-72.576-34.112C486.4 277.312 537.6 290.112 541.888 243.2c8.512-25.6 12.8-55.488 12.8-76.8 64 8.512 55.424-81.088-38.4-89.6 187.712 0 349.824 123.712 409.6 294.4-4.288-4.288-8.576-4.288-8.576-4.288C887.488 294.4 819.2 345.6 844.8 409.6c-123.712 98.112-93.888 162.112-51.2 200.512 21.312 21.376 42.688 51.2 55.488 72.576-17.088 42.624 55.424 25.6 85.312-46.976a443.84 443.84 0 0 1-315.712 302.976z" p-id="1444" fill="#e6e6e6"></path></svg>
            <span>语言：</span>
            <a class="zh-cn" href="https://i.mi.com/?_locale=zh_CN">中文</a>
            <a class="en" href="https://i.mi.com/?_locale=en">English</a>
            <a class="more-lang" href="#">更多语言</a>
        </div>
        <div class="links">
            <a href="https://i.mi.com/find/device/activationlock?_locale=zh_CN">手机申诉解锁</a>
            <div class="split"></div>
            <a href="https://privacy.mi.com/xiaomicloud/zh_CN">隐私政策</a>
            <div class="split"></div>
            <a href="https://i.mi.com/static?filename=res/useragreement/ToS.html" target="_blank">用户协议</a>
            <div class="split"></div>
            <a href="https://www.mi.com/" target="_blank">小米网</a>
        </div>
        <div class="rights">
            ©2021 MIUI . All rights reserved 京ICP备114514号 京公网安备1145141919810
        </div>
    </div>
</body>

</html>
本作品采用 WTFPL 进行许可,所以,请TM随意复制转载吧(无慈悲)
点赞
最后编辑：2021年10月8日

发表回复

电子邮件地址不会被公开。必填项已用 * 标注