» »

Простая в стиле страница ошибки 404 светлая


Простая в стиле страница ошибки 404 светлая

Всем привет! Сегодня я бы хотел Вам показать страницу ошибки 404. Здесь представлена светлая страница 404 в простом стиле. Также на ней можно заметить некоторые элементы дизайна, которые ее украшают, что под аналогичный цвет отлично подойдет. Как заметил тенденцию. сейчас редко кто ставит страницы с эффектами, так как долго загружается, а больше внимание отдают таким, так как здесь все понятно и быстро появится и если нужно выйти. то вы сделаете это быстро и окажетесь на самом ресурсе.

Данная страница добавит оригинальности Вашему WEB ресурсу и приятно удивит тех кто на неё попал.

Давайте приступим к установке:


  • 1 Создадим блокнот и назовём его 404.htm
  • 2 Открываем созданный файл через блокнот и вставляем туда данный код


Код
<!DOCTYPE html>
<html>
<head>
<title>Страница не найдена</title>
<meta name="robots" content="noindex" />
<style type="text/css">
html {height: 100%;}
body {height:100%;margin:0; padding:0;background:#FFF url('http://haker.ucoz.club/404/DOGGY.png') right bottom no-repeat ;}
div#table{display:table;width:100%;height:100%;}
div#row{display:table-row;width:100%;height:100%;}
div#cell{display:table-cell;height:100%;width:100%;vertical-align:middle;}
h1 {margin:0px;margin-bottom:30px;font-size:23px;font-weight:bold}
a {color:#27579E;text-decoration:none}
a:hover {color:#0E1D34;text-decoration:none}
.tx {width:700px;padding:10px;font-family:Tahoma;font-size:15px;color:#565656; margin: 0 auto;text-align:left;}
@media only screen and (max-width: 1000px) {body {background:#FFF !important}}
</style>
</head>

<body>
<div id="table">
<div id="row">
<div id="cell">
<div class="tx">
<h1>Ошибка 404</h1>
<p>Страница, на которую вы попали, не существует. Вы можете попробовать следующее:</p>
<p>- <a href="/">Перейти к главной странице сайта</a></p>
<p>- Проверить правильность введенного адреса</p>
<p>- Вернуться туда, откуда пришли (<b>нажать кнопку «Назад» в своем браузере</b>)</p>
</div>
</div>
</div>
</div>
</body>
</html>



  • 3 Сохраняем файл в кодировке UTF-8
  • 4 Загружаем файл 404.htm в корень Вашего файлового менеджера


Для тех кому лень возится в архиве готовый вариант.

Что делать с файлом в архиве?


  • 1 Распаковать в удобное для Вас место
  • 2 Загрузить в корень Вашего файлового менеджера




Шаблон является резиновым, но если Вы хотите сделать его под разные мониторы то можете попробовать.. Вот Вам пример:

Код
@media (max-width: 930px) { /* это будет показано при разрешении монитора до 930 пикселей */
  .content-wrapper {padding: 0;} /* основное содержимое занимает всё пространство окна */
}

@media (max-width: 930px) and (min-width: 470px) { /* для разрешения экрана от 470 до 930 пикселей */
  aside {position: static; width: 100%; background: #ccc;} /* боковая колонка смещается согласно расположению в HTML и меняет фон */
}

@media (max-width: 469px) { /* если максимальное разрешение экрана составит 469 пикселей */
  body {font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans-serif;} /* меняется шрифт */
  aside {display: none;} /* боковая колонка исчезает */
}


Вместо px лучше использовать em. Для чего значение px нужно разделить на значение font-size в px. Например, 1600/16=100, а именно media='(min-width: 100em)'.

CSS стили можно как непосредственно добавить в код страницы, так и воспользоваться внешним файлом, например:

Код
@media (max-width: 930px) { /* это будет показано при разрешении монитора до 930 пикселей */
  .content-wrapper {padding: 0;} /* основное содержимое занимает всё пространство окна */
}

@media (max-width: 930px) and (min-width: 470px) { /* для разрешения экрана от 470 до 930 пикселей */
  aside {position: static; width: 100%; background: #ccc;} /* боковая колонка смещается согласно расположению в HTML и меняет фон */
}

@media (max-width: 469px) { /* если максимальное разрешение экрана составит 469 пикселей */
  body {font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans-serif;} /* меняется шрифт */
  aside {display: none;} /* боковая колонка исчезает */
}


Вместо px лучше использовать em. Для чего значение px нужно разделить на значение font-size в px. Например, 1600/16=100, а именно media='(min-width: 100em)'.

CSS стили можно как непосредственно добавить в код страницы, так и воспользоваться внешним файлом, например:

Код
<link rel='stylesheet' href='URL_по_умолчанию.css' />
<link rel='stylesheet' media='(min-width: 1600px)' href='URL_большой.css' />
<link rel='stylesheet' media='(max-width: 1599px) and (min-width: 800px)' href='URL_средний.css' />
<link rel='stylesheet' media='(max-width: 799px)' href='URL_маленький_экран.css' />


Размещение экрана как "пейзаж" (ширина больше высоты) и "портрет" (ширина меньше высоты)

Код
@media all and (orientation:landscape) {
  /* стили для пейзажа */
}
@media all and (orientation:portrait) {
  /* стили для портрета */
}

или

Код
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">  
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">


Создай css файл, назови его, например resize.css, подключи к своей странице и напиши в него например:

Код

@media screen and (max-width: 1200px) {
   
}
   
@media screen and (max-width:992px) {
   
}
   
@media screen and (max-width: 768px) {
   
}
   
@media screen and (max-width:480px) {
   
}


Код я привел просто для примера. Здесь мы создаем медиазапросы с условием максимальной ширины браузера, и внутри каждого можно прописывать свои стили элементов в случае, если ширина браузера не более определенного количества пикселей.

Так же хотелось бы показать Вам как эта страница ошибки 404 будет выглядеть с другой картинкой. Ведь картинку Вы можете поменять под себя :-)





01.07.2016 Загрузок: 1 Просмотров: 433 Комментарий: (16)

Поделиться в социальных сетях

Материал разместил

Комментарий: 16
Kosten
Kosten 01.07.2016 18:191
0
Alkapone, рад тебя лицезреть, как всегда с оригинальным материалом, страницу только осталось адаптировать, хотя проверил и так пойдет, на ней же дизайн почти нет.
FeStemBer
FeStemBer 01.07.2016 18:242
0
Если нет адаптаций, почему бы не сделать, она не такая выйдет сложная, посмотрел, так с одной стороны можно не делать, кнопку видно, а с другой стороны, если сайт вы развиваете, то должно все быть нормально.
Kosten
Kosten 01.07.2016 18:433
0
Нормальная страница, на первый взгляд подумал на одном коде сделана, но демонстрацию переделал, и изображение можете свое тематическое поставить, так как идет ссылкой.
Alkapone
Alkapone 01.07.2016 19:457
0
Я похоже редко но метко :-)
Alkapone
Alkapone 01.07.2016 20:129
0
Точнее сказать я захожу когда у меня есть интересный материал smile
Сафрон
Сафрон 01.07.2016 18:504
0
Но здесь на сайте также простая стоит, но стилей больше и файлы, но зато поставил и все нормально на любой экране показывает. Это также нормальна, на ней можно еще поработать и сделать как вам нужно.
Kosten
Kosten 01.07.2016 19:275
0
Модно в места собаки поставить, какой то мем с удивлением, а что я здесь делаю.
Alkapone
Alkapone 01.07.2016 19:446
0
Если кто нибудь найдёт такой мем помогу поставить ;-) я пока искал эту нормальную собаку " пол интернета перерыл " )) она собственно тоже как удивление почти)
Alkapone
Alkapone 01.07.2016 19:478
0
Стилей тут собственно мало, и не грузит сайт лишним, т.е пользователю который на неё попадёт не придётся грузить мегабайты картинок и прочего :-) тут же всё просто и понятно, так же по желанию вместо описания можно добавить ссылки такие как " форум , блог, гостевая страница или страница файлов "
Kosten
Kosten 01.07.2016 20:1510
0
Да сейчас заметил. не ставят, там сильно крутые, ставят те, кто только создал сайт, и считает, что все должно выглядеть круто, хоть и не подходит, а здесь на любую тематику подойдет, а если еще картинку менять, можно специально под уникальности темы сделать.
Alkapone
Alkapone 01.07.2016 20:3511
0
Вот сделал ещё три, прикольно. Картинку уж точно может менять каждый под себя smile

ДЕМО - 1
ДЕМО - 2
ДЕМО - 3
Kosten
Kosten 01.07.2016 20:5812
0
Вот эти явно понятные, что забрел не туда.)
Сопрано
Сопрано 01.07.2016 21:5014
0
А можно сразу стили адаптаций написать на страницу?
Alkapone
Alkapone 01.07.2016 22:1315
0
Шаблон является резиновым, но если Вам так необходимо то можете попробовать.. Вот Вам пример:

Код
@media (max-width: 930px) { /* это будет показано при разрешении монитора до 930 пикселей */
   .content-wrapper {padding: 0;} /* основное содержимое занимает всё пространство окна */
}

@media (max-width: 930px) and (min-width: 470px) {  /* для разрешения экрана от 470 до 930 пикселей */
   aside {position: static; width: 100%; background: #ccc;} /* боковая колонка смещается согласно расположению в HTML и меняет фон */
}

@media (max-width: 469px) { /* если максимальное разрешение экрана составит 469 пикселей */
   body {font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans-serif;} /* меняется шрифт */
   aside {display: none;} /* боковая колонка исчезает */
}


Вместо px лучше использовать em. Для чего значение px нужно разделить на значение font-size в px. Например, 1600/16=100, а именно media='(min-width: 100em)'.

CSS стили можно как непосредственно добавить в код страницы, так и воспользоваться внешним файлом, например:

Код
@media (max-width: 930px) { /* это будет показано при разрешении монитора до 930 пикселей */
   .content-wrapper {padding: 0;} /* основное содержимое занимает всё пространство окна */
}

@media (max-width: 930px) and (min-width: 470px) {  /* для разрешения экрана от 470 до 930 пикселей */
   aside {position: static; width: 100%; background: #ccc;} /* боковая колонка смещается согласно расположению в HTML и меняет фон */
}

@media (max-width: 469px) { /* если максимальное разрешение экрана составит 469 пикселей */
   body {font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans-serif;} /* меняется шрифт */
   aside {display: none;} /* боковая колонка исчезает */
}


Вместо px лучше использовать em. Для чего значение px нужно разделить на значение font-size в px. Например, 1600/16=100, а именно media='(min-width: 100em)'.

CSS стили можно как непосредственно добавить в код страницы, так и воспользоваться внешним файлом, например:

Код
<link rel='stylesheet' href='URL_по_умолчанию.css' />
<link rel='stylesheet' media='(min-width: 1600px)' href='URL_большой.css' />
<link rel='stylesheet' media='(max-width: 1599px) and (min-width: 800px)' href='URL_средний.css' />
<link rel='stylesheet' media='(max-width: 799px)' href='URL_маленький_экран.css' />


Размещение экрана как "пейзаж" (ширина больше высоты) и "портрет" (ширина меньше высоты)

Код
@media all and (orientation:landscape) {
   /* стили для пейзажа */
}
@media all and (orientation:portrait) {
   /* стили для портрета */
}

или

Код
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">   
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">


Создай css файл, назови его, например resize.css, подключи к своей странице и напиши в него например:

Код

@media screen and (max-width: 1200px) {
  
}
  
@media screen and (max-width:992px) {
  
}
  
@media screen and (max-width: 768px) {
  
}
  
@media screen and (max-width:480px) {
  
}


Код я привел просто для примера. Здесь мы создаем медиазапросы с условием максимальной ширины браузера, и внутри каждого можно прописывать свои стили элементов в случае, если ширина браузера не более определенного количества пикселей.
Сопрано
Сопрано 01.07.2016 22:2616
0
Весьма благодарен, с меня плюс.
Kosten
Kosten 01.07.2016 21:0913
0
Реально как смотреться будет, можете посмотреть на демонстраций, что предоставил Alkapone, выше.

Первая:



Вторая:



Третья:

avatar