纯CSS写了个魅族 M8 手机界面

浏览数：22 / 时间：2015年06月11日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS MEIZU M8 by [email protected]</title>
<style>
body {
background-color:#fff;
font-family:‘微软雅黑‘;    
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
div#m8 {
width:266px;
height:482px;
margin:auto;    
border:1px solid #fff;
-moz-border-radius:38px;
-khtml-border-radius:38px;
-webkit-border-radius:38px;
border-radius:38px;
background-color:#2E2F31;
}
div.sideline {
width:246px;
height:466px;    
margin:6px auto;
border:2px solid #4F525B;
-moz-border-radius:30px;
-khtml-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
background-color:#131418;
}
span.ring {
width:8px;
height:8px;
display:block;
overflow:hidden;
float:left;
margin:auto 4px;
border:1px solid #060709;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
background-color:#838584;
}
span.ring em {
width:6px;
height:6px;
display:block;
margin-top:2px;
border:1px solid #060709;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#0F1012;    
}
div#receiver {
padding:30px 0 20px 97px;
}
div#screen {
width:88%;
height:336px;
overflow:hidden;
margin:auto;
border:3px solid #1B1C20;
background-color:#fff;
text-align:center;
position:relative;
background:url(http://www.itxueren.com/desktopbg.jpg) no-repeat;
}
div#mike {
padding-top:12px;
}
div.m {
width:66px;
height:35px;
display:block;
margin:auto;
border:1px solid #040509;
-moz-border-radius:30px;
-khtml-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
cursor:pointer;
}
div.m span {
width:26px;
height:13px;
display:block;
margin:10px auto;
border:1px solid #565656;
border-top:none;
border-right:none;
background-color:#4F5150;
position:relative;
}
div.m span b,div.m span em{
width:2px;
height:12px;
display:block;
background-color:#020403;
position:absolute;
bottom:-1px;
}
div.m span b{
margin-left:9px;
}
div.m span em{
margin-left:18px;
}
div#screen .top {
color:#fff;
background-color:#000;
opacity:.4;
font-size:10px;
position:relative;
}
div#screen .bottom {
width:100%;
height:40px;
line-height:40px;
border-top:1px solid #ccc;
background-color:#000;
background:-moz-linear-gradient(center top , #ccc, #000) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear,0% 0%, 0% 100%, from(#ccc), to(#000));
-webkit-box-shadow:0 -2px 4px #000;
-moz-box-shadow:0 -2px 4px #000;    
opacity:.5;
position:absolute;
bottom:0;
color:#000;
font-size:20px;
text-shadow:2px 2px #32312B;
text-transform:uppercase;    
}
div#time {
width:87%;
height:45px;    
margin:auto 12px;
border:1px solid #000;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#000;
opacity:.8;
position:absolute;
bottom:55px;
color:#fff;
}
div#time .t {
width:120px;
display:block;
float:left;
font-size:33px;
font-family:Verdana, Geneva, sans-serif;
text-align:center;
padding-top:1px;
}
div#time .d,div#time .q {
width:60px;
display:block;    
font-size:10px;
float:left;
text-align:left;
padding-left:2px;
}
div#time .d{
padding-top:5px;
}
</style>
</head>
<body>
<div id="m8">
<div class="sideline">
<div id="receiver" class="clearfix">
<span class="ring"><em></em></span>
<span class="ring"><em></em></span>
<span class="ring"><em></em></span>
</div>
<div id="screen">
<div class="top">中国移动</div>
<div id="time">
<span class="t">01:25</span>
<span class="d">06月06日</span>
<span class="q">星期日</span>
</div>

<div class="bottom">css魅族M8 by 若寒</div>
</div>
<div id="mike" class="clearfix">
<div class="m">
<span><b></b><em></em></span>
</div>
</div>
</div>
</div>
</body>
</html>