備忘錄_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>