时间戳

首页 > 解决方案 > 如何在 CSS 或 Javascript 中的所有页面上添加通知？

javascript - 如何在 CSS 或 Javascript 中的所有页面上添加通知？

问题描述

我有这个存档的 HTML 页面，虽然不想更改内容，但想添加一条通知：

此内容不再更新。请访问http://newdomain.com了解更多信息。这是为历史目的而保留的档案材料，已被冻结。

这是代码：

<TITLE>My Page</TITLE>
<style>
body {
font-family: Verdana, sans-serif;
font-size: 14px;
line-height: 18px;
background: #FFFFFF;
}
a {
text-decoration: none;
color: red;
}
div.sidebar {
background-color: yellow;
padding: 4px solid;
float: left;
height: 600px;
width: 110px;
}
div.content {
width: 430px;
height: 600px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
border: 1.5px solid;
}
div.content p {
font-size: 13px;
padding: 20px;
}
div.content img {
margin-left: 20px;
height: 90px;
}
</style>

<div class="sidebar">
<ul>
<li><a href="11.htm">About Us</a></li>
<li><a href="12.htm">Contact Us</a></li>
<li><a href="bestof2008.html">Best of 2008</a></li>
</div>
<div class="content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Derbyshire_flag.svg/1024px-Derbyshire_flag.svg.png">
<h1>Yourlocal.com</h1>
<h2>Welcome to our site</h2>
<h3>See the sidebar for regional content</h3>
<P>This is our website. More content soon, for the East Midlands region of England; we cover Leicestershire, Derbyshire and Nottinghamshire.</p>
</div>

它采用纯 HTML 格式，位于单独的目录中；请注意，出于隐私原因，上述内容已更改。

根据网站所有者的意愿，由于历史原因，我无法更改信息（可能除了通知的样式表，仅此而已），因此只能使用 HTML 或 Javascript 解决方案；没有 PHP，因为所有文件都以 .htm 或 .html 扩展名（站点的移动主机）存储。

CSS中有没有办法将该通知放在每个页面上方的黄色背景框中？

一般来说，我如何申请这样的通知？我已经尝试过 Google-ing，但如果不编辑每一页，我还没有找到可行的解决方案。

标签： javascripthtmlcss

解决方案

您可以添加一个伪元素<body>并设置它的样式以模仿您的黄色背景通知框。这样，您不必显式地将 HTML 添加到每个页面，但 CSS 会为每个页面创建通知框。

body::before {
  content: "This content is not updated any longer. Please see http://newdomain.com for more information. This is archive material retained for historical purposes and is frozen.";
  height: 100%;
  background: yellow;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
<TITLE>My Page</TITLE>
<style>
body {
font-family: Verdana, sans-serif;
font-size: 14px;
line-height: 18px;
background: #FFFFFF;
}
a {
text-decoration: none;
color: red;
}
div.sidebar {
background-color: yellow;
padding: 4px solid;
float: left;
height: 600px;
width: 110px;
}
div.content {
width: 430px;
height: 600px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
border: 1.5px solid;
}
div.content p {
font-size: 13px;
padding: 20px;
}
div.content img {
margin-left: 20px;
height: 90px;
}
</style>

<div class="sidebar">
<ul>
<li><a href="11.htm">About Us</a></li>
<li><a href="12.htm">Contact Us</a></li>
<li><a href="bestof2008.html">Best of 2008</a></li>
</div>
<div class="content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Derbyshire_flag.svg/1024px-Derbyshire_flag.svg.png">
<h1>Yourlocal.com</h1>
<h2>Welcome to our site</h2>
<h3>See the sidebar for regional content</h3>
<P>This is our website. More content soon, for the East Midlands region of England; we cover Leicestershire, Derbyshire and Nottinghamshire.</p>
</div>

推荐阅读