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>