用 HTML+CSS+JavaScript 写一个靠左边导航栏页

滔滔

当设计一个靠左边的动态导航栏页面时，我们仍然会使用HTML来定义导航栏的结构，CSS来添加样式，JavaScript来实现动态效果。下面是一个示例，展示一个靠左边的动态导航栏页面：

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>靠左边动态导航栏页面</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="sidebar">
        <h1>动态导航栏</h1>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>

    <div class="content">
        <h2>欢迎来到动态导航栏页面</h2>
        <p>这是一个靠左边的动态导航栏页面示例。</p>
    </div>

    <script src="script.js"></script>
</body>
</html>

style.css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.sidebar {
    background-color: #333;
    color: #fff;
    width: 200px;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px;
}

.sidebar h1 {
    text-align: center;
    margin-bottom: 20px;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar li {
    margin-bottom: 10px;
}

.sidebar a {
    display: block;
    padding: 8px 15px;
    color: #fff;
    text-decoration: none;
}

.sidebar a:hover {
    background-color: #555;
}

.content {
    margin-left: 220px; /* 侧边栏宽度 + 左右间距 */
    padding: 20px;
}

.content h2 {
    margin-top: 0;
}

script.js:

// 可以添加一些交互效果的JavaScript代码，如果有需要的话。

在这个示例中，我们创建了一个靠左边的导航栏，导航栏位于页面的左侧，固定在页面上方。当用户在浏览器滚动页面时，导航栏始终保持在页面上方。

你可以在浏览器中打开index.html文件，查看这个靠左边的动态导航栏页面的效果。这只是一个简单的示例，你可以根据需求继续扩展导航栏的功能和样式。希望这个示例对你有所帮助！