<!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 xiong_li_bing@qq.com</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>
纯CSS写了个魅族 M8 手机界面,布布扣,bubuko.com
原文：http://www.cnblogs.com/youtianxia/p/3842321.html