如何使用CSS将此侧边栏应用于所有页面？

Question

如何使用CSS将此侧边栏应用于所有页面？

我有4个不同的html网页.下面的html代码适用于我想要应用于所有四个页面的菜单栏.有没有办法可以使用CSS而不是在我的所有4个html网页上复制/粘贴这个菜单栏HTML代码？基本上这四页是Home,News,Contact,About.只要有人点击菜单栏项目,它就会将它们重定向到4个页面中的一个.在所有这四个页面中,我希望显示菜单栏.我想创建一个CSS文件,我可以将所有4个页面链接到,然后将显示菜单栏(下面的代码).提前致谢!

有什么办法可以创建一个至少可以处理样式的CSS文件吗？我会手动将菜单栏按钮添加到每个html页面？

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="page1.html">Home</a></li>
  <li><a href="page2.html">News</a></li>
  <li><a href="page3.html">Contact</a></li>
  <li><a href="page4.html">About</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">

</div>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Fau*_* NA 5

你不应该/不能用CSS做到这一点.你需要:

对于非程序化解决方案: <link rel="import" href="sidebar.html">将侧边栏保存在sidebar.html文件中并使用此代码段调用它.查看此功能的支持表.
像这样用PHP包括它: <?php include 'sidebar.php'; ?>

有更多的解决方案,但这些是最明显的AFAIK.

@FaustoNA，如果您不介意，您能否在答案中补充说，目前对 html 导入的支持很糟糕，而 chrome 是唯一支持它的主要浏览器？ (2认同)

归档时间：	9 年，9 月前
查看次数：	2436 次
最近记录：	9 年，9 月前