Skip to content

Instantly share code, notes, and snippets.

@sorcererxw

sorcererxw/screenshot.html

Last active Aug 11, 2018
Embed
What would you like to do?
HTML+CSS 绘制手机主屏幕
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.