菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码：
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS 带搜索导航栏 - 带提交按钮</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {font-family:"Lato", sans-serif;} .sidenav {width:130px;position:fixed;z-index:1;top:20px;left:10px;background:#eee;overflow-x:hidden;padding:8px 0;} .sidenav a {padding:6px 8px 6px 16px;text-decoration:none;font-size:25px;color:#2196F3;display:block;} .sidenav a:hover {color:#064579;} .main {margin-left:140px; /* 与sidenav的宽度相同 */font-size:28px; /* 字体放大，让页面可滚动 */padding:0px 10px;} @media screen and (max-height:450px) { .sidenav {padding-top:15px;} .sidenav a {font-size:18px;} } </style> </head> <body> <div class="sidenav"> <a href="#about">关于我们</a> <a href="#services">服务项目</a> <a href="#clients">客户信息</a> <a href="#contact">联系方式</a> </div> <div class="main"> <h2>侧栏</h2> <p>此侧边栏为全高（100％）并始终显示。</p> <p>向下滚动页面查看结果。</p> <pre> 侠客行 作者：李白 赵客缦胡缨，吴钩霜雪明。 银鞍照白马，飒沓如流星。 十步杀一人，千里不留行。 事了拂衣去，深藏身与名。 闲过信陵饮，脱剑膝前横。 将炙啖朱亥，持觞劝侯嬴。 三杯吐然诺，五岳倒为轻。 眼花耳热后，意气素霓生。 救赵挥金槌，邯郸先震惊。 千秋二壮士，烜赫大梁城。 纵死侠骨香，不惭世上英。 谁能书阁下，白首太玄经。 </pre> </div> </body> </html>
运行结果