Основное меню

Оформление страницы ошибки 404

Для начала, как обычно нужно создать HTML-каркас, смотрите код ниже:

<center>

<div class="wrapper">
<div class="pagebody">
<div class="dbottom">
<div class="dtop">
<div class="dcont">
<div class="header"><h3>Доступ запрещен</h3></div>
<div class="message">
<div class="blockicon"></div>

<div class="inner">
<div class="msg_text">К сожалению, данная страница для Вас не доступна. Возможно, был изменен ее адрес или она была удалена.</div></div></div>

<div class="content">
<p class="morelink">
<h1>Вы можете посмотреть другую полезную информацию</h1>
Перейти на <a href="http://website-name.ru">главную страницу</a>

Послушать музыку в разделе <a href="http://website-name.ru">MusicBox</a>

Посмотреть фотографии в разделе <a href="http://website-name.ru">Лучшие фотки</a>

Обратиться за помощью в <a href="http://website-name.ru">обратную связь</a></p></div></div></div></div></div>

<div class="footer">
<div class="inner">&nbsp;</div></div></div>

</center>

Каркас готов, теперь зададим стили для нашей страницы. Все параметры в файле стилей style.css вы естественно можете редактировать по своему вкусу, цвета, размеры, шрифты и так далее.

/* Глобальные стили */

body {
margin: 0;
padding: 0;
background: #ffffff;
font: 11px/18px Tahoma, Verdana, Helvetica, sans-serif;
color: #000000;
}
a {
color: #C67000;
text-decoration: underline
}
a:hover {
text-decoration: none
}
h1 {
line-height: 1.1em;
margin: 0px 0px 0.2em;
font: bold 1em Tahoma, Verdana, Helvetica, sans-serif;
}
/* конец */

/* =========================================== */

/* Стили для блоков */

.wrapper {
text-align: left;
margin: 10% auto auto;
width: 555px
}
.pagebody {
width: 555px;
background: url(images/bodypage.PNG) #ffffff repeat-y left top
}
.pagebody .dtop { background: url(images/header.PNG) no-repeat left top }
.pagebody .dbottom {    background: url(images/pagebody_foot.PNG) no-repeat left bottom }
.pagebody .dcont { padding: 24px 49px 20px 49px }
.header { height: 74px }
.message {
position: relative;
width: 457px;
height: 81px;    
background: url(images/msg_table.PNG) no-repeat left top    
}
.message .inner { padding: 16px 210px 0 12px }
.blockicon {
z-index: 1;
position: absolute;
width: 203px;
display: block;
background: url(images/log1.png) no-repeat left top;
height: 142px;
top: -61px;
right: 0px
}
.blockicon span {
text-align: center;
display: block;
padding-top: 95px
}
.footer .inner {
padding: 14px 60px 0 60px;
color: #8395a1    
}
.msg_text {
line-height: 16px;
height: 50px;
color: #767777
}
.content { padding: 12px 12px 0 12px }
.content p {
padding-bottom: 3px;
margin: 0px
}
.footer {
background: url(images/footer.PNG) #ffffff no-repeat left top;
height: 58px
}

/* конец */

После того как вы скопировали код стилей и сохранили его в файл style.css, не забудьте его подключить к вашей HTML-странице ошибки 404. Разместите код приведенный ниже между тегами <head></head>

<link href="style.css" rel="stylesheet" type="text/css" />

На этом офрмление страницы ошибки 404 закончено. Архив с файлами стилей, html-страницей и изображениями можно скачать ниже.

Скачать файл
размер файла: 139,91 Kb
cкачиваний: 43

Раздел: Статьи для веб-мастера

Держи ссылку на ракеты класса земля воздух voenteh.com.


Дополнительно Популярное
Дизайнерский веб-ресурс: Дле, Вордпресс, Джумла, фотошоп, плагины, иконки, шаблоны, текстуры, смайлики, логотипы.