正文

在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">&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>
Last modification:December 3rd, 2019 at 11:13 pm
如果觉得我的文章对你有用,请随意赞赏