如何将此侧边栏应用到所有使用 CSS 的页面？
[英]How to apply this sidebar to all pages using CSS?
问题描述
I have 4 different html web pages.
我有 4 个不同的 html 网页。 The html code below is for a menubar which I want to apply to all four pages.下面的 html 代码是我想应用于所有四个页面的菜单栏。 Is there any way I can do this using CSS instead of copying/pasting this menubar html code on all 4 of my html web pages?有什么办法可以使用 CSS 而不是在我的所有 4 个 html 网页上复制/粘贴此菜单栏 html 代码吗？ Basically the four pages are Home, News, Contact, About.基本上这四个页面是主页、新闻、联系方式、关于。 Whenever someone clicks on a menubar item, it will redirect them to one of the 4 pages.每当有人点击菜单栏项目时，它会将他们重定向到 4 个页面之一。 And on all 4 of those pages, I want the menubar to be displayed.在所有 4 个页面上，我希望显示菜单栏。 I want to create a CSS file which I can just link all 4 pages to and then the menubar will be displayed (code below).我想创建一个 CSS 文件，我可以将所有 4 个页面链接到该文件，然后将显示菜单栏（下面的代码）。 Thanks in advance!提前致谢！
Is there any way I can create a CSS file which at least takes care of the styling?有什么方法可以创建一个至少负责样式的 CSS 文件？ And I will manually add the menubar buttons to each html page?我会手动将菜单栏按钮添加到每个 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>
4 个解决方案
解决方案1
6 已采纳 2016-01-16 02:20:41
You shouldn't/can't do this with CSS.你不应该/不能用 CSS 做到这一点。 You need either:您需要：
- For a non-programmatic solution: <link rel="import" href="sidebar.html"> save your sidebar in a sidebar.html file and call it with this snippet.-对于非编程解决方案： <link rel="import" href="sidebar.html">将侧边栏保存在sidebar.html文件中并使用此代码段调用它。Check out the support tables for this function.查看此功能的支持表。 (Deprecated) （已弃用）
- Use ES modules: Is there a way to use es6 modules to import html template into javascript?使用 ES 模块： 有没有办法使用 es6 模块将 html 模板导入 javascript？
- Use a template engine to produce the results you want.使用模板引擎生成您想要的结果。
- Include it with PHP like so:
<?php include 'sidebar.php'; ?>像这样将它包含在 PHP 中： <?php include 'sidebar.php'; ?><?php include 'sidebar.php'; ?>
There are more solutions, but these are the most obvious AFAIK.还有更多解决方案，但这些是最明显的 AFAIK。
解决方案2
1 2016-01-16 02:18:09
You cannot achieve this with HTML and CSS only.仅使用 HTML 和 CSS 无法实现此目的。 If you have PHP server then, I suggest to create a PHP file and put your nav-bar code and then use the following PHP code in the all pages.如果你有 PHP 服务器，我建议创建一个 PHP 文件并放置你的导航栏代码，然后在所有页面中使用以下 PHP 代码。
<?php include 'nav.php'; ?>
Here is the code for 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>';
?>
解决方案3
1 2016-01-16 02:18:31
Not with CSS, you have following options:不使用 CSS，您有以下选项：
Use web component and javascript (1) to load it.
使用 web component 和 javascript (1)加载它。Jade template engine which is a language for writing HTML templates, produces HTML and supports dynamic code with the support for reusability (DRY), it gives you the ability to include (2) partial HTML files in
.jadewith this commandJade 模板引擎是一种用于编写 HTML 模板的语言，可生成 HTML 并支持动态代码并支持可重用性 (DRY)，它使您能够使用此命令在.jade中包含(2) 个部分 HTML 文件include./path/to/sidebar.jadeExample from Jade:
玉的例子：//- index.jade doctype html html include./includes/head.jade body h1 My Site p Welcome to my super lame site. include./includes/foot.jadeServer-Side solution like PHP or ASP.NET.
服务器端解决方案，如 PHP 或 ASP.NET。
-------------------------------------------------------------------------- ---------------------------------------------- ----------------------
(1) http://webcomponents.org/ (1) http://webcomponents.org/
(2) http://jade-lang.com/reference/includes/ (2) http://jade-lang.com/reference/includes/
解决方案4
1 2016-01-16 02:19:20
There is no way to do that by css, html is in charge of the elements and css only of styling them, you can't create elements by css.没有办法通过 css 做到这一点，html 负责元素，而 css 只负责样式化，你不能通过 css 创建元素。 I suggest you to copy and paste the code.我建议您复制并粘贴代码。 Or look for other tools, populate it with js, php or something.或者寻找其他工具，用 js、php 或其他东西填充它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.