Question

我有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>

Answer 1

你不应该/不能用CSS做这件事。你需要：

对于非程序化解决方案： sidebar.html将您的侧边栏保存在<?php include 'sidebar.php'; ?>文件中并使用此代码段调用它。查看此功能的support tables。
将它包含在PHP中，如下所示：['undefined1','undefined2']

还有更多解决方案，但这些是最明显的AFAIK。

Answer 2

仅使用HTML和CSS无法实现此目的。如果您有PHP服务器，我建议创建一个PHP文件并放入导航条代码，然后在所有页面中使用以下PHP代码。

<?php include 'nav.php'; ?>

以下是nav.php的代码：

<?php
echo 
'<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>';
?>

Answer 3

不使用CSS，您有以下选项：

使用网络组件和javascript ^（1）加载它。
Jade template engine这是一种用于编写HTML模板的语言，可生成HTML并支持动态代码并支持可重用性（DRY），它使您能够包含^（2） .jade中使用此命令的部分HTML文件
```
include ./path/to/sidebar.jade
```
来自Jade的例子：
```
//- index.jade
doctype html
html
  include ./includes/head.jade
body
  h1 My Site
  p Welcome to my super lame site.
  include ./includes/foot.jade
```
服务器端解决方案，如PHP或ASP.NET。

----------------------------------------------- ---------------------------

^（1） http://webcomponents.org/

^（2） http://jade-lang.com/reference/includes/

Answer 4

css无法做到这一点，html负责元素和css只有造型，你不能用css创建元素。我建议你复制并粘贴代码。或者寻找其他工具，用js，php或其他东西填充它。

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

4 个答案:

----------------------------------------------- ---------------------------