Bilibiliで、HTML5の作品を見かけました。純粋なコードだけでiPhoneのレンダリング画像を描いたもので、なかなか面白いと思ったので、みなさんの参考にもなればと思い、公開します。まずは完成イメージをご覧ください：
コードは60行近くありますが、60行にも満たず、すべて純粋なコードで書かれており、画像素材は一切使っていません。バッテリーアイコンや電波アイコンも同様です。本来、上部のステータスバー中央には小さな鍵のアイコンがあるのですが、手間がかかるので、ハートの記号で代用しました。HTMLを学び始めてまだ日が浅く、文法もかなり冗長なので、少し簡略化すれば、おそらく10％ほど縮小できると思います。以下にコードを掲載します：
<!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>