首页 > 代码库 > 纯CSS写了个魅族 M8 手机界面

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

2024-07-11 23:59:24   215人阅读

<!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>

 


联系
我们