20180522

页面修改

  • 修改客户端，花了大半个小时的时间。是关于如何设置定位的问题。本来做了一个100vw，100vh的蒙层，里面放了一个弹框，之前想的是都用绝对定位，也照做了。所以弹框的定位就是top：36%；left:36%;这样，在我自己的一个屏幕上看起来就居中了，但是细心的同学可能会发现，这有一个非常大的问题，那就是如果屏幕一换，这个弹框就立刻会出现偏移。怎么解决这个问题呢？
  • 我想到的是，第一，把弹框的宽度设置成百分比宽度，这样的话left我也就能算出一个固定的百分比来，能实现居中。但是呢，如果这样做就会有另一个问题出现，对应父元素如果过宽或者过窄，弹款就会变得特别大或者特别小，这时候设计就会跳出来找你毛病了。

  • 这时候我想到了第二个解决方案，蒙层和弹框都用相对定位，然后弹框用margin：0 auto；top设置成百分比的值就可以了。代码如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
    	<title>看一下就可以了哈</title>
    	<link rel="shortcut icon" href="./favicon.ico" id="shortcut" />
        <link rel="bookmark" href="./favicon.ico" id="bookmark" />
    	<style>
    	  body{
    	    overflow:hidden;
    		margin:0;
    		padding:0;
    	  }
    	  iframe{
    	    display:block;
    	    width:100vw;
    		height:100vh;
    		overflow:hidden;
    	  }
    	  .layer{
    	     display:none;
    	     width:100vw;
    		 height:100vh;
    		 position:absolute;
    		 top:0;
    		 left:0;
    		 background:rgba(0,0,0,1);
    		 z-index:99;
    		 margin:0 auto;

    	  }
    	  #confirBox{
    	    display:none;
    		z-index: 200;
    		position:relative;
    		border:solid #2a2a2a 1px;
    		width:400px;
    		height:200px;
    		background:#2a2a2a;
    		color:#fff;
    		border-radius:10px;
    		padding:0 40px 20px;
    		margin:0 auto;
    		top:36%;
    	  }
    	  #confirBox h3{
    		text-align: center;
    	  }
    	  #confirBox .title{
    	    margin-top:20px;
    	  }
    	  #confirBox .choiceButton{
    	    position:absolute;
    		bottom:40px;
    	  }
    	  #confirBox .choiceButton span{
    	    border-radius: 26px;
    	    padding-right: 15px;
            padding-left: 15px;
    	    color: #ffffff !important;
            background-color: #e74478;
            border-color: #e74478;
    		display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
    		touch-action: manipulation;
            cursor: pointer;
    		user-select: none;
            background-image: none;
            border: 1px solid transparent;
    		width:80px;
    		margin-right:20px;
    	  }
    	</style>
    	 <script>
    	   var device = 'client'
    	 </script>
    </head>
    <body>
    <iframe id="containIframe" src="http://www.baidu.com"></iframe>
    <div id="layer" class="layer">
    	<div id="confirBox">
    		<h3>提示信息</h3>
    		<div class="title">请选择您要进行的操作：</div>
    		<div class="choiceButton">
    		   <span onclick="back()">返回</span>
    		   <span onclick="refresh()">刷新</span>
    		   <span onclick="logout()">退出</span>
    		</div>
    	</div>
    </div>
    <script>
    	   window.resizeTo(window.screen.width, window.screen.height);
    	   chrome.fontSettings.setMinimumFontSize({pixelSize: 10});
    	   nw.Window.get().on('close', function() {
    	    document.getElementById('confirBox').style.display = "block"
    		document.getElementById('layer').style.display = "block"
    	     //var r=confirm("确定要退出吗？");
             //if( r == true){
    	   	   //localStorage.clear()
              // nw.App.closeAllWindows();
              //nw.App.quit();
    	   	 //}
           });
    	   function back(){
    	     document.getElementById('confirBox').style.display = "none"
    		 document.getElementById('layer').style.display = "none"
    	   }

    	   function refresh(){
    	     let gui = require('nw.gui');
             gui.App.clearCache();
    		 window.location.reload(true)
    		 document.getElementById('confirBox').style.display = "none"
    		 document.getElementById('layer').style.display = "none"
    	   }
    	   function logout () {
    	     nw.App.closeAllWindows();
             nw.App.quit();
    	   }
    </script>
    </body>
    </html>

  • 这个项目，没什么技术难点，主要就是基础的掌握和活用。作为一个半路出家的程序猿，深感基础之重要。如果有前端新人或者想学前端的人看到这个文章，强烈建议你先去把html，css，js基础学扎实了，再去学各种框架。

    需求介绍会议

    有新的需求，需要在原版的基础上做一个项目。嗯。这个改其实比重新写麻烦，我觉的。

    看设计书籍

    对齐，间距真的很重要。重新把自己的办公桌整理了一下，看起来整齐多了，下一步的计划就是整理自己的形象。