zoukankan html css js c++ java
前端画图之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
查看全文
相关阅读:
SAP MM 采购附加费计入物料成本之二
 SAP MM 采购附加费计入物料成本？
SAP MM 作为采购附加费的运费为啥没能在收货的时候计入物料成本？
SAP MM 外部采购流程里的Advanced Return Management
SAP MM 外部采购流程里的如同鸡肋一样的Advanced Returns Management功能
 SAP MM Why is the freight not included in the material cost at the time of GR?
SAP MM: Change of material moving average price after goods receipt and invoice verification posting for PO
SAP 创建启用了ARM功能的采购订单，报错 Shipping processing is not selected to supplier 100057 in purchase org. 0002
GIT·代码仓库默认分支更改
 .Net/C#·运行报错缺少XXX文件，但双击无法跳转缺少位置
原文地址：https://www.cnblogs.com/eco-just/p/9245898.html