Как добавить уведомление на все страницы в CSS или Javascript?

ProgramBox

Как добавить уведомление на все страницы в CSS или Javascript?

Post author:admin
Запись опубликована:23 ноября, 2022
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть эта архивированная 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, но не нашел работоспособного решения без редактирования каждой страницы.

1. Было бы намного проще просто добавить по одному <div> на каждую страницу для окна уведомления и оформить его. Но одним из способов взлома может быть создание псевдоэлемента <body> , поскольку на каждой странице будет <body> тег (а если нет, браузер автоматически сгенерирует его вместе с <html> and <head> )

Ответ №1:

Вероятно, вы можете использовать ::before псевдоэлемент CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/::before

В этом примере CSS будет создан псевдоэлемент, который станет первым дочерним элементом тега body.

 body::before {
  display: block;
  width: 100%;
  background-color: yellow;
  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.";
}

Ответ №2:

Вы можете добавить псевдоэлемент в <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>

Развернуть фрагмент

Ответ №3:

Чтобы украсть идею Таннера Долби, вы можете использовать псевдоэлемент для добавления текста на каждую страницу без изменения разметки (при условии, что каждая страница уже содержит a <link> в той же таблице стилей). Этот баннер не может содержать ссылку, только текст. Если вы хотите включить в баннер интерактивную ссылку, вы должны каким-то образом изменить разметку страницы.

Попробуйте добавить это в общую таблицу стилей:

 body {
  padding-top: 5rem;
}
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.';
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 3rem;
  padding: 1rem 1.5rem;
  line-height: 1.5rem;
  color: #000;
  background-color: #eabe3b;
  font-size: 1.2rem;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',sans-serif;
}