備忘錄_20160105(定位) 修改 回首頁

程式 2022-10-06 20:48:26 1665060507 100
html basic template 網頁基本樣板 part 02 - CSS 上左右下

html basic template 網頁基本樣板 part 02 - CSS 上左右下

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      
      *
      {
        font-family: "WenQuanYi Zen Hei","文泉驛正黑","Heiti TC","黑體-繁","LiHei Pro","儷黑 Pro","PingFang TC","Droid Sans","Roboto","Microsoft JhengHei","微軟正黑體",sans-serif;
        /* 【linux的字型】【ios字型】【android字型】【微軟正黑體】【無襯線字=黑體】 */
      }

      a:link, a:visited
      {
        color: blue;
        text-decoration: none;
      }
      
      html, body 
      {
        margin: 0;
        border: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
      }

      #divWrapper
      {
        display: block;
        position: relative;
        box-sizing: border-box;
        margin: 0;
        border: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        background-color: yellow;
        overflow: auto;
      }
      
      #top, #left, #right, #bottom
      {
        display: block;
        position: absolute;
        box-sizing: border-box;
        margin: 0;
        border: 0;
        padding: 0;
        overflow: auto;
      }
      
      #top
      {
        width: 100vw;
        height: 10vh;
        left: 0;
        top: 0;
        background-color: green;
      }
      
      #left
      {
        width: 30vw;
        height: 80vh;
        left: 0;
        top: 10vh;
        background-color: blue;
      }
      
      #right
      {
        width: 70vw;
        height: 80vh;
        left: 30vw;
        top: 10vh;
        background-color: pink;
      }
      
      #bottom
      {
        width: 100vw;
        height: 10vh;
        left: 0;
        bottom: 0;
        background-color: gray;
      }
      
    </style>
  </head>
  <body>
    <div id="divWrapper">
      <div id="top"></div>
      <div id="left"></div>
      <div id="right"></div>
      <div id="bottom"></div>
    </div>
    <script>
      
      if(!String.prototype.ltrim) { String.prototype.ltrim = function() { return this.replace(/^\s+/,'');    }; }
      if(!String.prototype.rtrim) { String.prototype.rtrim = function() { return this.replace(/\s+$/,'');    }; }
      if(!String.prototype.trim ) { String.prototype.trim = function()  { return this.replace(/^\s+|\s+$/g,''); }; }
      
      function gebi(strId)
      {
        return document.getElementById(strId);
      }
      
      window.addEventListener(
        "load",
        function() 
        {
        }
      );
      
    </script>
    <script>
      function getStrCurrentPath()
      {
        var str1=window.location.origin;
        var str2=window.location.pathname;
        
        var iIdx=str2.lastIndexOf("/");
        if(iIdx!=-1) { str2=str2.substring(0, iIdx); }
        
        return (str1+str2); // 如 https://abc.com:8888/test
      }
    </script>
  </body>
</html>