在 B 站看到一个 HTML5 作品，是利用纯代码来画出 iPhone 的渲染图，觉得挺有意思的，就发出来给小伙伴们也参考参考，下面先来张效果图：
效果图差不多快 60 行的代码，也不到 60 行，纯代码写的，没有用一张图片素材，包括电池图标和信号图标也是。本来顶部状态栏中间是一个小锁的图标，嫌太费事，就用一个心的符号代替了。也是刚学习 HTML 不久，很多语法比较繁琐，如果精简一点，估计能缩小 10% 左右。下面放出代码：
html 代码:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iPhone 6 演示 | 夜色静好</title>
</head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #000;
}
#iphone {
width: 375px;
height: 750px;
background-color: #C2CDD3;
margin: 100px auto;
border-radius: 50px;
border: 7px solid #F1C8C4;
}
#ganying {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
margin: 15px auto;
}
#sxt {
width: 13px;
height: 13px;
border-radius: 50%;
background-color: #000;
margin-left: 110px;
margin-top: -5px;
float: left;
}
#tingtong {
width: 100px;
height: 10px;
background-color: #000;
margin: 0 auto;
border-radius: 5px;
margin-top: -5px;
}
#pingmu {
width: 365px;
height: 610px;
background-color: #9E855D;
margin: 20px auto;
}
#btn {
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid #9A7371;
margin: -5px auto;
}
#tm1 {
color: #fff;
font-size: 60px;
float: left;
}
#time {
margin-left: 25px;
float: left;
margin-top: 60px;
}
#tm2 {
color: #fff;
margin-left: 17px;
font-size: 20px;
}
#tm3 {
color: #fff;
margin-left: 42px;
font-size: 10px;
}
#ztl {
float: left;
margin-left: 3px;
margin-top: 5px;
}
#xh1, #xh2, #xh3, #xh4 {
width: 7px;
height: 7px;
border: 1px solid #fff;
border-radius: 50%;
display: block;
float: left;
margin-right: 3px;
}
#xh1, #xh2, #xh3 {
background-color: #fff;
}
#yhs {
margin-top: -3px;
float: left;
display: block;
color: #fff;
margin-left: 10px;
}
#dianliang {
width: 25px;
height: 10px;
border: 1px solid #fff;
float: right;
margin-top: 3px;
}
#dl2 {
width: 3px;
height: 5px;
margin-top: 6px;
display: block;
float: right;
background-color: #fff;
margin-right: 7px;
}
#dianliang:before {
width: 12px;
height: 10px;
background: #fff;
content: "";
display: block;
}
#dl3 {
color: #fff;
display: block;
float: right;
margin-right: 5px;
}
#suo {
color: #fff;
font-size: 15px;
margin-left: -80px;
}
</style>
<body>
<div id="iphone">
<div id="ganying"></div>
<div id="sxt"></div>
<div id="tingtong"></div>
<div id="pingmu">
<div id="ztl">
<span id="xh1"></span>
<span id="xh2"></span>
<span id="xh3"></span>
<span id="xh4"></span>
<span id="yhs">4G</span>
</div>
<span id="dl2"></span>
<div id="dianliang"></div>
<span id="dl3">49%</span>
<span id="suo">♥</span>
<div id="time">
<span id="tm1">15:29</span><br>
<span id="tm2">6 月 4 日 星期日</span><br>
<span id="tm3">丁酉年五月初十</span>
</div>
</div>
<div id="btn"></div>
</div>
</body>
</html>
