Страница 404 HTML с адаптивным дизайном
 | |
| Страница с 404 ошибкой считается одним из самых важных элементов в стилистике сайта, которая должна быть адаптивной под разный размеры экранов. И здесь в данной статье предложена простая по дизайну адаптивная 404 HTML-страница, где можно поставить под любую тематику, но, а также выставить аналогичный оттенок цвета под фон, который будет соответствовать основному стилю сайта. Это больше статья для разъяснения, где спрашивают, ставить страницу оригинальную или оставить, ту которая уже идет по умолчанию. То здесь вам решать, так как тематические порталы в своей основе стараются поставить свою уникальную страницу, что соответствует направлению тематике. Этот дизайн свят для того, что его можно самостоятельно дополнить, ведь вся палитра цвета находится в прикрепленном CSS. Так выглядит на разных размерах по ширине:  Переходим к установочному процессу: HTML Код <html><head> <title>404 – страница не найдена</title> <meta charset="utf-8"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700&subset=latin,cyrillic" rel="stylesheet" type="text/css"> <style type="text/css"> html, body {width:100%;height:100%;overflow:hidden;margin:0px;padding:0px;font-family:'Open Sans',sans-serif;font-size: 17px;color: #97d2e8;} body {background:url('http://zornet.ru/Abavaga/desamibun/404-page-not-found.png') center no-repeat #1f1e1e;} .content {width:100%;text-align:center;position:absolute;bottom:10%;left:0px;} .content a {display:inline-block;text-decoration:none} .content a:hover {opacity:0.7} .content a, .content a:hover {color:#fff342;} @media only screen and (max-width: 460px), screen and (max-height: 300px) { .content {position:static;} .content a { display:block;width:100%;height:100%;position:absolute;top:0px;left:0px;font-size:0px;opacity:0;} body {background-size:cover} } </style> </head> <body> <div class="content">Страница <strong>не найдена</strong> или была удалена из-за <u><strong>нарушения авторских прав</strong></u>.<br> <a href="/">Перейти к главной странице</a> </div> </body></html> Установка не так сложная, которая полностью описано на форуме, что думаю нужно изначально ознакомиться, и после этого устанавливать выбранную вами страницу. Сама страница нужна для уведомления пользователя или гостей сайта об отсутствующем материале на сайте. Так как он мог перейти на другой адрес или удален, но запросы в поисковых системах остаются какое-то время, что многие попадают на эту страницу. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |