HTML+CSS 绘制手机主屏幕

screenshot.html

<div>
    <style>
        .ss_root {
            border-radius: 8px;
            font-family: serif;
            height: auto;
            width: 411px;
            background:url(https://images.unsplash.com/photo-1454804422997-4137c1858692);
            display: flex;
            flex-direction: column;
        }
        .ss_status_bar {
            height: 25px;
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            padding-left: 8px;
            padding-right: 8px;
            box-sizing: border-box;
        }
        .ss_status_bar>img,image {
            color: white;
            fill: white;
            height: 16px;
            border-radius: 0px;
            box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
        }
        .ss_status_bar>span {
            font-size: 16px;
            color: white;
        }
        .ss_content {
            padding: 8px;
        }
        .ss_line {
            display: flex;
            flex-direction: row;
            height: 120px;
            align-items: center;
            justify-content: center;
        }
        .ss_clock {
            font-size: 48px;
            color: white;
        }
        .ss_search_bar {
            height: 48px;
            background-color: rgba(255, 255, 255, 0.85);
            width: 100%;
            margin-left: 8px;
            margin-right: 8px;
            border-radius: 24px;
            box-shadow: 0px 5px 50px -15px rgba(0, 0, 0, 0.60);
            display: flex;
            flex-direction: row;
            align-items: center;
            padding-left: 16px;
            padding-right: 16px;
            box-sizing: border-box;
        }
        .ss_search_bar>img {
            height: 24px;
            width: 24px;
        }
        .ss_indictor {
            width: 100%;
            height: 24px;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
       .ss_indictor>*{
            max-height: 100%;
        }
        .ss_dock {
            height: 80px;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.2);
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .icon_container {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .icon_container>img {
            background-color: white;
            box-sizing: border-box;
            height: 48px;
            width: 48px;
            border-radius: 20px;
            box-shadow: 0px 5px 50px -15px rgba(0, 0, 0, 0.60);
        }
        .icon_container>span {
            color: white;
            font-size: 10px;
            margin-top: 8px;
            box-shadow: 0px 5px 50px -15px rgba(0, 0, 0, 0.60);
        }
    </style>
    <div class="ss_root">
        <div class="ss_status_bar">
            <span style="margin-left:4px">6:00</span>
            <image style="margin-left:4px" src="https://material.io/tools/icons/static/icons/round-battery_90-24px.svg" />
            <image src="https://material.io/tools/icons/static/icons/round-signal_cellular_4_bar-24px.svg" />
            <image src="https://material.io/tools/icons/static/icons/round-network_wifi-24px.svg" />
            <image style="margin-right: 4px;" src="https://material.io/tools/icons/static/icons/round-vpn_key-24px.svg"/>
        </div>
        <div class="ss_content">
            <div class="ss_line">
                    <div class="ss_clock">
                        6:00
                    </div>
            </div>
            <div class="ss_line">
                    <div class="ss_search_bar">
                        <img src="https://secure.gravatar.com/avatar/24ba30616d2a20673f54c2aee36d159e.jpg" />
                    </div>
            </div>
            <div class="ss_line"></div>
            <div class="ss_line"></div>
            <div class="ss_line">
                <div class="icon_container">
                    <img src="https://slack-files2.s3-us-west-2.amazonaws.com/avatars/2016-03-21/28174051188_215180e097a3dd513d6d_512.png" />
                    <span>Todoist</span>
                </div>
                <div class="icon_container">
                    <img src="https://lh5.ggpht.com/tq3WqEUxtRyBn-d_0t3j6WKNHuJDrmLq-FE3GAYrsAMQFIaS7FIgRLfzzql2SvfvLqto" />
                    <span>Photos</span>
                </div>
                <div class="icon_container">
                    <img src="https://d2wk81qbuk09ji.cloudfront.net/6169/public/imagegallery/original/GooglePlay_512_512_1512755206.png" />
                    <span>Play Store</span>
                </div>
                <div class="icon_container">
                    <img src="https://lh3.googleusercontent.com/Zmol9WVk6mjWE38P6wc3Aaz9mQn-VFhviKllLP4kiplfW4xIEjgYmKUalZcFsOOnDQ" />
                    <span>Telegram X</span>
                </div>
                <div class="icon_container">
                    <img class="fullicon" src="https://lh3.ggpht.com/zC5Q4atR1JytzagSPIPAg-z4uItJGsTVjZHvf9nSeGdwrwnuPPW_OqMk6FAI3DJvzQ" />
                    <span>WeChat</span>
                </div>
            </div>
        </div>
        <div class="ss_indictor">
        </div>
        <div class="ss_dock">
            <div class="icon_container">
                    <img src="https://i2.wp.com/onhax.me/wp-content/uploads/2018/03/unnamed-10.png" />
            </div>
            <div class="icon_container">
                    <img src="https://lh3.googleusercontent.com/nYhPnY2I-e9rpqnid9u9aAODz4C04OycEGxqHG5vxFnA35OGmLMrrUmhM9eaHKJ7liB-" />
            </div>
            <div class="icon_container">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Google_Inbox_by_Gmail_logo.png" />
            </div>
            <div class="icon_container">
                    <img src="https://i0.wp.com/androidpicks.com/wp-content/uploads/2017/01/Google-Messenger-Icon-New-Android-Picks.png" />
            </div>
            <div class="icon_container">
                    <img src="https://i.pinimg.com/originals/85/19/d2/8519d2131098753aedc02e1e5fe2bafa.png" />
            </div>
        </div>
    </div>
</div>