说明：左边是菜单栏，右边是常用连接，采用纯js+css+html实现，整了一上午，需要使用的帮忙点个赞，使用浏览器打开可以直接使用，定位通过href="#Id"实现。
实现效果
代码
<!DOCTYPE html>
<html lang="en">
<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">
<title>常用导航栏</title>
<!--打开新窗口-->
<base target="_blank"/>
<style>
body {
background: #6a9617;
}
li {
height: 26px;
text-align: center;
line-height: 26px;
color: #030a02;
font-size: 16px;
margin-top: 10px;
cursor: pointer;
list-style: none;
font-weight: bold;
}
li:hover {
background-color: #81ba28;
}
.tableHref {
width: 1019px;
}
td {
width: 204px;
height: 30px;
}
a {
font-size: 16px;
color: #2fa396;
}
a:hover {
background-color: #81ba28;
}
a:link {
text-decoration: none;
}
#header {
width: 1300px;
background-color: #6a9617;
}
#menu {
background-color: #6a9617;
height: 2000px;
width: 200px;
float: left;
position: fixed;
}
#content {
margin-top: 0px;
background-color: #d0d0d0;
height: 100%;
width: 1100px;
margin-left: 200px;
float: left;
}
strong {
display: block;
font-size: 20px;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
text-align: left;
}
</style>
</head>
<body>
<div id="container" style="width:1300px">
<!--主要的网页标题-->
<div id="header">
<h2 style="text-align: center;margin: 0 0 0 0">导航栏地址</h2>
</div>
<!--菜单-->
<div id="menu" class="menu">
<ul>
<li onclick="GetPos('quickTools')">
常用工具地址
</li>
<li onclick="GetPos('quickUrl')">
常用链接地址
</li>
<li onclick="GetPos('quickConfig')">
常用配置参考
</li>
<li onclick="GetPos('codeWarehouse')">
在线代码仓库
</li>
<li onclick="GetPos('linuxClone')">
LINUX克隆
</li>
<li onclick="GetPos('otherUrl')">
其他链接
</li>
</ul>
</div>
<!--内容-->
<div id="content" class="content">
<div class="right">
<table class="tableHref" id="quickTools">
<tr><strong>常用工具地址</strong></tr>
<tr>
<td>
<a href="https://tool.lu/timestamp/">
时间戳转换
</a>
</td>
<td><a href="https://www.linuxcool.com/">
Linux命令大全
</a></td>
<td><a href="http://hemin.cn/jq/">
jQuery 速查表
</a></td>
<td><a href="https://tool.lu/hexconvert/">
进制转换
</a></td>
<td><a href="https://tool.lu/ip/">
IP地址查询
</a></td>
</tr>
<tr>
<td>
<a href="https://tool.lu/base64image/">
图片base64编码
</a>
</td>
<td><a href="https://tool.lu/coderunner/">
在线代码测试
</a></td>
<td><a href="https://text-compare.com/zh-hans/">
在线文本对比
</a></td>
<td><a href="https://tool.oschina.net/regex/">
正则表达式测试
</a>
</td>
<td><a href="https://tool.lu/urlconvert/">
下载链接转换工具
</a></td>
</tr>
<tr>
<td>
<a href="http://cal.apple886.com/">
网上计算器
</a>
</td>
<td>
<a href="https://tool.lu/curl/">
curl命令转代码
</a></td>
<td><a href="https://tool.lu/zhconvert">
中文简繁体转换
</a></td>
<td><a href="https://tool.gaodun.com/rmb.html">
数字大写转换器
</a>
</td>
<td><a href="https://cli.im/">
二维码制作工具
</a></td>
</tr>
<tr>
<td>
<a href="https://tool.lu/encdec/">
加密解密
</a>
</td>
<td>
<a href="https://tool.lu/crontab">
Cron表达式
</a></td>
<td><a href="https://pixlr.com/cn/x/">
在线PS
</a></td>
<td><a href="http://favorites.ren/">
在线收藏网址
</a>
</td>
<td><a href="https://cloudconvert.com/">
文件格式转换
</a></td>
</tr>
<tr>
<td>
<a href="https://www.eteste.com/">
字数统计
</a>
</td>
<td><a href="https://convertio.co/zh/">
文件格式转换
</a></td>
<td><a href="https://mp.weixin.qq.com/">
公众号
</a></td>
<td><a href="http://favorites.ren/"> </a></td>
<td><a href="https://cli.im/"></a></td>
</tr>
</table>
<table class="tableHref" id="quickUrl">
<tr><strong>常用链接地址</strong></tr>
<tr>
<td>
<a href="https://www.runoob.com/">菜鸟教程</a>
</td>
<td><a href="https://translate.google.cn/">
谷歌翻译
</a></td>
<td>
<a href="https://fanyi.baidu.com/?aldtype=16047#auto/zh">百度翻译</a>
</td>
<td><a href="https://blog.csdn.net/qq_36135928/article/details/90348725">IDEA最全配置</a></td>
<td><a href="https://blog.csdn.net/nuoyanli/article/details/86503686">VMware15安装centos7</a>
</td>
</tr>
<tr>
<td>
<a href="https://fanyi.baidu.com/?aldtype=16047#auto/zh">百度翻译</a>
</td>
<td><a href="https://www.cnblogs.com/hackyo/p/10677288.html">maven设置阿里仓库</a></td>
<td><a href="https://blog.csdn.net/qq_36135928/article/details/90348725">IDEA最全配置</a></td>
<td><a href="https://blog.csdn.net/nuoyanli/article/details/86503686">VMware15安装centos7</a>
</td>
<td><a href="http://www.ityouknow.com/">纯洁的微笑个人网站</a></td>
</tr>
</table>
<table class="tableHref" id="quickConfig">
<strong>常用配置参考</strong>
<tr>
<td>
<a href="https://archive.apache.org/dist/maven/maven-3/">maven下载</a>
</td>
<td><a href="https://www.cnblogs.com/hackyo/p/10677288.html">maven配置阿里仓库</a></td>
<td><a href="https://blog.csdn.net/qq_36135928/article/details/90348725">IDEA最全配置</a></td>
<td><a href="https://blog.csdn.net/nuoyanli/article/details/86503686">VMware15安装centos7</a>
</td>
<td><a href="https://blog.csdn.net/u013124587/article/details/50444220">装完Centos7提示Initial
setup of CentOS Linux 7</a></td>
</tr>
<tr>
<td>
<a href="https://blog.csdn.net/qq_36769100/article/details/71473632">linux不显示IP或者只显示127.0.0.1</a>
</td>
<td><a href="https://www.cnblogs.com/hackyo/p/10677288.html">maven配置阿里仓库</a></td>
<td><a href="https://blog.csdn.net/qq_36135928/article/details/90348725">IDEA最全配置</a></td>
<td><a href="https://blog.csdn.net/nuoyanli/article/details/86503686">VMware15安装centos7</a>
</td>
<td><a href="https://blog.csdn.net/u013124587/article/details/50444220"></a></td>
</tr>
</table>
<table class="tableHref" id="codeWarehouse">
<strong>在线代码仓库</strong>
<tr>
<td>
<a href="https://gitee.com/">码云</a>
</td>
<td><a href="https://www.githubs.cn/">GitHub中文社区</a></td>
<td><a href="https://mvnrepository.com/">MAVEN仓库中心</a></td>
<td><a href="">文字描述</a></td>
<td><a href="">文字描述</a></td>
</tr>
</table>
<table class="tableHref" id="linuxClone">
<strong>LINUX克隆</strong>
<tr>
<td>
<a href="https://www.cnblogs.com/maobuji/p/7307298.html">centos7-vmware克隆后的配置</a>
</td>
<td><a href="https://blog.csdn.net/the_victory/article/details/79604586">
CentOS7克隆网络配置<br/>( restart network解决方法)
</a>
</td>
<td><a href="https://blog.csdn.net/qq_36135928/article/details/90348725">IDEA最全配置</a></td>
<td><a href="https://blog.csdn.net/nuoyanli/article/details/86503686">VMware15安装centos7</a>
</td>
<td><a href="https://blog.csdn.net/u013124587/article/details/50444220">装完Centos7提示Initial
setup of CentOS Linux 7</a></td>
</tr>
</table>
<table class="tableHref" id="otherUrl">
<strong>其他链接</strong>
<tr>
<td>
<a href="https://gitee.com/">码云</a>
</td>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href=""></a></td>
</tr>
</table>
</div>
</div>
<div id="footer" style="background-color:#6a9617;clear:both;text-align:center;">
版权 © runoob.com
</div>
</div>
</body>
<script>
//获取某个html元素的定位
function GetPos(obj) {
location.href = "#"+obj;
}
</script>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
