M
目前更新于12月2日，可能有更新延迟
首先看一下网页的文件架构（只有一层文件夹）
更多见我的这篇文章：
网页源码：
声明：请勿恶意搬运代码，禁止盗版！违者将追究法律责任！禁止盗版！
允许部分摘取引用（注意别漏了，不然效果差太多了，怕漏了最好把整个网页复制出来再删除不需要的）。
index.html
<html><head><meta charset="utf-8"><title>首页-HT</title><style>.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: #7272c8;border: 0px solid #000000;border-radius:0px;}.hiddentxt:hover {background-color: #e1e1ff;color: #000000;}.txt {-webkit-transition-duration: 0.4s;transition-duration: 0.4s;padding: 10px;text-align: center;}.txt:hover {background-color: #e1e1ff;color: #000000;}*{padding: 0;margin: 0;}body{padding: 0px;background-color:#000000 ;}.demo{padding: 0px;background-color:#000000;opacity: 0.6;}</style></head><body><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="top"><div style="width:100%;"><div id="header" style="background-color:#000000;text-align:center;"><a class="topbutton" href="test.html"style="width:150px;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">HT</font></a><a class="topbutton" href="about.html"style="width:150px;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">关于</font></a><a class="topbutton" href="test.html"style="width:150px;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">版本</font></a><a class="topbutton" href="test.html"style="width:150px;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">设置</font></a><a class="topbutton" href="test.html"style="width:150px;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">其它</font></a></div></div><div id="menu" style="background-color:#646496;height:500px;float:left;"><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /></div><div id="menu" style="background-color:#646496;height:500px;float:right;"><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /></div><div id="container" style="background-color:#ffffff;width:100%;height:500px;float:center;"><h2 style="margin-bottom:0;text-align:center;background-color:#00ffff;"><font color="#00007f" size="6">黑T客の奇葩小站</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><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="4">慢慢逛吧，写了几个月的站</font></p><p class="txt" style="margin-bottom:0;text-align:center;"><font color="#000000" size="4">以后会不定期增加新功能（只要我能想到）</font></p></div><div id="container" style="background-color:#00ff00;width:100%;height:200px;float:center;"><b>菜单1</b><p>内容</p></div><div id="container" style="background-color:#c8c800;width:100%;height:200px;float:center;"><b>菜单2</b><p>内容</p></div><div id="container" style="background-color:#ff0000;width:100%;height:200px;float:center;"><b>菜单3</b><p>内容</p></div><div id="container" style="background-color:#00aaff;width:100%;height:200px;float:center;"><b>菜单4</b><p>内容</p></div><center><div id="container" style="width:100%;background-color:#000064;"><p style="margin-bottom:0;text-align:center;"><font color="white" size="2">HT Webpage | Made by HT</font></p></div></center></div></html>
纯手搓的！
PS.个人喜欢把css内置在html里面
introduce.html：
<html><head><meta charset="utf-8"><title>关于-HT</title><style>.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: #7272ff;border: 0px solid #000000;border-radius:0px;}.hiddentxt:hover {background-color: #e1e1ff;color: #000000;}.txt {-webkit-transition-duration: 0.4s;transition-duration: 0.4s;text-align: center;}.txt:hover {background-color: #e1e1ff;color: #000000;}.bigtxt {-webkit-transition-duration: 0.4s;transition-duration: 0.4s;text-align: center;background-color: #c8c8ff;color: #000000;}.bigtxt:hover {background-color: #c8c8e1;color: #000000;}*{padding: 0;margin: 0;}body{padding: 0px;background-color:#000000 ;}.demo{padding: 0px;background-color:#000000;opacity: 0.6;}</style></head><body><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="top"><div style="width:100%;"><div id="header" style="background-color:#000000;text-align:center;"><a class="topbutton" href="introduce.html"style="width:150px;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">HT</font></a><a class="topbutton" href="index.html"style="width:150px;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">首页</font></a><a class="topbutton" href="test.html"style="width:150px;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">版本</font></a><a class="topbutton" href="test.html"style="width:150px;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">设置</font></a><a class="topbutton" href="test.html"style="width:150px;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">其它</font></a></div></div><div id="menu" style="background-color:#646496;height:500px;float:left;"><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /></div><div id="menu" style="background-color:#646496;height:500px;float:right;"><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /></div><div id="container" style="background-color:#ffffff;width:100%;height:500px;float:center;"><h2 style="margin-bottom:0;text-align:center;background-color:#00ffff;"><font color="#00007f" size="6">关于作者！！！</font></h2><hr color="#0000FF"><p class="hiddentxt" style="margin-bottom:0;text-align:center;"><font size="4">额，你为什么会来这里？<br>现在回去还来得及【doge】</font></p><h2 class="bigtxt" style="margin-bottom:0;text-align:center;"><font color="#000000" size="4">HT是什么？</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><h2 class="bigtxt" style="margin-bottom:0;text-align:center;"><font color="#000000" size="4">介绍？</font></h2><p class="txt" style="margin-bottom:0;text-align:center;"><font color="#000000" size="4">猝不及防...<br>好像没什么介绍的<br>不过倒有一点：我的电脑水平不是一般人能比的【狗头保命】</font></p></div><div id="container" style="background-color:#00ff00;width:100%;height:200px;float:center;"><b>菜单1</b><p>内容</p></div><div id="container" style="background-color:#c8c800;width:100%;height:200px;float:center;"><b>菜单2</b><p>内容</p></div><div id="container" style="background-color:#ff0000;width:100%;height:200px;float:center;"><b>菜单3</b><p>内容</p></div><div id="container" style="background-color:#00aaff;width:100%;height:200px;float:center;"><b>菜单4</b><p>内容</p></div><center><div id="container" style="width:100%;background-color:#000064;"><p style="margin-bottom:0;text-align:center;"><font color="white" size="2">HT Webpage | Made by HT</font></p></div></center></div></html>
about.html
<html><head><meta charset="utf-8"><title>关于-HT</title><style>.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: #7272c8;border: 0px solid #000000;border-radius:0px;}.hiddentxt:hover {background-color: #e1e1ff;color: #000000;}.txt {-webkit-transition-duration: 0.4s;transition-duration: 0.4s;padding: 10px;text-align: center;}.txt:hover {background-color: #e1e1ff;color: #000000;}*{padding: 0;margin: 0;}body{padding: 0px;background-color:#000000 ;}.demo{padding: 0px;background-color:#000000;opacity: 0.6;}</style></head><body><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="top"><div style="width:100%;"><div id="header" style="background-color:#000000;text-align:center;"><a class="topbutton" href="introduce.html"style="width:150px;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">HT</font></a><a class="topbutton" href="index.html"style="width:150px;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">首页</font></a><a class="topbutton" href="test.html"style="width:150px;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">版本</font></a><a class="topbutton" href="test.html"style="width:150px;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">设置</font></a><a class="topbutton" href="test.html"style="width:150px;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="5">其它</font></a></div></div><div id="menu" style="background-color:#646496;height:500px;float:left;"><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /></div><div id="menu" style="background-color:#646496;height:500px;float:right;"><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /><form action="test.html" method="get"><button class="button"><font color="#aaffff" size="5">按钮</font></button></form><hr /></div><div id="container" style="background-color:#ffffff;width:100%;height:500px;float:center;"><h2 style="margin-bottom:0;text-align:center;background-color:#00ffff;"><font color="#00007f" size="6">关于本站！！！</font></h2><hr color="#0000FF"><p class="txt" style="margin-bottom:0;text-align:center;"><font color="#000000" size="4">当前版本：HT Webpage 6.0 Build6001</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="#A1A1C1"size="4">乱敲代码Pro</font><font color="#000000" size="4">协助开发</font></p><p class="txt" style="margin-bottom:0;text-align:center;"><font color="#000000" size="4">（未完成）</font></p></div><div id="container" style="background-color:#00ff00;width:100%;height:200px;float:center;"><b>菜单1</b><p>内容</p></div><div id="container" style="background-color:#c8c800;width:100%;height:200px;float:center;"><b>菜单2</b><p>内容</p></div><div id="container" style="background-color:#ff0000;width:100%;height:200px;float:center;"><b>菜单3</b><p>内容</p></div><div id="container" style="background-color:#00aaff;width:100%;height:200px;float:center;"><b>菜单4</b><p>内容</p></div><center><div id="container" style="width:100%;background-color:#000064;"><p style="margin-bottom:0;text-align:center;"><font color="white" size="2">HT Webpage | Made by HT</font></p></div></center></div></html>
由于代码未完成，现保留了大量后期可能会删除的保留性代码。
如果此代码在某些浏览器上有运行问题，请告诉我。
如果对内容有任何建议，请在评论区留言。
下期再见！
欢迎在评论区讨论！
本文共 566 个字数,平均阅读时长 ≈ 2分钟
评论 (0)