Купить этот сайт

Уроки » Статьи → Блок контента  

Сначала откройте ваш заранее подготовленный блок контента в Photoshop я использую изображение ниже.



С помощью Marquee Tool :rectangu: разрежьте его на три части. Должно получиться так, заголовок, тело и нижний колонтитул.



Сохраните изображения как:

content_top.gif

content_mid.gif

content_bottom.gif


Откройте ваш любимый текстовый или HTML редактор (Dreamweaver или Блокнот) и создайте новый html документ (.html)

Скопируйте и вставьте следующий код между тегами <head>


<style type='text/css'>
.content_box{
     width: 180px;   /* Измените ширину под ваше изображение */
     background: #FFF url(content_mid.gif) repeat-y;   /* Измените ссылку на ваше ихображение с серединой блока */
     padding:0;
}
.content{
     padding: 10px;
    color: #26313D;
}
</style>


Это очень простой CSS код который создаст блок шириной в 180px

Теперь вставьте следующий код после тега <body>


<div class='content_box'>
<div><img src='content_top.gif' alt='' /></div>
<div class='content_box'>This is the content box tutorial brought to you by tutorialfx.com.<br /><br />This box will keep stretching as content is added.</div>
<div><img src='content_bottom.gif' alt='' /></div>
</div>


В результате должно получиться вот что.



Если у вас есть вопросы то пишите не стесняйтесь

Информация к уроку:

Категория - Уроки » Статьи

Дата публикации: 17-04-2011, 19:03

Опубликовал: killot

Просмотров: 756

Комментариев: 0

Ссылки к этой статье:

Источник - TutorialFX

Автор - Ghost

Переводчик - Killot

Найти - Все уроки с TutorialFX

Еще по этой теме:

Кнопка закладок Кнопка закладок
В этом уроке создадим прикольную кнопку для ...
Интерфейс «Mac» Интерфейс «Mac»
Я получаю много просьб о написании туториалов, и ...
Широкоэкранная рамка Широкоэкранная рамка
Я думаю что большинство людей уже устали от 3 ...
Шаблон «Гранж» часть 2 Шаблон «Гранж» часть 2
Продолжение к уроку Шаблон «Гранж». В этом уроке ...
Шаблон Шаблон "Blue-Gray" - Нижний колонтитул
Продолжаем создавать наш шаблон "Blue-Gray" В ...
Цифровой текст Цифровой текст
Создаем цифровой текст ...
Рисунок на автомобиле Рисунок на автомобиле
В этом уроке мы будем наносить рисунок огня на ...
Чистый блок меню Чистый блок меню
Сейчас мы создадим чистый блок меню для сайта. ...
Футуристический блок меню Футуристический блок меню
Данный урок немного сложен для новичков. В уроке ...
Шаблон - Рождественская   тема Шаблон - Рождественская тема
Создаем симпатичный новогодний (рождественский) ...

Социальные закладки:


Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 

Добавление комментария

 
 
Ваше Имя:
Ваш E-Mail:
Вопрос:
Столица России
Ответ:*
Код:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Введите код: