前端画图之iphoneSE主屏

今天逛园子，无意间看到一个用div+css画的Macbook Air的博客，瞬间想到很久之前我也做过类似的事，
而且，当时写完之后，真的是成就感爆棚啊！我去开源中国上翻到了我当时贴的源码，当时是在手机上
用JSAnywhere这款软件一字一字敲出来的，你可以想象一下用SE敲代码的那个画面。
现在回过头来看自己当初的代码，发现我的手机壁纸居然一直都没换过，233333~~
这里贴上全部的代码，有兴趣的同学可以复制一下，拿到本地跑跑看，上两张效果图先：
<!DOCTYPE html >
<html>
<head>
    <title>iPhone主界面</title>
    <!--引入jQuery库-->
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <!--Bootstrap插件库-->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--引入Bootstrap
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">-->
    <!--引入字体图标库-->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >
    <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
    <style>
        *{margin:0;padding:0;}
        .mask{640px;height:1136px;position:absolute;top:0;}
        .iphone-home{640px;height:1136px;position:relative;background:url(https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b2de9c82d158ccbf46b1f8891ed8bc3eb1354177.jpg) repeat;background-size:110% 100%;}
        .iphone-header{text-align:center;padding-top:3px;font-size:24px;color:white;height:4%;100%;}
        .left{float:left;35%;text-align:left;}
        .right{float:right;35%;text-align:right;}
        .center,.text{font-weight:bold;}
        .row{100%;height:14%;padding:0 auto;}
        .row-col{display:inline-block;height:84%;21%;border-radius:18%;margin:2%;}
        .text-row{100%;}
        .text{display:inline-block;25%;text-align:center;font-size:24px;color:white;}
        .footerbox{margin-top:48%;}
        .footer{100%;height:19%;margin-top:48%;}
        .thefour{font-size:100px;margin-top:12%;}
        .sev{font-size:20px;margin-top:12%;}
        .footerfour,.inner{text-align:center;}
        .footermusic{margin-left:-17%;}
        .thephone{background-color:#00cc66;color:white;}
        .thewechat{background-color:#62b900;color:white;}
        .thehtml5{background-color:#cc0033;color:white;}
        .themusic{background-color:#FFFFF0;color:#33ccff;}
        .inner{height:23.3%;23.3%;border-radius:18%;margin:5%;float:left;}
        .wrap{height:90%;90%;margin:5%;}
        .jsaw{background-color:#6699ff;color:white;}
        .address-book,.commenting{background-color:#62b900;color:white;}
        .compass{background:white;color:#3399ff;}
        .bg{background-color:#EAEAEA;opacity:.6;}
        .popup{height:1136px;640px;position:absolute;top:0;z-index:2;display:none;}
        .theone{height:53.5%;95%;background-color:#EAEAEA;opacity:0;border-radius:18%;margin-top:40%;margin-left:2.5%;}
        .theonecontent{height:53.5%;95%;border-radius:18%;margin-top:40%;margin-left:2.5%;opacity:0;}
        .theonecontent{position:absolute;top:0;z-index:3;}
        .popup .theonecontent .wrap .inner span{font-size:90px;margin-top:9%;}
    </style>
    <meta charset="UTF-8">
</head>

<body>
    <div class="father">
        <div class="iphone-home">
            <div class="iphone-header">
                <p class="left">&nbsp;</p>
                <p class="right">&nbsp;</p>
                <p>&nbsp;</p>
            </div>
            <div class="row">
        <div class="row-col bg"></div><!--
   --><div class="row-col bg"></div><!--
   --><div class="row-col bg"></div><!--
--><div class="row-col bg"></div>
</div>
<div class="text-row">
               <span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
      --><span class="text">&nbsp;</span>
  </div>
  <div class="row">
        <div class="row-col bg"></div><!--
   --><div class="row-col bg"></div><!--
   --><div class="row-col bg"></div><!--
--><div class="row-col bg"></div>
</div>
<div class="text-row">
               <span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
      --><span class="text">&nbsp;</span>
  </div>
  <div class="row">
        <div class="row-col bg"></div><!--
   --><div class="row-col bg"></div><!--
   --><div class="row-col bg"></div><!--
--><div class="row-col bg"></div>
</div>
<div class="text-row">
               <span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
      --><span class="text">&nbsp;</span>
  </div>

  <div class="footer bg">
  </div>
</div><!--iphonehome-->



<!--遮罩层-->
<div class="mask">
    <div class="iphone-header">
        <p class="left">&nbsp;-<span class="signal">78</span> 中国移动 &nbsp;<span class="fa fa-wifi "></span></p>
        <p class="right"><span class="fa fa-bluetooth"></span> <span class="fa fa-clock-o"></span> 100% <span class="fa fa-battery-full"></span>&nbsp;&nbsp;</p>
        <p class="center">time</p>
    </div>

    <div class="row">
        <div class="row-col"><div class="wrap">
             <div class="inner thewechat"><span class="fa fa-wechat sev"></span></div><!--
        --><div class="inner jsaw"><span class="sev">.js</span></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>

         </div><!--
     --><div class="row-col"><div class="wrap">
             <div class="inner address-book"><span class="sev fa fa-address-book-o"></span></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div><!--
--><div class="row-col"><div class="wrap">
             <div class="inner commenting"><span class="sev fa fa-commenting"></span></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div><!--
--><div class="row-col"><div class="wrap">
             <div class="inner compass"><span class="sev fa fa-compass"></span></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div>
</div>
<div class="text-row">
               <span class="text">找</span><!--
          --><span class="text">不</span><!--
          --><span class="text">到</span><!--
      --><span class="text">那</span>
  </div>
  <div class="row">
      <div class="row-col"><div class="wrap">
             <div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>

         </div><!--
     --><div class="row-col"><div class="wrap">
             <div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div><!--
--><div class="row-col"><div class="wrap">
             <div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div><!--
--><div class="row-col"><div class="wrap">
             <div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div>
</div>
<div class="text-row">
               <span class="text">么</span><!--
          --><span class="text">多</span><!--
          --><span class="text">好</span><!--
      --><span class="text">看</span>
  </div>

  <div class="row">
      <div class="row-col"><div class="wrap">
             <div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>

         </div><!--
     --><div class="row-col"><div class="wrap">
             <div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div><!--
--><div class="row-col"><div class="wrap">
             <div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div><!--
--><div class="row-col"><div class="wrap">
             <div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div>
</div>
</div>
<div class="text-row">
               <span class="text">的</span><!--
          --><span class="text">图</span><!--
          --><span class="text">标</span><!--
      --><span class="text">啊</span>
  </div>
  <div class="row footerbox">
        <div class="row-col footerfour thephone"><span class="fa fa-phone thefour"></span> </div><!--
        --><div class="row-col footerfour themusic"><span class="fa fa-music thefour footermusic"></span> </div><!--
        --><div class="row-col footerfour thehtml5"><span class="fa fa-html5 thefour"></span> </div><!--
    --><div class="row-col footerfour thewechat"><span class="fa fa-wechat thefour "></span> </div>
</div>
<div class="text-row footertext">
               <span class="text">电话</span><!--
          --><span class="text">音乐</span><!--
          --><span class="text">html5</span><!--
      --><span class="text">微信</span>
  </div>
</div><!--mask-->
</div>

<div class="popup">
    <div class="theone">
    </div>

    <div class="theonecontent">
        <!--动态添加-->
        <div class="wrap popup-wrap">
             <div class="inner thewechat"><span class="fa fa-wechat sev"></span></div><!--
        --><div class="inner jsaw"><span class="sev">.js</span></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
        --><div class="inner"></div><!--
    --><div class="inner"></div>
</div><!--wrap-->
</div><!--theonecontent-->
</div><!--popup-->

<script type="text/javascript">
    <!--中间的时间显示-->
    function clock(){
        var mydate =new Date();
        var myhours=mydate.getHours();
        var myminutes=mydate.getMinutes();
        if(myhours<10)myhours="0"+myhours;
        if(myminutes<10)myminutes="0"+myminutes;
        $(".center").text(myhours+":"+myminutes);
    }
    var ck=setInterval(clock, 100);

    <!--信号显示，采用80-120的随机数-->
    function signal(){
        var rdm=parseInt(Math.random()*40+80);
        $(".signal").text(rdm);
    }
    var sl=setInterval(signal,5000);

    <!--单击小方块弹出应用框-->
    var wraps=$(".wrap");
    for(var i=0;i<12;i++){
        $(wraps[i]).on("click",function(){
            <!--动态获取应用框内容-->
            var a=$(this).html();
            $(".popup-wrap").html(a);
            $(".father").css('-webkit-filter','blur(15px)');
            $(".popup").css('display','block');

            <!--应用框的淡入效果-->
            var b=0;
            var c=0;
            function theoneon(){
                b=b+0.2;
                $(".theone").css('opacity',b);
                if(b>0.6){clearInterval(bb);
                    b=0;};}
                    function theonecontenton(){
                        c=c+0.2;
                        $(".theonecontent").css('opacity',c);
                        if(c>1){clearInterval(cc);
                            c=0;};}
                            var bb=setInterval(theoneon,50);
                            var cc=setInterval(theonecontenton,50);
                        });};

        <!--应用框淡出效果-->
        $(".popup").on("click",function(){

            var b=0.6;
            var c=1;var d=15;
            function theoneoff(){
                b=b-0.2;
                $(".theone").css('opacity',b);
                if(b<=0)clearInterval(bb);}
                function theonecontentoff(){
                    c=c-0.2;
                    $(".theonecontent").css('opacity',c);
                    if(c<=0){clearInterval(cc);
                        $(".popup").css('display','none');
                        $(".father").css('-webkit-filter','none');
                        $(".theonecontent").css('opacity',0);
                        $(".theone").css('opacity',0);};}
                        var bb=setInterval(theoneoff,50);
                        var cc=setInterval(theonecontentoff,50);
                    });
                </script>
            </body>
            </html>
View Code
相关阅读:
git常用命令
 Laravel框架数据库CURD操作、连贯操作总结
 Laravel 5 系列入门教程（四）【最适合中国人的 Laravel 教程】【完结】
Laravel 5 系列入门教程（三）【最适合中国人的 Laravel 教程】
Laravel 5 系列入门教程（二）【最适合中国人的 Laravel 教程】
Laravel 5 系列入门教程（一）【最适合中国人的 Laravel 教程】
linux环境下安装nginx步骤
 关于C++中的虚拟继承的一些总结
 C++中拷贝构造函数
 C++之类与对象(3)
原文地址：https://www.cnblogs.com/eco-just/p/9245898.html