在 B 站看到一个 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">&hearts;</span>
                <div id="time">
                    <span id="tm1">15:29</span><br>
                    <span id="tm2">6 月 4 日&nbsp;星期日</span><br>
                    <span id="tm3">丁酉年五月初十</span>
                </div>
            </div>
            <div id="btn"></div>
        </div>
    </body>
</html>
如果觉得我的文章对你有用,请随意赞赏