W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 200px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; padding-top: 20px; } .sidenav a { padding: 6px 6px 6px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; } .sidenav a:hover { color: #f1f1f1; } .main { margin-left: 200px; /* 与 sidenav 同宽 */ } @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>该导航栏会始终显示。</p> </div> </body> </html>