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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

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

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

CSS3

描述

之前看见有人用css写了个机器猫我也来练练手写了个M8 ，请使用Firefox3.x Chrome2.x-5.x浏览使用IE的飘过~