console
function getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
}
else {
var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
}
return clientHeight;
}
function $(id) {
return document.getElementById(id);
}
function menuinit(menu) {
var width = getClientHeight();
menu.style.height = width * Math.PI / 6 + 10 + "px";
menu.style.marginTop = (width * (5 / 4) - width) / 2 + "px";
}
menuinit($("menu"));
window.onload = function () {
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>T H Y L-Index</title>
</head>
<body>
<img id="bg" src="https://qianqu.me/sakurafrp/images/hero_bg.jpg" width="100%">
<div id="menu">
</div>
<div id="tools">
</div>
</html>
*{
border: 0;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
text-decoration-color: white;
}
#bg{
width: 100%;
z-index: -1;
position: fixed;
top: 0px;
left: 0px;
}
#menu{
z-index: 2;
border-radius: 5px;
width: 80%;
background: #FFFFFF10;
margin: auto;
}
#tools{
z-index: 1;
width: 79%;
height: 60px;
margin: auto;
margin-top: 30px;
border-radius: 25px;
background: rgba(19, 82, 255, 0.3)
}