Простая в стиле страница ошибки 404 светлая
 | |
| Всем привет! Сегодня я бы хотел Вам показать страницу ошибки 404. Здесь представлена светлая страница 404 в простом стиле. Также на ней можно заметить некоторые элементы дизайна, которые ее украшают, что под аналогичный цвет отлично подойдет. Как заметил тенденцию. сейчас редко кто ставит страницы с эффектами, так как долго загружается, а больше внимание отдают таким, так как здесь все понятно и быстро появится и если нужно выйти. то вы сделаете это быстро и окажетесь на самом ресурсе. Данная страница добавит оригинальности Вашему WEB ресурсу и приятно удивит тех кто на неё попал. Давайте приступим к установке:
Код <!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>
Для тех кому лень возится в архиве готовый вариант. Что делать с файлом в архиве?
 Шаблон является резиновым, но если Вы хотите сделать его под разные мониторы то можете попробовать.. Вот Вам пример: Код @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 будет выглядеть с другой картинкой. Ведь картинку Вы можете поменять под себя :-)    | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 16 | |
|
| |
