根据宽度决定内容的行数，适应手机端和PC端，便于开发；
使用Table+iframe实现页面快速跳转。
效果图：移动端
Index.html
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" type="text/css" href="../APP.css" /><title></title></head><body><script>var isFHD = screen.width > 679 ? true : false;(function() {if (isFHD) {window.location = "Pc-Home.html";} else {window.location = "Phone-Home.html";}})()</script></body></html>
Pc-Home.html
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" type="text/css" href="../APP.css" /><title></title><style type="text/css">li {background-color: #409E99;}p {padding: 20px;transform: scale(0.8);white-space: nowrap;}a {width: 100%;}</style></head><body><table border="1" cellspacing="1" cellpadding="1" style="width: 100%;height: 100vh;"><thead><tr><th colspan="2" style="height: 10vh;background-color: #fff;"><div style="display: flex;justify-content: space-around;align-items: center;"><img src="../IMG/ACM.jpg" style="height: 10vh;"><p style="line-height: 10vh;">ACM社团报名系统</p></div></th></tr></thead><tbody><tr><td style="width: 10%;text-align: center;height: 100%;background-color: aliceblue;"><ul style="overflow-y: scroll;height: 100%;"><a href="1.html" target="content"><li><p>ACM社团</p></li></a><a href="2.html" target="content"><li><p>单人赛</p></li></a><a href="1.html" target="content"><li><p>团队赛</p></li></a><a href="2.html" target="content"><li><p>我的比赛</p></li></a><a href="2.html" target="content"><li><p>荣誉墙</p></li></a><a href="2.html" target="content"><li><p>退出登录</p></li></a></ul></td><td style="width: 90%;background-color: blanchedalmond;"><iframe name="content" src="1.html"style="width: 100%;height: 100%;border: none;background-color: #ccc;"></iframe></td></tr></tbody><tfoot><tr><td colspan="2" style="height: 8.4vh;background-color: #fff;"><p>页脚</p></td></tr></tfoot></table></body></html>
Phone-Home.html
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" type="text/css" href="../APP.css" /><title></title><style type="text/css">li {padding: 10px;background-color: #409E99;}p {white-space: nowrap;}a {width: 100%;}</style></head><body><table border="1" cellspacing="1" cellpadding="1" style="width: 100%;height: 100vh;"><thead><tr><th colspan="2" style="height: 10vh;background-color: #fff;"><div style="display: flex;justify-content: space-around;"><img src="../IMG/ACM.jpg" style="height: 10vh;"><p style="line-height: 10vh;">ACM后台管理系统</p></div></th></tr></thead><tbody><tr><td style="text-align: center;background-color: aliceblue;height: 1px;"><ul style="overflow-y: scroll;display: flex;justify-content: space-between;"><a href="1.html" target="content"><li><p>ACM社团</p></li></a><a href="2.html" target="content"><li><p>荣誉墙</p></li></a><a href="1.html" target="content"><li><p>退出登录</p></li></a></ul></td></tr><tr><td style="text-align: center;background-color: aliceblue;height: 1px;"><ul style="overflow-y: scroll;display: flex;justify-content: space-between;"><a href="1.html" target="content"><li><p>单人赛</p></li></a><a href="2.html" target="content"><li><p>团队赛</p></li></a><a href="1.html" target="content"><li><p>我的比赛</p></li></a></ul></td></tr><tr><td style="width: 100%;"><iframe name="content" src="1.html"style="width: 100%;height: 100%;border: none;background-color: #fff;"></iframe></td></tr></tbody><tfoot><tr><td colspan="2" style="height: 8.4vh;background-color: #fff;"><div style="display: flex;justify-content: center;align-items: center;"><img src="../IMG/WeYoung.png" style="height: 4vh;border-radius: 50%;"><p style="line-height: 10vh;">由WeYoung工作室提供技术支持</p></div></td></tr></tfoot></table></body></html>
2.html（主要内容页面）
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" type="text/css" href="../APP.css" /><title></title><style type="text/css">p {margin: 0.5%;padding: 0.5%;background-color: #f9f9f9;}p:nth-child(odd) {background-color: #f5f5f5;}@media screen and (min-width:0px) and (max-width:679px) {p {width: 98%;height: 20vh;word-break: break-all;}}@media screen and (min-width:680px) and (max-width:1280px) {p {width: 48%;height: 20vh;word-break: break-all;}}@media screen and (min-width:1281px) {p {width: 31.33%;height: 20vh;word-break: break-all;}}/*@media screen and (min-device-width:0px) and (max-device-width:679px) {p {width: 98%;height: 20vh;word-break: break-all;}}@media screen and (min-device-width:680px) and (max-device-width:1280px) {p {width: 48%;height: 20vh;word-break: break-all;}}@media screen and (min-device-width:1281px) {p {width: 31.33%;height: 20vh;word-break: break-all;}}*/#APP {display: flex;flex-wrap: wrap;justify-content: flex-start;}</style></head><body><div id="APP"><p>比赛名字：-12-12 16:00:00</p><p>比赛名字：-12-12 16:00:00</p><p>比赛名字：-12-12 16:00:00</p><p>比赛名字：-12-12 16:00:00</p><p>比赛名字：-12-12 16:00:00</p><p>比赛名字：-12-12 16:00:00</p><p>比赛名字：-12-12 16:00:00</p></div></body></html>
APP.js（全局js）
* {padding: 0;margin: 0;font-size: small;}::-webkit-scrollbar {width: 1px;}::-webkit-scrollbar-track {-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);border-radius: 10px;}::-webkit-scrollbar-thumb {border-radius: 10px;background: rgba(0, 0, 0, 0.1);-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);}::-webkit-scrollbar-thumb:window-inactive {background: rgba(255, 0, 0, 0.4);}a {text-decoration: none;text-align: center;color: black;}a:hover {color: #FFF;background-color: #FF0000;}a:focus {color: #fff;}li {list-style: none;}li:hover {background-color: #409E70;transition: all 500ms;}
