<!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>CSS3--小米手机CSS3版本</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
/*小米手机*/
.box { width:320px; height:550px; margin:200px auto; background:#000000; border-radius:18px; position:relative;}
.box:after { content:''; position:absolute; width:310px; height:540px; border:#3e3e3e solid 4px; border-radius:18px; left:1px; top:1px;}
.pingmu { width:280px; height:400px; background:url(http://dz.ycss.com/images/mi_bg.jpg) 0 0 no-repeat; position:relative; top:70px; left:20px;}
.pingmu:before { content:''; position:absolute; border-top:380px solid #dadada; border-right:260px solid transparent; width:0; height:0; opacity:0.2; top:-86px; left:-20px;}
.pingmu:after { content:''; position:absolute; left:103px; top:-55px; width:75px; height:10px; border-radius:20px; background:#dadada; border-shadow:0 0 5px #dadada;}
.pingmu ul { margin:0; padding:0; list-style:none; position:absolute; z-index:500;}
.pingmu ul li { width:70px; height:50px; background: #000000; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; float:left; box-shadow:1px 2px 6px #777777; margin:10px 0 0 15px; display:inline; cursor:pointer; line-height:50px; text-align:center; font-weight:bold; border:#e8e8e8 solid 1px; color:#fff; font-size:24px;}
.pingmu ul li:hover { -moz-transform: scale(1.15);/* for Firefox */}
.pingmu ul li.quyu { width:235px; height:55px; background:#000000; margin-top:18px; overflow:hidden; padding:0 6px;}
.pingmu ul li.quyu:hover,.pingmu ul li.end_tel:hover,.pingmu ul li.nows:hover {-moz-transform: scale(1);/* for Firefox */}
.pingmu ul li.end_tel:hover { background:#cf2626;}
.pingmu ul li.hujiao { background:#2E8E0D;}
.pingmu ul#loading { display:none; z-index:499;}
.pingmu ul li.nows { background:none; color:#000000; text-shadow:1px 0 1px #fff; border:none; width:235px; text-align:center; box-shadow:none;}
.pingmu ul li.end_tel { width:235px; height:44px; background:#BD3336; margin-top:200px; overflow:hidden; padding:0 6px; border:#444 solid 3px; line-height:44px;box-shadow:1px 2px 6px #666;}
.mi_t { width:15px; height:15px; border-radius: 0 5px 0 0; background:#e5e5e5; position:relative; top:53px; left:20px;}
.mi_t:after { width:3px; height:9px; background:#e5e5e5; border-radius: 0 4px 0 0; border:#000 3px solid; border-bottom:none; position:absolute; bottom:0; left:3px; content: '';}
.mi_t:before { width:3px; height:15px; background:#e5e5e5; position:absolute; right:-6px; content: '';}
.bot_box { position:absolute; bottom:45px; left:20px; width:320px;}
.daohang,.daohang:before,.daohang:after { width:30px; height:2px; background:#a9a9a9;}
.daohang:before { content:''; top:9px; position:absolute;}
.daohang:after { content:''; position:absolute; top:18px;}
.home { width:30px; height:11px; border:#a9a9a9 2px solid; border-top:none; position:absolute; left:120px; top:6px;}
.home:before { width:18px; height:2px; -moz-transform:rotate(-20deg); content:''; position:absolute; background:#a9a9a9; top:-4px; left:-1px}
.home:after { content:''; position:absolute; border:#a9a9a9 2px solid; width:12px; height:6px; background:#000; border-bottom:none; top:5px; left:7px;}
.jiao2 { width:18px; height:2px; -moz-transform:rotate(20deg); position:absolute; background:#a9a9a9; top:2px; left:137px;}
.fanhui { height:17px; width:40px; border:#a9a9a9 2px solid; border-radius:5px; position:absolute; right:42px; top:4px; border-left:none; border-bottom:none; border-top:none; }
.fanhui:before { height:2px; width:30px; background:#a9a9a9; content:''; position:absolute; right:1px; top:0px;}
.fanhui:after { height:2px; width:30px; background:#a9a9a9; content:''; position:absolute; right:1px; top:15px;}
.jiao { height:2px; width:12px; background:#a9a9a9; position:absolute; right:63px; top:2px; -moz-transform: rotate(-24deg);}
</style>
</head>
<body>
<div class="box">
<div class="mi_t"></div>
<div class="pingmu">
<div id="tel_box">
<ul id="tel">
<li class="quyu" id="quyu"></li>
<li class="num">1</li>
<li class="num">2</li>
<li class="num">3</li>
<li class="num">4</li>
<li class="num">5</li>
<li class="num">6</li>
<li class="num">7</li>
<li class="num">8</li>
<li class="num">9</li>
<li class="num">*</li>
<li class="num">0</li>
<li class="num">#</li>
<li> </li>
<li class="hujiao">呼叫</li>
<li class="del">×</li>
</ul>
<ul id="loading">
<li class="quyu" id="tel_hujiao"></li>
<li class="nows">正在呼叫中...</li>
<li class="end_tel">结束通话</li>
</ul>
</div>
</div>
<div class="bot_box">
<div class="daohang"></div>
<div class="home"></div>
<div class="jiao2"></div>
<div class="fanhui"></div>
<div class="jiao"></div>
</div>
</div>
<script type="text/javascript">
String.prototype.len = function() // 给string增加个len ()方法，计算string的字节数
{
return this.replace(/[^\x00-\xff]/g, "xx").length;
}
$(function(){
$("#tel li.num").click(function(){
var num = $(this).text();
var haoma = $("#quyu").text()+num;
$("#quyu").text(haoma);
var tel_num = $("#quyu").text().len();
if(tel_num>17){
$("#quyu").css("font-size","13px");
}
});
$(".del").click(function(){
var tel = $("#quyu").text();
var tel_num = tel.len();
var tel=tel.substring(0,tel_num-1);
$("#quyu").text(tel);
});
$(".hujiao").click(function(){
var tel = $("#quyu").text();
var tel_num = tel.len();
if(!tel_num){
//
}else{
var tel_num = $("#quyu").text().len();
if(tel_num>17){
$("#tel_hujiao").css("font-size","13px");
}
$("#tel").fadeOut("slow");
$("#loading").fadeIn("slow");
$("#tel_hujiao").text(tel);
}
});
$(".end_tel").click(function(){
$("#loading").fadeOut("slow");
$("#tel").fadeIn("slow");
});
//结束闭合
})
</script>
</body>
</html>
