Простой HTML-вопрос, чтобы предупредить сотрудников, что они находятся в разработке, а не в разработке

#html

Вопрос:

Этот скрипт отображает статическое сообщение в нашей системе разработки, когда вы входите в систему разработки. У нас есть сотрудники и программы, которые все еще работают с бумагой. Некоторые из них не знают, как не вводить живую работу в систему разработки, это случалось несколько раз. Мы обучаемся в dev, поэтому нам нужен сценарий предупреждения, когда вы входите в dev. Я придумал это:

 <br /><span style="color:red; font-size:36px;">Development System</span>
 

Я хочу добавить больше предупреждений или каких-либо идей, чтобы действительно привлечь их внимание.

Комментарии:

1. В чем вопрос?

2. Я голосую за то, чтобы закрыть этот вопрос, потому что это (широкий) вопрос UX, а не проблема программирования.

Ответ №1:

Если вы действительно хотите привлечь внимание, вы также можете обернуть этот текст в div, а не в промежуток, и сделать фон красным.

Попробуйте это:

 <div class="dev-env-warning" >Development System</div>
 
 .dev-env-warning {
  width: 100%;
  text-align: center;
  color: white;
  font-size: 30px;
  background: red;
  padding: 10px;
}
 

Это отобразит большой красный баннер, занимающий всю ширину страницы.

УСТАРЕЛО, см. правку: Если вы действительно хотите, чтобы это было видно, вы даже можете обернуть «Систему разработки» в тег мигания, например :

 <div class="dev-env-warning" ><blink>Development System</blink></div>
 

Не очень красиво, но бросается в глаза наверняка.

РЕДАКТИРОВАТЬ: <blink/> тег устарел, как сказал Накарукатоши Узумаки в комментариях. Вот более новое решение CSS, которое должно быть совместимо с большинством браузеров:

 @-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
.blink{
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-direction: alternate;
}
 

Таким образом, вы можете просто вставить этот код в свой css и добавить класс .blink в область, содержащую текст.

Комментарии:

1. Просто не используйте тег <мигать><мигать> .

2. Очень верно, только что понял, что это устарело, я отредактирую ответ