主页
CSS
CSS 布局模板
trycss_template4
运行 ❯
×
更改方向
保存代码
更改主题
<!DOCTYPE html> <html lang="en"> <head> <title>CSS 模板</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; } /* 样式侧边导航 */ .sidenav { height: 100%; width: 200px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; } /* 侧面导航链接 */ .sidenav a { color: white; padding: 16px; text-decoration: none; display: block; } /* 悬停时改变颜色 */ .sidenav a:hover { background-color: #ddd; color: black; } /* 样式化内容 */ .content { margin-left: 200px; padding-left: 20px; } </style> </head> <body> <div class="sidenav"> <a href="#">链接</a> <a href="#">链接</a> <a href="#">链接</a> </div> <div class="content"> <h2>CSS 模板</h2> <p>一个全高的、固定的侧边导航和内容。</p> </div> </body> </html>