正文
在B站看到一个HTML5作品，是利用纯代码来画出iPhone的渲染图，觉得挺有意思的，就发出来给小伙伴们也参考参考，下面先来张效果图
差不多快60行的代码，也不到60行，纯代码写的，没有用一张图片素材，包括电池图标和信号图标也是，本来顶部状态栏中间是一个小锁的图标，嫌太费事，就用一个心的符号代替了，也是刚学习HTML不久，很多语法比较繁琐，如果精简一点，估计能缩小10%左右，下面放出代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iPhone6演示 | 夜色静好</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>