Публикации из категории ‘html’

Простой прелоадер загрузки для сайта

Август 7th, 2019

HTML-код вставить после открывающегося тэга <body>:

<!-- Блок, который будет отображаться над страницей -->
<div id="before-load">
  <!-- Иконка Font Awesome -->
  <i class="fa fa-spinner fa-spin"></i>
</div>

Код для таблицы стилей CSS:

#before-load {
  position: fixed; /*фиксированное положение блока*/
  left: 0; /*положение элемента слева*/
  top: 0; /*положение элемента сверху*/
  right: 0; /*положение элемента справа*/
  bottom: 0; /*положение элемента снизу*/
  background: #fff; /*цвет заднего фона блока*/
  z-index: 1001; /*располагаем его над всеми элементами на странице*/
}
#before-load i {
  font-size: 70px; /*размер иконки*/
  position: absolute; /*положение абсолютное, позиционируется относительно его ближайшего предка*/
  left: 50%; /*слева 50% от ширины родительского блока*/
  top: 50%; /*сверху 50% от высоты родительского блока*/
  margin: -35px 0 0 -35px; /*смещение иконки, чтобы она располагалась по центру*/
}

Код, скрывающий прелоадер после загрузки сайта, размещаем внизу страницы:

<script>
$(window).load(function() {
  $('#before-load').find('i').fadeOut().end().delay(400).fadeOut('slow');
});
</script>

html заглушка

Апрель 18th, 2019

Чтоб каждый раз не писать решил сохранить.

<!DOCTYPE HTML>

<html>
	<head>
		<title>Заглушка</title>
		<meta charset="utf-8" />
	</head>
	<body>

				<h1>Тест</h1>
				<p>Совсем скоро тут появится сайт</p>
			
	</body>
</html>

Кнопка распечатать на сайт

Апрель 20th, 2018

Вставляем в head, скрываем всё что необходимо:

 <style type="text/css">
    @media print {
      #printbutton { display:none; } /* ID того что необходимо скрыть */
      #footer { display:none; }
    }
  </style>

Сама кнопка:

<button id="printbutton" class="button" onclick="javascript: print();">Печать</button>

Специальные символы HTML

Апрель 16th, 2011

Специальные html символы
В таблице представлены символы HTML, может кому пригодится. Читать далее »