菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码：
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <style> body {margin:0;} .navbar {overflow:hidden;background-color:#333;position:fixed;bottom:0;width:100%;} .navbar a {float:left;display:block;color:#f2f2f2;text-align:center;padding:14px 16px;text-decoration:none;font-size:17px;} .main {padding:16px;margin-top:30px;height:1500px; /* Used in this example to enable scrolling */} </style> <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> <div class="main"> <h1>Fixed Top Menu</h1> <h2>Scroll this page to see the effect</h2> <h2>The navigation bar will stay at the top of the page while scrolling</h2> <p>侠客行</p> <p>作者：李白 <p>赵客缦胡缨，吴钩霜雪明。</p> <p>银鞍照白马，飒沓如流星。</p> <p>十步杀一人，千里不留行。</p> <p>事了拂衣去，深藏身与名。</p> <p>闲过信陵饮，脱剑膝前横。</p> <p>将炙啖朱亥，持觞劝侯嬴。</p> <p>三杯吐然诺，五岳倒为轻。</p> <p>眼花耳热后，意气素霓生。</p> <p>救赵挥金槌，邯郸先震惊。</p> <p>千秋二壮士，烜赫大梁城。</p> <p>纵死侠骨香，不惭世上英。</p> <p>谁能书阁下，白首太玄经。</p> </div> </body> </html>
运行结果