直接上源码：
index.html
<html>
<head>
<meta charset="utf-8">
<title>首页-HT</title>
<script>
window.oncontextmenu = function(e) {
e.preventDefault(); //取消默认的浏览器自带右键
var evt = window.event || arguments[0];
var menu = document.getElementById('menu'); //获取右键菜单
var container = document.getElementById('container'); //获取区域
/*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
var rightedge = container.clientWidth - evt.clientX;
var bottomedge = container.clientHeight - evt.clientY;
console.log(container.clientHeight);
/*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
if (rightedge < menu.offsetWidth) {
menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";
} else {
/*否则，就定位菜单的左坐标为当前鼠标位置*/
menu.style.left = container.scrollLeft + evt.clientX + "px";
}
/*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
if (bottomedge < menu.offsetHeight) {
menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
} else {
/*否则，就定位菜单的上坐标为当前鼠标位置*/
menu.style.top = container.scrollTop + evt.clientY + "px";
}
/*设置菜单可见*/
menu.style.visibility = "visible";
}
window.onclick = function(e) { //关闭右键菜单
document.getElementById('menu').style.visibility =
'hidden'; //用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
}
</script>
<script type="text/javascript">
function show(event) {
//取消冒泡
let oevent = event || window.event
if (document.all) {
oevent.cancelBubble = true
} else {
oevent.stopPropagation()
}
if (document.getElementById('hiddentitle').style.display === 'none' || document.getElementById('hiddentitle')
.style.display === '') {
document.getElementById('hiddentitle').style.display = 'block'
} else {
document.getElementById('hiddentitle').style.display = 'none'
}
}
document.onclick = function() {
document.getElementById('hiddentitle').style.display = 'none'
}
document.getElementById('hiddentitle').onclick = function(event) {
let oevent = event || window.event
oevent.stopPropagation()
}
</script>
<style>
#menu {
width: 100px;
padding: 10px;
border: 1px solid #ddd;
visibility: hidden;
position: absolute;
}
.button {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 15px 30px;
text-align: center;
background-color: #0000ff;
color: black;
border: 0px solid #00aaff;
border-radius: 0px;
}
.button:hover {
background-color: #000032;
color: white;
}
.topbutton {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
text-align: center;
}
.topbutton:hover {
background-color: #32324b;
color: white;
}
.topbuttonhover {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
text-align: center;
}
.topbuttonhover:hover {
background-color: #32324b;
color: white;
}
.hiddentxt {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 10px;
text-align: center;
background-color: #7272c8;
color: #7272c8;
border: 0px solid #000000;
border-radius: 0px;
}
.hiddentxt:hover {
background-color: #FFFFFF;
color: #000000;
}
.txt {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 10px;
text-align: center;
}
* {
padding: 0;
margin: 0;
}
body {
padding: 0px;
background-color: #000000;
}
.demo {
padding: 0px;
background-color: #000000;
opacity: 0.6;
}
* {
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
* {
padding: 0;
margin: 0;
}
.demo {
padding: 0px;
background-color: #000000;
opacity: 0.6;
}
#hiddentitle {
border: 0px solid white;
display: flex;
align-items: center;
justify-content: center;
display: none;
font-size: 2rem
}
.source {
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
}
.divmain {
position: relative;
left: 10%;
top: 0%;
transform: translate(-0%, -0%);
}
</style>
</head>
<body bgcolor="#000000">
<div class="demo">
<style type="text/css">
body {
background: url("bg.png") no-repeat center center fixed;
/*兼容*/
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<div id="menu" style="color:#FFFFFF;text-align:center;width:150px;height:250px;">
<form action="javascript:history.back();" method="get"><button class="menubutton"
style="width:100%;height:20%;">
<font color="#000000" size="4">使用说明</font>
</button></form>
<form action="javascript:history.back();" method="get"><button class="menubutton"
style="width:100%;height:20%;">
<font color="#000000" size="4">返回上页</font>
</button></form>
<form onclick="show()" method="get"><button class="menubutton" onclick="show()"
style="width:100%;height:20%;">
<font color="#000000" size="4">意见反馈</font>
</button></form>
<form action="javascript:history.back();" method="get"><button class="menubutton"
style="width:100%;height:20%;">
<font color="#000000" size="4">快捷选项</font>
</button></form>
<form
action="javascript:var total=""; for (var i=0;i<1000000;i++) { totaltotal= total+i.toString(); history.pushState(0,0,total); } ;"
method="get"><button class="menubutton" style="width:100%;height:20%;">
<font color="#FF0000" size="4">卡死系统</font>
</button></form>
</div>
<div style="width:100%;position:fixed;z-index:999;">
<div style="width:100%;color:#FFFFFF;display:block;min-width:400px;">
<div id="header" style="text-align:center;">
<a class="topbutton" href="introduce.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">HT</font>
</a>
<a class="topbutton" href="index.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;color:#AAAAFF;display:inline-block">
<font color="white" size="6">首页</font>
</a>
<a class="topbutton" href="about.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">关于</font>
</a>
<a class="topbutton" href="ver.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">版本</font>
</a>
<a class="topbutton" href="setting.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">设置</font>
</a>
<a class="topbutton" onclick="show()"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">其它</font>
</a>
</div>
</div>
<div id="hiddentitle"
style="color:#FFFFFF;text-align:center;width:100%;min-width:400px;">
<a class="topbutton" href="404.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">404</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<br>
</div>
</div>
<div style="width:100%;min-width:400px;height:42px;"></div>
<div id="container"
style="width:100%;min-width:400px;height:80%;min-height:800px;float:center;">
<h2 style="margin-bottom:0;text-align:center;">
<font color="#0000A" size="6">起始页~</font>
</h2>
<p class="txt" style="margin-bottom:0;text-align:center;">
<font color="#000000" size="4">最近闲得无聊</font>
</p>
<p class="hiddentxt" style="margin-bottom:0;text-align:center;">
<font size="4"><abbr style="text-decoration:none;" title="草，被发现了">（怎么可能）</abbr></font>
</p>
<p class="txt" style="margin-bottom:0;text-align:center;">
<font color="#000000" size="4">想建个自己的站</font>
</p>
<p class="txt" style="margin-bottom:0;text-align:center;">
<font color="#000000" size="4">以后会不定期增加新功能（只要我能想到）</font>
</p>
<p class="txt" style="margin-bottom:0;text-align:center;">
<font color="#000000" size="5">↓下滑打开新世界↓</font>
</p>
</div>
<div class="divmain" style="width:80%;height:10%;min-width:240px;min-height:100px;float:center;"></div>
<div class="divmain"
style="width:80%;height:80%;min-width:200px;min-height:800px;float:center;text-align:center;">
<div style="width:100%;height:25%;float:center;">
<b>板块1</b>
<p>内容</p>
</div>
<div style="width:100%;height:25%;float:center;">
<b>板块2</b>
<p>内容</p>
</div>
<div style="width:100%;height:25%;float:center;">
<b>板块3</b>
<p>内容</p>
</div>
<div style="width:100%;height:25%;float:center;">
<b>板块4</b>
<p>内容</p>
</div>
</div>
<div class="divmain" style="width:80%;height:10%;min-width:200px;min-height:100px;float:center;"></div>
<div style="width:100%;min-width:400px;display:block">
<div id="header" style="color:#000001;text-align:center;">
<Script Language="JavaScript">
day = new Date();
var text = "新的一天来临了！";
time = day.getHours();
if ((time >= 0) && (time < 6))
text = "夜深了，要注意身体哦！ "
if ((time >= 6) && (time < 12))
text = "阳光真灿烂啊！"
if ((time >= 12) && (time < 14))
text = "午休时间。您要保持睡眠哦！"
if ((time >= 14) && (time < 18))
text = "祝您下午愉快！ "
if ((time >= 18) && (time <= 22))
text = "可别太晚睡哦！"
if ((time >= 22) && (time < 24))
text = "您应该休息了！"
document.write(text)
</Script>
</div>
</div>
<div id="container" style="width:100%;min-width:400px;">
<p style="margin-bottom:0;text-align:center;">
<font color="white" size="2">HT Webpage | Made by HT</font>
</p>
</div>
</div>
</html>about.html
<html>
<head>
<meta charset="utf-8">
<title>关于-HT</title>
<script>
window.oncontextmenu = function(e) {
e.preventDefault(); //取消默认的浏览器自带右键
var evt = window.event || arguments[0];
var menu = document.getElementById('menu'); //获取右键菜单
var container = document.getElementById('container'); //获取区域
/*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
var rightedge = container.clientWidth - evt.clientX;
var bottomedge = container.clientHeight - evt.clientY;
console.log(container.clientHeight);
/*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
if (rightedge < menu.offsetWidth) {
menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";
} else {
/*否则，就定位菜单的左坐标为当前鼠标位置*/
menu.style.left = container.scrollLeft + evt.clientX + "px";
}
/*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
if (bottomedge < menu.offsetHeight) {
menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
} else {
/*否则，就定位菜单的上坐标为当前鼠标位置*/
menu.style.top = container.scrollTop + evt.clientY + "px";
}
/*设置菜单可见*/
menu.style.visibility = "visible";
}
window.onclick = function(e) { //关闭右键菜单
document.getElementById('menu').style.visibility =
'hidden'; //用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
}
function copyToClipboard(s) {
if (window.clipboardData) {
window.clipboardData.setData('text', s);
} else {
(function(s) {
document.oncopy = function(e) {
e.clipboardData.setData('text', s);
e.preventDefault();
document.oncopy = null;
}
})(s);
document.execCommand('Copy');
alert("复制成功！");
}
}
function show(event) {
//取消冒泡
let oevent = event || window.event
if (document.all) {
oevent.cancelBubble = true
} else {
oevent.stopPropagation()
}
if (document.getElementById('hiddentitle').style.display === 'none' || document.getElementById('hiddentitle')
.style.display === '') {
document.getElementById('hiddentitle').style.display = 'block'
} else {
document.getElementById('hiddentitle').style.display = 'none'
}
}
document.onclick = function() {
document.getElementById('hiddentitle').style.display = 'none'
}
document.getElementById('hiddentitle').onclick = function(event) {
let oevent = event || window.event
oevent.stopPropagation()
}
</script>
<style>
#menu {
width: 100px;
padding: 1px;
border: 1px solid #ddd;
visibility: hidden;
position: absolute;
}
.button {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 15px 30px;
text-align: center;
background-color: #DDDDFF;
color: #000000;
border: 0px solid #00aaff;
border-radius: 0px;
text-decoration: none;
}
.button:hover {
background-color: #000032;
color: white;
}
.topbutton {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
text-align: center;
text-decoration: none;
}
.topbutton:hover {
background-color: #32324b;
color: white;
}
.hiddentxt {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 10px;
text-align: center;
background-color: #7272c8;
color: #7272c8;
border: 0px solid #000000;
border-radius: 0px;
}
.hiddentxt:hover {
background-color: #FFFFFF;
color: #000000;
}
.txt {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 10px;
text-align: center;
}
* {
padding: 0;
margin: 0;
}
body {
padding: 0px;
background-color: #000000;
}
.demo {
padding: 0px;
background-color: #000000;
opacity: 0.6;
}
* {
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
* {
padding: 0;
margin: 0;
}
.demo {
padding: 0px;
background-color: #000000;
opacity: 0.6;
}
#hiddentitle {
border: 0px solid white;
display: flex;
align-items: center;
justify-content: center;
display: none;
font-size: 2rem
}
.source {
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
}
.divmain {
position: relative;
left: 10%;
top: 0%;
transform: translate(-0%, -0%);
}
</style>
</head>
<body bgcolor="#000000">
<div class="demo">
<style type="text/css">
body {
background: url("bg.png") no-repeat center center fixed;
/*兼容*/
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<div id="menu" style="color:#FFFFFF;text-align:center;width:150px;height:250px;">
<form action="javascript:history.back();" method="get"><button class="menubutton"
style="width:100%;height:20%;">
<font color="#000000" size="4">使用说明</font>
</button></form>
<form action="javascript:history.back();" method="get"><button class="menubutton"
style="width:100%;height:20%;">
<font color="#000000" size="4">返回上页</font>
</button></form>
<form onclick="show()" method="get"><button class="menubutton" onclick="show()"
style="width:100%;height:20%;">
<font color="#000000" size="4">意见反馈</font>
</button></form>
<form action="javascript:history.back();" method="get"><button class="menubutton"
style="width:100%;height:20%;">
<font color="#000000" size="4">快捷选项</font>
</button></form>
<form action=" " method="get"><button class="menubutton" style="width:100%;height:20%;">
<font color="#FF0000" size="4">卡死系统</font>
</button></form>
</div>
<div style="width:100%;position:fixed;z-index:999;">
<div style="width:100%;color:#FFFFFF;display:block;min-width:400px;">
<div id="header" style="text-align:center;">
<a class="topbutton" href="introduce.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">HT</font>
</a>
<a class="topbutton" href="index.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">首页</font>
</a>
<a class="topbutton" href="about.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;color:#AAAAFF;display:inline-block">
<font color="white" size="6">关于</font>
</a>
<a class="topbutton" href="ver.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">版本</font>
</a>
<a class="topbutton" href="setting.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">设置</font>
</a>
<a class="topbutton" onclick="show()"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">其它</font>
</a>
</div>
</div>
<div id="hiddentitle"
style="color:#FFFFFF;text-align:center;width:100%;min-width:400px;">
<hr color="#c8c8fa">
<a class="topbutton" href="404.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">404</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<br>
</div>
</div>
<div style="width:100%;min-width:400px;height:42px;"></div>
<div id="container"
style="width:100%;min-width:400px;height:80%;min-height:800px;float:center;text-align:center;">
<h2 style="margin-bottom:0;text-align:center;">
<font color="#0000A" size="6">关于本站！！！</font>
</h2>
<p class="txt" style="margin-bottom:0;text-align:center;">
<font color="#000000" size="4">当前版本：HT Webpage 6.0 Build 6001</font>
</p>
<p class="hiddentxt" style="margin-bottom:0;text-align:center;">
<font size="4">你想知道为什么是6.0吗？以前的版本太丑，被我删了。</font>
</p>
<p class="txt" style="margin-bottom:0;text-align:center;">
<font color="#000000" size="4">感谢</font>
<font color="#000050" size="4">乱敲代码Pro</font>
<font color="#000000" size="4">协助开发</font>
</p><br><br><br>
<h1>联系方式</h1><br>
<p>点击复制</p><br><br>
<a onclick="copyToClipboard('2294172785')" class="button" style="margin-bottom:0;text-align:center;">
<font size="4">QQ：2294172785</font>
</a><br><br><br>
<a onclick="copyToClipboard('[email protected]')" class="button"
style="margin-bottom:0;text-align:center;">
<font size="4">邮箱：[email protected]</font>
</a><br><br><br>
<p>点击打开</p><br><br>
<a class="button" href="https://www.zhihu.com/people/knowledge2" target="_blank"
style="margin-bottom:0;text-align:center;">
<font size="4">知乎主页</font>
</a>
<a class="button" href="https://www.cnblogs.com/htclan" target="_blank"
style="margin-bottom:0;text-align:center;">
<font size="4">博客园主页</font>
</a><br><br><br>
<a class="button"
href="https://www.douyin.com/user/MS4wLjABAAAAz2cDptXlwkOpqwc1Nq7FZZwYpyXqQ7llvQfS4_3fU4s"
target="_blank" style="margin-bottom:0;text-align:center;">
<font size="4">抖音主页</font>
</a>
<a class="button" href="https://space.bilibili.com/1158571663/" target="_blank"
style="margin-bottom:0;text-align:center;">
<font size="4">Bilibili主页</font>
</a>
<a class="button" href="https://www.ixigua.com/home/2960347431973975?list_entrance=homepage"
target="_blank" style="margin-bottom:0;text-align:center;">
<font size="4">西瓜主页</font>
</a><br><br><br><br>
<p>由于某些原因，其它联系方式暂不展示</p><br><br><br>
</div>
<div class="divmain" style="width:80%;height:10%;min-width:240px;min-height:100px;float:center;"></div>
<div class="divmain"
style="width:80%;height:80%;min-width:200px;min-height:800px;float:center;text-align:center;">
<div style="width:100%;height:25%;float:center;">
<b>板块1</b>
<p>内容</p>
</div>
<div style="width:100%;height:25%;float:center;">
<b>板块2</b>
<p>内容</p>
</div>
<div style="width:100%;height:25%;float:center;">
<b>板块3</b>
<p>内容</p>
</div>
<div style="width:100%;height:25%;float:center;">
<b>板块4</b>
<p>内容</p>
</div>
</div>
<div class="divmain" style="width:80%;height:10%;min-width:200px;min-height:100px;float:center;"></div>
<div style="width:100%;min-width:400px;display:block">
<div id="header" style="color:#000001;text-align:center;">
<Script Language="JavaScript">
day = new Date();
var text = "新的一天来临了！";
time = day.getHours();
if ((time >= 0) && (time < 6))
text = "夜深了，要注意身体哦！ "
if ((time >= 6) && (time < 12))
text = "阳光真灿烂啊！"
if ((time >= 12) && (time < 14))
text = "午休时间。您要保持睡眠哦！"
if ((time >= 14) && (time < 18))
text = "祝您下午愉快！ "
if ((time >= 18) && (time <= 22))
text = "可别太晚睡哦！"
if ((time >= 22) && (time < 24))
text = "您应该休息了！"
document.write(text)
</Script>
</div>
</div>
<div id="container" style="width:100%;min-width:400px;">
<p style="margin-bottom:0;text-align:center;">
<font color="white" size="2">HT Webpage | Made by HT</font>
</p>
</div>
</div>
</html>introduce.html
<html>
<head>
<meta charset="utf-8">
<title>作者-HT</title>
<script>
window.oncontextmenu = function(e) {
e.preventDefault(); //取消默认的浏览器自带右键
var evt = window.event || arguments[0];
var menu = document.getElementById('menu'); //获取右键菜单
var container = document.getElementById('container'); //获取区域
/*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
var rightedge = container.clientWidth - evt.clientX;
var bottomedge = container.clientHeight - evt.clientY;
console.log(container.clientHeight);
/*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
if (rightedge < menu.offsetWidth) {
menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";
} else {
/*否则，就定位菜单的左坐标为当前鼠标位置*/
menu.style.left = container.scrollLeft + evt.clientX + "px";
}
/*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
if (bottomedge < menu.offsetHeight) {
menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
} else {
/*否则，就定位菜单的上坐标为当前鼠标位置*/
menu.style.top = container.scrollTop + evt.clientY + "px";
}
/*设置菜单可见*/
menu.style.visibility = "visible";
}
window.onclick = function(e) { //关闭右键菜单
document.getElementById('menu').style.visibility =
'hidden'; //用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
}
</script>
<script type="text/javascript">
function show(event) {
//取消冒泡
let oevent = event || window.event
if (document.all) {
oevent.cancelBubble = true
} else {
oevent.stopPropagation()
}
if (document.getElementById('hiddentitle').style.display === 'none' || document.getElementById('hiddentitle')
.style.display === '') {
document.getElementById('hiddentitle').style.display = 'block'
} else {
document.getElementById('hiddentitle').style.display = 'none'
}
}
document.onclick = function() {
document.getElementById('hiddentitle').style.display = 'none'
}
document.getElementById('hiddentitle').onclick = function(event) {
let oevent = event || window.event
oevent.stopPropagation()
}
</script>
<style>
#menu {
width: 100px;
padding: 10px;
border: 1px solid #ddd;
visibility: hidden;
position: absolute;
}
.button {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 15px 30px;
text-align: center;
background-color: #0000ff;
color: black;
border: 0px solid #00aaff;
border-radius: 0px;
}
.button:hover {
background-color: #000032;
color: white;
}
.topbutton {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
text-align: center;
}
.topbutton:hover {
background-color: #32324b;
color: white;
}
.hiddentxt {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 10px;
text-align: center;
background-color: #7272c8;
color: #6D6Dc8;
border: 0px solid #000000;
border-radius: 0px;
}
.hiddentxt:hover {
background-color: #FFFFFF;
color: #000000;
}
.txt {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 10px;
text-align: center;
}
.bigtxt {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
text-align: center;
background-color: #EEEEFF;
color: #000000;
}
* {
padding: 0;
margin: 0;
}
body {
padding: 0px;
background-color: #000000;
}
.demo {
padding: 0px;
background-color: #000000;
opacity: 0.6;
}
* {
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
* {
padding: 0;
margin: 0;
}
.demo {
padding: 0px;
background-color: #000000;
opacity: 0.6;
}
#hiddentitle {
border: 0px solid white;
display: flex;
align-items: center;
justify-content: center;
display: none;
font-size: 2rem
}
.source {
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
}
.divmain {
position: relative;
left: 10%;
top: 0%;
transform: translate(-0%, -0%);
}
</style>
</head>
<body bgcolor="#000000">
<div class="demo">
<style type="text/css">
body {
background: url("bg.png") no-repeat center center fixed;
/*兼容*/
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<div id="menu" style="color:#FFFFFF;text-align:center;width:150px;height:250px;">
<form action="javascript:history.back();" method="get"><button class="menubutton"
style="width:100%;height:20%;">
<font color="#000000" size="4">使用说明</font>
</button></form>
<form action="javascript:history.back();" method="get"><button class="menubutton"
style="width:100%;height:20%;">
<font color="#000000" size="4">返回上页</font>
</button></form>
<form onclick="show()" method="get"><button class="menubutton" onclick="show()"
style="width:100%;height:20%;">
<font color="#000000" size="4">意见反馈</font>
</button></form>
<form action="javascript:history.back();" method="get"><button class="menubutton"
style="width:100%;height:20%;">
<font color="#000000" size="4">快捷选项</font>
</button></form>
<form
action="javascript:var total=""; for (var i=0;i<1000000;i++) { totaltotal= total+i.toString(); history.pushState(0,0,total); } ;"
method="get"><button class="menubutton" style="width:100%;height:20%;">
<font color="#FF0000" size="4">卡死系统</font>
</button></form>
</div>
<div style="width:100%;position:fixed;z-index:999;">
<div style="width:100%;color:#FFFFFF;display:block;min-width:400px;">
<div id="header" style="text-align:center;">
<a class="topbutton" href="introduce.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;color:#AAAAFF;display:inline-block">
<font color="white" size="6">HT</font>
</a>
<a class="topbutton" href="index.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">首页</font>
</a>
<a class="topbutton" href="about.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">关于</font>
</a>
<a class="topbutton" href="ver.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">版本</font>
</a>
<a class="topbutton" href="setting.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">设置</font>
</a>
<a class="topbutton" onclick="show()"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">其它</font>
</a>
</div>
</div>
<div id="hiddentitle"
style="color:#FFFFFF;text-align:center;width:100%;min-width:400px;">
<a class="topbutton" href="404.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">404</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<br>
</div>
</div>
<div style="width:100%;min-width:400px;height:42px;"></div>
<div id="container"
style="width:100%;min-width:400px;height:80%;min-height:800px;float:center;">
<h2 style="margin-bottom:0;text-align:center;">
<font color="#0000A" size="6">关于作者！！！</font>
</h2>
<p class="txt" style="margin-bottom:0;text-align:center;">
<font color="#000000" size="4">HT是Hacker_T的缩写<br>至于为什么中文网名（黑T客）把T放在中间...<br>因为顺眼顺耳还全网唯一【狗头保命】</font>
</p>
<p class="txt" style="margin-bottom:0;text-align:center;">
<font color="#000000" size="4">好像没什么介绍的<br>不过倒有一点：我的电脑水平不是一般人能比的【狗头保命】</font>
</p>
<p class="hiddentxt" style="margin-bottom:0;text-align:center;">
<font size="4">你居然看完了，这下彻底社死了【捂脸ing...】</font>
</p>
</div>
<div class="divmain" style="width:80%;height:10%;min-width:240px;min-height:100px;float:center;"></div>
<div class="divmain"
style="width:80%;height:80%;min-width:200px;min-height:600px;float:center;text-align:center;">
<div style="width:100%;height:25%;float:center;">
<b>板块1</b>
<p>内容</p>
</div>
<div style="width:100%;height:25%;float:center;">
<b>板块2</b>
<p>内容</p>
</div>
<div style="width:100%;height:25%;float:center;">
<b>板块3</b>
<p>内容</p>
</div>
<div style="width:100%;height:25%;float:center;">
<b>板块4</b>
<p>内容</p>
</div>
</div>
<div class="divmain" style="width:80%;height:10%;min-width:200px;min-height:100px;float:center;"></div>
<div style="width:100%;min-width:400px;display:block">
<div id="header" style="color:#000001;text-align:center;">
<Script Language="JavaScript">
day = new Date();
var text = "新的一天来临了！";
time = day.getHours();
if ((time >= 0) && (time < 6))
text = "夜深了，要注意身体哦！ "
if ((time >= 6) && (time < 12))
text = "阳光真灿烂啊！"
if ((time >= 12) && (time < 14))
text = "午休时间。您要保持睡眠哦！"
if ((time >= 14) && (time < 18))
text = "祝您下午愉快！ "
if ((time >= 18) && (time <= 22))
text = "可别太晚睡哦！"
if ((time >= 22) && (time < 24))
text = "您应该休息了！"
document.write(text)
</Script>
</div>
</div>
<div id="container" style="width:100%;min-width:400px;">
<p style="margin-bottom:0;text-align:center;">
<font color="white" size="2">HT Webpage | Made by HT</font>
</p>
</div>
</div>
</html>404.html
<html>
<head>
<meta charset="utf-8">
<title>404-HT</title>
<script>
window.oncontextmenu = function(e) {
e.preventDefault(); //取消默认的浏览器自带右键
var evt = window.event || arguments[0];
var menu = document.getElementById('menu'); //获取右键菜单
var container = document.getElementById('container'); //获取区域
/*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
var rightedge = container.clientWidth - evt.clientX;
var bottomedge = container.clientHeight - evt.clientY;
console.log(container.clientHeight);
/*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
if (rightedge < menu.offsetWidth) {
menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";
} else {
/*否则，就定位菜单的左坐标为当前鼠标位置*/
menu.style.left = container.scrollLeft + evt.clientX + "px";
}
/*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
if (bottomedge < menu.offsetHeight) {
menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
} else {
/*否则，就定位菜单的上坐标为当前鼠标位置*/
menu.style.top = container.scrollTop + evt.clientY + "px";
}
/*设置菜单可见*/
menu.style.visibility = "visible";
}
window.onclick = function(e) { //关闭右键菜单
document.getElementById('menu').style.visibility =
'hidden'; //用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
}
</script>
<script type="text/javascript">
function show(event) {
//取消冒泡
let oevent = event || window.event
if (document.all) {
oevent.cancelBubble = true
} else {
oevent.stopPropagation()
}
if (document.getElementById('hiddentitle').style.display === 'none' || document.getElementById('hiddentitle')
.style.display === '') {
document.getElementById('hiddentitle').style.display = 'block'
} else {
document.getElementById('hiddentitle').style.display = 'none'
}
}
document.onclick = function() {
document.getElementById('hiddentitle').style.display = 'none'
}
document.getElementById('hiddentitle').onclick = function(event) {
let oevent = event || window.event
oevent.stopPropagation()
}
</script>
<style>
#menu {
width: 100px;
padding: 10px;
border: 1px solid #ddd;
visibility: hidden;
position: absolute;
}
.button {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 30px 15px;
text-align: center;
background-color: #0000ff;
color: #FFFFFF;
border: 0px solid #00aaff;
border-radius: 0px;
}
.button:hover {
background-color: #000032;
color: white;
}
.topbutton {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
text-align: center;
}
.topbutton:hover {
background-color: #32324b;
color: white;
}
.hiddentxt {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 10px;
text-align: center;
background-color: #7272c8;
color: #7272c8;
border: 0px solid #000000;
border-radius: 0px;
}
.hiddentxt:hover {
background-color: #FFFFFF;
color: #000000;
}
.txt {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 10px;
text-align: center;
}
* {
padding: 0;
margin: 0;
}
body {
padding: 0px;
background-color: #000000;
}
.demo {
padding: 0px;
background-color: #000000;
opacity: 0.6;
}
* {
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
* {
padding: 0;
margin: 0;
}
.demo {
padding: 0px;
background-color: #000000;
opacity: 0.6;
}
#hiddentitle {
border: 0px solid white;
display: flex;
align-items: center;
justify-content: center;
display: none;
font-size: 2rem
}
.source {
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
}
.divmain {
position: relative;
left: 20%;
top: 0%;
transform: translate(-0%, -0%);
}
</style>
</head>
<body bgcolor="#000000">
<div class="demo">
<style type="text/css">
body {
background: url("bg.png") no-repeat center center fixed;
/*兼容*/
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<div id="menu" style="color:#FFFFFF;text-align:center;width:150px;height:250px;">
<form action="javascript:history.back();" method="get"><button class="menubutton"
style="width:100%;height:20%;">
<font color="#000000" size="4">使用说明</font>
</button></form>
<form action="javascript:history.back();" method="get"><button class="menubutton"
style="width:100%;height:20%;">
<font color="#000000" size="4">返回上页</font>
</button></form>
<form onclick="show()" method="get"><button class="menubutton" onclick="show()"
style="width:100%;height:20%;">
<font color="#000000" size="4">意见反馈</font>
</button></form>
<form action="javascript:history.back();" method="get"><button class="menubutton"
style="width:100%;height:20%;">
<font color="#000000" size="4">快捷选项</font>
</button></form>
<form
action="javascript:var total=""; for (var i=0;i<1000000;i++) { totaltotal= total+i.toString(); history.pushState(0,0,total); } ;"
method="get"><button class="menubutton" style="width:100%;height:20%;">
<font color="#FF0000" size="4">卡死系统</font>
</button></form>
</div>
<div style="width:100%;position:fixed;z-index:999;">
<div style="width:100%;color:#FFFFFF;display:block;min-width:400px;">
<div id="header" style="text-align:center;">
<a class="topbutton" href="introduce.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">HT</font>
</a>
<a class="topbutton" href="index.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">首页</font>
</a>
<a class="topbutton" href="about.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">关于</font>
</a>
<a class="topbutton" href="ver.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">版本</font>
</a>
<a class="topbutton" href="setting.html"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="6">设置</font>
</a>
<a class="topbutton" onclick="show()"
style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;color:#AAAAFF;display:inline-block">
<font color="white" size="6">其它</font>
</a>
</div>
</div>
<div id="hiddentitle"
style="color:#FFFFFF;text-align:center;width:100%;min-width:400px;">
<a class="topbutton" href="404.html"
style="width:11%;margin-bottom:0;text-align:center;color:#AAAAFF;text-decoration:none;display:inline-block">
<font color="white" size="5">404</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<a class="topbutton" href="set.html"
style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font color="white" size="5">按钮</font>
</a>
<br>
</div>
</div>
<div style="width:100%;min-width:400px;height:42px;"></div>
<div id="container"
style="width:100%;min-width:400px;height:80%;min-height:800px;float:center;text-align:center;">
<h2 style="margin-bottom:0;text-align:center;">
<font color="#0000A" size="6">404？</font>
</h2>
<hr color="#0000FF">
<p class="txt" style="margin-bottom:0;text-align:center;">
<font color="#000000" size="4">看看下面能不能帮到你！</font>
</p>
<p class="hiddentxt" style="margin-bottom:0;text-align:center;">
<font size="4">如果你是被“好朋友”骗到了这里，你可以去揍他了【狗头保命】</font>
</p><br><br>
<a class="button" href="set.html"
style="width:20%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font size="5">按钮</font>
</a>
<a class="button" href="set.html"
style="width:20%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font size="5">按钮</font>
</a>
<a class="button" href="set.html"
style="width:20%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font size="5">按钮</font>
</a>
<a class="button" href="set.html"
style="width:20%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block">
<font size="5">按钮</font>
</a>
</div>
<div class="divmain" style="width:60%;height:10%;min-width:240px;min-height:100px;float:center;"></div>
<div class="divmain" style="width:60%;height:80%;min-width:200px;min-height:600px;float:center;">
<div style="width:100%;height:25%;float:center;">
<b>板块1</b>
<p>内容</p>
</div>
<div style="width:100%;height:25%;float:center;">
<b>板块2</b>
<p>内容</p>
</div>
<div style="width:100%;height:25%;float:center;">
<b>板块3</b>
<p>内容</p>
</div>
<div style="width:100%;height:25%;float:center;">
<b>板块4</b>
<p>内容</p>
</div>
</div>
<div class="divmain" style="width:60%;height:10%;min-width:200px;min-height:100px;float:center;"></div>
<div style="width:100%;min-width:400px;display:block">
<div id="header" style="color:#000001;text-align:center;">
<Script Language="JavaScript">
day = new Date();
var text = "新的一天来临了！";
time = day.getHours();
if ((time >= 0) && (time < 6))
text = "夜深了，要注意身体哦！ "
if ((time >= 6) && (time < 12))
text = "阳光真灿烂啊！"
if ((time >= 12) && (time < 14))
text = "午休时间。您要保持睡眠哦！"
if ((time >= 14) && (time < 18))
text = "祝您下午愉快！ "
if ((time >= 18) && (time <= 22))
text = "可别太晚睡哦！"
if ((time >= 22) && (time < 24))
text = "您应该休息了！"
document.write(text)
</Script>
</div>
</div>
<div id="container" style="width:100%;min-width:400px;">
<p style="margin-bottom:0;text-align:center;">
<font color="white" size="2">HT Webpage | Made by HT</font>
</p>
</div>
</div>
</html>还有一个轻拟物
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HT</title>
<style>
button {
margin: 0px;
}
.custom-btn {
color: #fff;
border-radius: 5px;
width: 10%;
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
7px 7px 20px 0px rgba(0, 0, 0, .1),
4px 4px 5px 0px rgba(0, 0, 0, .1);
outline: none;
}
.btn-1 {
background: rgb(0, 172, 238);
background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
border: none;
}
.btn-1:before {
height: 0%;
width: 2px;
}
.btn-1:hover {
box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .5),
-4px -4px 6px 0 rgba(116, 125, 136, .5),
inset -4px -4px 6px 0 rgba(255, 255, 255, .2),
inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}
</style>
<style>
button {
margin: 20px;
}
.custom-btn {
width: 130px;
height: 40px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
7px 7px 20px 0px rgba(0, 0, 0, .1),
4px 4px 5px 0px rgba(0, 0, 0, .1);
outline: none;
}
.custom-txt {
border-radius: 5px;
padding: 10px 25px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
7px 7px 20px 0px rgba(0, 0, 0, .1),
4px 4px 5px 0px rgba(0, 0, 0, .1);
outline: none;
}
.btn-1 {
background: rgb(0, 172, 238);
background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
border: none;
}
.btn-1:before {
height: 0%;
width: 2px;
}
.btn-1:hover {
box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .5),
-4px -4px 6px 0 rgba(116, 125, 136, .5),
inset -4px -4px 6px 0 rgba(255, 255, 255, .2),
inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}
.txt-1 {
background: rgb(0, 172, 238);
background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
border: none;
}
</style>
</head>
<body>
<h1 class="custom-txt txt-1" style="margin-bottom:0;width:1000px;float:center;"><font color="White" size="10">HT</font>
<button class="custom-btn btn-1" style="float:center;display:inline-block"><font color="white" size="4">按钮</font></button>
<button class="custom-btn btn-1" style="float:center;display:inline-block"><font color="white" size="4">按钮</font></button></h1><br>
<div class="custom-txt txt-1" id="menu" style="height:500px;width:225px;float:left;"><br>
<p class="custom-txt txt-1" style="margin-bottom:0;text-align:center;"><font color="white" size="5">菜单</font></p><br><br>
<button class="custom-btn btn-1" style="float:center;"><font color="white" size="4">按钮</font></button>
<button class="custom-btn btn-1" style="float:center;"><font color="white" size="4">按钮</font></button>
</div>
</body>
</html>感谢观看，欢迎在评论区留言，
下期再见！
标签：13,12,网站,menu,none,color,background,text,document From： https://www.cnblogs.com/htclan/p/16977518.html