
Для начала, как обычно нужно создать 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"> </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качиваний: 54