В этом уроке будет описываться, как я работал с макетом. Работал специально для урока, а макет сделал в качестве примера другу. Для урока, думаю, сойдет...
[img]http://demiart.ru/forum/uploads/post-13952-1189338396.jpg[/img]
Итак, прежде, чем мы начнем что-то писать в HTML'e, надо определиться, а что же мы, собственно, должны там написать. То есть, нам надо рассмотреть дизайн и представить себе будущее расположение элементов. Я перебрал два варианта, кажется. Первый попытался сделать только на дивах, но получилось криво. Поэтому я решил совместить блочную и табличную верстку. На картинке ниже коричневым обведены таблицы, а малиновым — блоки и самостоятельные картинки.
[img]http://demiart.ru/forum/uploads/post-13952-1189337879.jpg[/img]
Теперь надо разрезать макет. Вырезать надо элементы, которые средствами HTML и CSS не сделаешь. В этом макете, на мой взгляд, будет достаточно девяти картинок (включая иконки и лого).
[img]http://demiart.ru/forum/uploads/post-13952-1189337881.jpg[/img]
Вырезаем. Сохранять вырезанные картинки лучше в отдельную папку в корне сайта. Например, pic/, или img/, или еще что-нибудь. Ниже приведены уже вырезанные мной картинки.
1. Логотип. Для него будет оптимален формат GIF, т.к. цветов немного, гифка с ними справится. А JPEG весит больше GIF'а
[img]http://demiart.ru/forum/uploads/post-13952-1189337883.gif[/img]
2. Не знаю, как это назвать. Зеленый фон верхнего прямоугольника с описанием. Здесь тоже подойдет GIF.
[img]http://demiart.ru/forum/uploads/post-13952-1189337880.gif[/img]
3. Закругленные углы у блока с выбором языков. Здесь уж без сомнения GIF — всего 4 цвета (откуда 4, не знаю, увидел 2. Но если шоп говорит 4, значит 4
)
[img]http://demiart.ru/forum/uploads/post-13952-1189337882.gif[/img]
4, 5. Фон для полосок с историей и иконками. Объединил в один пункт, поскольку они представляют собой, в общем-то, одно и тоже.
Вот здесь появляются сомнения, какой формат выбрать. GIF весит меньше, но при ближнем рассмотрениии можно увидеть, что градиент — это несколько участков одного цвета. Хотя, это не очень заметно, если не вглядываться, так что оставляем GIF.
[img]http://demiart.ru/forum/uploads/post-13952-1189337884.gif[/img]
[img]http://demiart.ru/forum/uploads/post-13952-1189338176.gif[/img]
6. Машинка. Эту машинку я отрисовывал пол дня... Не сюда, а просто потренироваться.
На макете я поместил часть ее вне экрана, но нам нужна вся картинка, чтобы, если изображение будет не в самом низу, отражение не обрезалось. Как сделать, чтобы часть картинки скрылась, если она все же будет внизу, я расскажу позже.
Вот здесь GIF определенно не подходит. Слишком много цветов (попробуйте сохранить многоцветную картинку в гифе и увидите, что получится). Остаются JPEG и PNG-24. Не пугайтесь пнг, IE рисует сине-серый фон только в месте прозорачностей. А у нас прозрачности не будет. Смотрим. PNG весит килограмм на 20 легче. Оставляем.
[img]http://demiart.ru/forum/uploads/post-13952-1189338178.png[/img]
Остаются иконки. С ними, думаю, проблем возникнуть не должно
Формат — GIF, фон прозрачный.
Итак, у нас есть все необходимые картинки и намечено расположение элементов (в голове намечено). Можно создавать файлик index.html (.php, .htm или еще что-нибудь). При загрузке сайта или каталога на сайте всегда открывается файл с именем index.* Если такого файла нет, то сервер выдает ошибку 403 (отказано в доступе), или показывает список файлов в каталоге.
Для начала напишем доктайп и основные теги (<!-- вот такое --> — это комментарии, которые не будут видны в браузере).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- это и есть доктайп :) -->
<html>
<head>
<title>Revolt</title> <!-- заголовок страницы, будет отображаться в строке заголовка окна и закладки, если таковая имеется -->
<meta http-equiv="content-type" content="text/html; charset=windows-1251"> <!-- тип содержимого. В данном случае здесь указано, что тип — HTML, а кодировка — windows-1251 -->
<link rel="stylesheet" type="text/css" href="styles.css"> <!-- присоединяем файл со стилями. Название файла — styles.css -->
</head>
<body>
</body>
</html>
Теперь создадим файл styles.css (название не важно, главное, чтобы оно совпадало с указанным в HTML'e). В нем мы пропишем стили для тегов. Позже будем добавлять туда стили для классов и идентификаторов, которые будут появляться у нас в процессе работы.
Примечание: в CSS-кодах здесь даны неправильные комментарии, которые не понимает IE. Правильные такие: /*текст комментария*/... Но исправлять мне лень
* {
padding: 0; /*обнулим все отступы*/
margin: 0;
}
body {
background: #fff; /*зададим белый цвет фона (кажется, не везде он такой по умолчанию)*/
color: #000; /*черный цвет текста*/
font-family: Verdana, Arial, sans-serif; /*шрифт, который будет использоваться на странице. Если есть, то будет использоваться Verdana. Если нет — Arial. Если нет и его, то любой рубленый шрифт.*/
font-size: 10pt; /*оптимальный размер шрифта*/
line-height: 15pt; /*расстояние между строкаим. Упрощает восприятие текста.*/
}
table {
font-size: inherit; /*таблицы по умолчанию не наследуют размер шрифта*/
}
h1, h2, h3, h4, h5, h6 { /*общие стили для всех заголовков*/
font-weight: bold; /*жирное начертание*/
margin-top: 15pt; /*отступ сверху, равный высоте строки*/
margin-bottom: 5pt; /*Отступ снизу, он длжен быть меньше верхнего.*/
font-family: Palatino Linotype, serif; /*шрифт заголовков. Если есть, то Palatino Linotype, если нет, то любой с зачечками*/
text-align: center; /*центрируем заголовки*/
}
h1 { /*теперь задаем каждому заголовку свой размер шрифта*/
font-size: 15pt;
}
h2 {
font-size: 14pt;
}
h3 {
font-size: 13pt;
}
h4 {
font-size: 12pt;
}
h5 {
font-size: 11pt;
}
h6 {
font-size: 10pt;
}
a {
text-decoration: none; /*убираем стандартное подчеркивание...*/
border-bottom: 1px solid #30457a; /*...и делаем нижнюю границу. Она расположена дальше от текста, что упрощает его восприятие.*/
color: #30457a; /*цвет ссылок*/
}
a:hover { /*ссылка при наведении на нее мышой*/
border: none; /*убираем подчеркивание*/
}
p {
margin-bottom: 15pt; /*мы обнулили отступы, чтобы сделать их такими, какими они нужны нам.*/
}
img {
border: none; /*рамка вокруг изображений нам не нужна*/
}
a.img {
border: none; /*и подчеркивание у ссылок-изображений тоже (будем писать class="img" у ссылок-картинок).*/
}
Основа есть. Можно начинать верстать сайт. Сначала разместим логотип. Поставим его вне основного потока форматирования, то есть, зададим ему абсолютное позиционирование. Итак,
<body>
<img src="pic/logo.gif" id="logo" alt="Revolt" title="Тюнинг-центр Revolt">
<!-- идентификатор (id) может быть использован только один раз на странице.
Классы можно использовать сколько угодно раз. Здесь больше логотипов не предвидится alt — обязательный атрибут для всех картинок.
Если нечего писать, оставтье пустым. title — это текст, который появляется в строке состояния при наведении на картинку. -->
</body>
CSS:
img#logo {
position: absolute; /*абсолютное позиционирование*/
margin: 30px; /*отступы от краев экрана равны 30px (кстати, при создании макета используйте линейку (Ctrl+R) и направляющие, будет гораздо удобнее)*/
}
Получилось.
[img]http://demiart.ru/forum/uploads/post-13952-1189338180.jpg[/img]
Теперь вставим блок с описанием (который зеленый
). Тоже абсолютное позиционирование.
<div id="desc">
<p>Что такое Revolt? Это тюнинговый центр, где всегда будут рады Вам. Это надежный сервис, разумные
цены и отличный результат.</p>
<p>Вам нужен тюнинг? Revolt ждет Вас!</p>
</div>
CSS
div#desc {
background: url("pic/desc_bg.gif") no-repeat #339933; /*путь к картинке, указание ей не дублироваться, цвет фона (нужен, если картинки отключат. Про это тоже надо думать при верстке.)*/
width: 340px; /*ширина блока (вообще-то, ширина должна быть 360, но из-за левого паддинга в 20px она 360-20=340. Если оставить 360, то вылезет зеленый фон.)*/
height: 125px; /*высота блока (то же, что и с шириной)*/
position: absolute; /*абсолютное позиционирование*/
margin-left: 39.5%; /*расстояне от левого края экрана до левого края блока. Немного математики: в пикселях это расстояние равно 395px, ширина макета — 1000px. 1000 — 100%. 1000/395=100/x. x=(395*100)/1000=39.5*/
padding-left: 20px; /*внутренний отступ от левого края блока.*/
padding-top: 30px; /*внутренний отступ от верхнего края блока.*/
color: #fff; /*цвет текста*/
}
Работает.
[img]http://demiart.ru/forum/uploads/post-13952-1189338177.jpg[/img]
Теперь — блок с выбором языка.
<div id="lang">
<a href="english/">English version</a><br>
Русская версия <!-- у нас эта версия активна, так что ссылка не нужна -->
</div>
CSS:
div#lang {
position: absolute; /*помните, что это? :)*/
right: 0; /*прилепим блок к правому краю экрана*/
top: 35px; /*расстояние от вехнего края экрана до верхнего края блока*/
background: url("pic/lang_corn.gif") no-repeat left #c2c2c2; /*путь к картинке, указание не дублироваться, указание положения фона (слева), цвет фона*/
height: 46px; /*высота*/
width: 150px; /*ширина*/
text-align: center; /*выравнивание текста по центру*/
padding-top: 4px; /*внутренний верхний отступ*/
}
Готово.
[img]http://demiart.ru/forum/uploads/post-13952-1189338179.jpg[/img]
Следующий элемент — полоска с историей (положение полоски неудачное, если история будет длинее, то не поместится...).
<div id="hist">
<a href="index.html">Главная</a> → Контактная информация <!-- &arr; — это стрелка вправо. Спецсимволы HTML. -->
</div>
CSS:
div#hist { /*все, что здесь есть, я объяснял раншье. Вспоминаем :)*/
background: url("pic/hist_bg.gif") no-repeat #d8d8d8;
width: 270px;
height: 26px;
position: absolute;
top: 120px;
padding-left: 30px;
padding-top: 4px;
}
Все.
[img]http://demiart.ru/forum/uploads/post-13952-1189338181.jpg[/img]
Теперь — полоска с иконками.
<div id="icons">
<table> <!-- чтобы между иконками было одинаковое расстояние, я засунул их в таблицу. -->
<tr>
<td>
<a href="index.html" class="img"><img src="pic/home.gif" alt="На главную"></a> <!-- помните класс ссылок img? он пригодился, как видите. Не забыли атрибут alt? -->
</td>
<td>
<a href="contacts.html" class="img"><img src="pic/contacts.gif" alt="Контакты"></a>
</td>
<td>
<a href="sitemap.html" class="img"><img src="pic/map.gif" alt="Карта сайта"></a>
</td>
</tr>
</table>
</div>
CSS (уже побольше, да? ):
div#icons { /*все было раншье.*/
background: url("pic/icons_bg.gif") no-repeat #d8d8d8;
width: 150px;
height: 30px;
position: absolute;
top: 120px;
right: 0;
}
div#icons table { /*тоже было*/
width: 100%;
height: 100%;
text-align: center;
}
/* вот здесь кое-что новое: если написать "тег (пробел) тег", то стили будут относиться только
ко второму тегу, при условии, что он будет вложен в первый.
В данном случае стили присваиваются всем ссылкам, которые находятся в диве с идентификатором icons */
div#icons a {
display: block; /*отображение элемента, как блочного (div — блочный элемент, например)*/
height: 20px; /*ну, это уже было :)*/
padding-top: 6px;
}
div#icons a:hover { /*стили присваиваются ссылке, на которую навели курсор, и которая лежит в диве с указанным id'ом.*/
background: #ccc; /*изменяется цвет фона.*/
}
Закончили.
[img]http://demiart.ru/forum/uploads/post-13952-1189338398.jpg[/img]
[img]http://demiart.ru/forum/uploads/post-13952-1189338400.jpg[/img]
Теперь перейдем к основной части — меню и контенту. Чтобы цветная полоска под меню тянулась до самого низа, я запихал все это в таблицу.
<table id="main" cellspacing="0">
<tr>
<td id="menu">
</td>
<td id="content" rowspan="2"> <!-- rowspan — это сколько строк объединяет одна ячейка -->
</td>
</tr>
<tr>
<td id="copyright">
</td>
</tr>
</table>
CSS:
table#main {
/*отступ отсчитывается от края экрана, потому что все остальные элементы с
абсолютным позиционированием, они не влияют на расположение других элементов.*/
margin-top: 148px;
width: 100%; /*ширина на весь экран*/
}
td#menu { /*это верхняя левая ячейка, с меню*/
padding-top: 25px; /*немного отступим от верха*/
width: 200px; /*помните про линейку и направляющие? Они пригодятся, я же говорил*/
background: #f4f4d4;
text-align: center;
vertical-align: top; /*в таблицах можно указывать вертикальное выравнивание. top, middle, bottom.*/
}
td#copyright { /*это нижняя левая ячейка, с копирайтами*/
vertical-align: bottom;
padding: 25px 0; /*верхний и нижний отступы — 25px, правый и левый — 0*/
width: 200px;
background: #f4f4d4;
text-align: center;
}
td#content { /*а это правая ячейка, основная*/
vertical-align: top;
text-align: right; /*это для того, чтобы машина всегда оставалась справа*/
}
Получилось!
[img]http://demiart.ru/forum/uploads/post-13952-1189338397.jpg[/img]
Ну, сначала напишем самое легкое — копирайт.
<td id="copyright">
2007 © Revolt<br> <!-- © — значок копирайта. Спецсимволы HTML -->
Дизайн и верстка: <a href="mailto:mail@domain.ru">Ariser</a>
</td>
Скрина не надо, думаю
Теперь — контент.
<td id="content" rowspan="2">
<div id="cont_div"> <!-- поместим все в див, чтобы сделать нормальное выравнивание -->
<h2>Контактная информация</h2>
<p>Наши офисы находится по адресу:</p>
<b>г. Бобруйск</b>
<p>ул. Академическая 138, корпус б, 2-й этаж<br>
тел/факс: 8 5908 908908<br>
<a href="map.html">Карта проезда</a></p>
<p>ул. Еще более академическая 67<br>
тел/факс: 8 5908 908908<br>
<a href="map.html">Карта проезда</a></p>
<p>проспект Гагарина 31<br>
тел/факс: 8 5908 908908<br>
<a href="map.html">Карта проезда</a></p>
<b>г. Атлантик-сити</b>
<p>ул. Тихоокеанская, 251 м ниже уровня моря<br>
тел/факс: 8 5908 908908<br>
<a href="map.html">Карта проезда</a></p>
<p>Наш e-mail: <a href="mailto:revolt@revolt.ru">revolt@revolt.ru</a></p>
</div>
<img src="pic/car.png" id="car" alt="</span>"> <!-- Машина — вне дива, потому что должна быть справа -->
</td>
CSS:
div#cont_div {
margin-left: 100px; /*слева отступ равен 100px*/
margin-right: 150px; /*а справа — 150px*/
text-align: left; /*восстанавливаем выравнивание.*/
}
img#car {
margin-bottom: -33px; /*вот, это надо для того, чтобы машина опустилась на 33px (измеряем :) ) ниже границы экрана. Но если она будет находиться выше, то будет видна целиком.*/
margin-right: 30px; /*отступ от правого края экрана*/
}
Вот.
[img]http://demiart.ru/forum/uploads/post-13952-1189338399.jpg[/img]
Теперь осталось только меню. Я с ним промучился дольше всего, но так и не получилось, чтобы отображалось так, как в макете. Конечный результат — наиболее приемлемый, на мой взгляд. Здесь я просто сделал зеленые боковые границы у ссылки. Сначала я пробовал делать фон ссылки зеленым, а внутрь вставлять див с основным цветом. Потом проверил на валидность, и оказалось, что так нельзя. Пробовал вставить таблицу, но отобразилось криво. В конце концов, остановился на этом варианте.
<td id="menu">
<a href="index.html" class="menulink">Главная</a>
<a href="portfolio.html" class="menulink">Наши работы</a> <!-- — это неразрывный пробел (слова не переносятся на другую строку) -->
<a href="service.html" class="menulink">Услуги и цены</a>
<div class="menulink">Контактная информация</div> <!-- здесь див вместо ссылки, потому что мы сейчас на этой странице и эта ссылка не должна нажиматься -->
<a href="shop.html" class="menulink">Магазин</a>
<a href="about.html" class="menulink">О компании</a>
<a href="responses.html" class="menulink">Отзывы</a>
</td>
CSS:
a.menulink {
display: block; /*вспоминаем :)*/
background: #f5f5e0;
color: #000;
padding-top: 3px;
height: 22px;
border-bottom: 1px solid #aeaea6; /*нижняя граница, темная линия — создаем объемность кнопки*/
border-top: 1px solid #fbfbf3; /*верхняя граница, светлая линия — создаем объемность кнопки*/
border-left: 10px solid #609f60; /*левая зеленая граница*/
border-right: 10px solid #609f60; /*правая зеленая граница*/
}
div.menulink { /*это стили для активной "ссылки", которая не должна нажиматься. Все то же самое, но цвет боковых границ более светлый*/
display: block;
background: #f5f5e0;
color: #000;
padding-top: 3px;
height: 22px;
border-bottom: 1px solid #aeaea6;
border-top: 1px solid #fbfbf3;
border-left: 10px solid #31cd31;
border-right: 10px solid #31cd31;
}
a.menulink:hover { /*А это мы изменяем цвет боковых границ при наведении на ссылку.*/
border-bottom: 1px solid #aeaea6; /*дублированное описание верхней и нижней границ надо, потому что в IE ои исчезают при наведении.... Может, так и должно быть :)*/
border-top: 1px solid #fbfbf3;
border-left: 10px solid #31cd31;
border-right: 10px solid #31cd31;
}
Готово.
[img]http://demiart.ru/forum/uploads/post-13952-1189338401.jpg[/img]
Собственно, мы сверстали все. В итоге у нас должен получиться вот такой код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Revolt</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<img src="pic/logo.gif" id="logo" alt="Revolt" title="Тюнинг-центр Revolt">
<div id="desc">
<p>Что такое Revolt? Это тюнинговый центр, где всегда будут рады Вам. Это надежный сервис, разумные
цены и отличный результат.</p>
<p>Вам нужен тюнинг? Revolt ждет Вас!</p>
</div>
<div id="lang">
<a href="english/">English version</a><br>
Русская версия
</div>
<div id="hist">
<a href="index.html">Главная</a> → Контактная информация
</div>
<div id="icons">
<table>
<tr>
<td>
<a href="index.html" class="img"><img src="pic/home.gif" alt="На главную"></a>
</td>
<td>
<a href="contacts.html" class="img"><img src="pic/contacts.gif" alt="Контакты"></a>
</td>
<td>
<a href="sitemap.html" class="img"><img src="pic/map.gif" alt="Карта сайта"></a>
</td>
</tr>
</table>
</div>
<table id="main" cellspacing="0">
<tr>
<td id="menu">
<a href="index.html" class="menulink">Главная</a>
<a href="portfolio.html" class="menulink">Наши работы</a>
<a href="service.html" class="menulink">Услуги и цены</a>
<div class="menulink" id="active">Контактная информация</div>
<a href="shop.html" class="menulink">Магазин</a>
<a href="about.html" class="menulink">О компании</a>
<a href="responses.html" class="menulink">Отзывы</a>
</td>
<td id="content" rowspan="2">
<div id="cont_div">
<h2>Контактная информация</h2>
<p>Наши офисы находится по адресу:</p>
<b>г. Бобруйск</b>
<p>ул. Академическая 138, корпус б, 2-й этаж<br>
тел/факс: 8 5908 908908<br>
<a href="map">Карта проезда</a></p>
<p>ул. Еще более академическая 67<br>
тел/факс: 8 5908 908908<br>
<a href="map">Карта проезда</a></p>
<p>проспект Гагарина 31<br>
тел/факс: 8 5908 908908<br>
<a href="map">Карта проезда</a></p>
<b>г. Атлантик-сити</b>
<p>ул. Тихоокеанская, 251 м ниже уровня моря<br>
тел/факс: 8 5908 908908<br>
<a href="map">Карта проезда</a></p>
<p>Наш e-mail: <a href="mailto:revolt@revolt.ru">revolt@revolt.ru</a></p>
</div>
<img src="pic/car.png" id="car" alt="">
</td>
</tr>
<tr>
<td id="copyright">
2007 © Revolt<br>
Дизайн и верстка: <a href="mailto:mail@domain.ru">Ariser</a>
</td>
</tr>
</table>
</body>
</html>
И вот такой — CSS:
* {
padding: 0;
margin: 0;
}
body {
background: #fff;
color: #000;
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
line-height: 15pt;
}
table {
font-size: inherit;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
margin-top: 15pt;
margin-bottom: 5pt;
font-family: Palatino Linotype, serif;
text-align: center;
}
h1 {
font-size: 15pt;
}
h2 {
font-size: 14pt;
}
h3 {
font-size: 13pt;
}
h4 {
font-size: 12pt;
}
h5 {
font-size: 11pt;
}
h6 {
font-size: 10pt;
}
a {
text-decoration: none;
border-bottom: 1px solid #30457a;
color: #30457a;
}
a:hover {
border: none;
}
p {
margin-bottom: 15pt;
}
img {
border: none;
}
a.img {
border: none;
}
img#logo {
position: absolute;
margin: 30px;
}
div#desc {
background: url("pic/desc_bg.gif") no-repeat #339933;
width: 340px;
height: 125px;
position: absolute;
margin-left: 39.5%;
padding-left: 20px;
padding-top: 30px;
color: #fff;
}
div#lang {
position: absolute;
right: 0;
top: 35px;
background: url("pic/lang_corn.gif") no-repeat left #c2c2c2;
height: 46px;
width: 150px;
text-align: center;
padding-top: 4px;
}
div#hist {
background: url("pic/hist_bg.gif") no-repeat #d8d8d8;
width: 270px;
height: 26px;
position: absolute;
top: 120px;
padding-left: 30px;
padding-top: 4px;
}
div#icons {
background: url("pic/icons_bg.gif") no-repeat #d8d8d8;
width: 150px;
height: 30px;
position: absolute;
top: 120px;
right: 0;
}
div#icons table {
width: 100%;
height: 100%;
text-align: center;
}
div#icons a {
display: block;
height: 20px;
padding-top: 6px;
}
div#icons a:hover {
background: #ccc;
}
table#main {
margin-top: 148px;
width: 100%;
}
td#menu {
padding-top: 25px;
width: 200px;
background: #f4f4d4;
text-align: center;
vertical-align: top;
}
td#copyright {
vertical-align: bottom;
padding: 25px 0;
width: 200px;
background: #f4f4d4;
text-align: center;
}
td#content {
vertical-align: top;
text-align: right;
}
div#cont_div {
margin-left: 100px;
margin-right: 150px;
text-align: left;
}
img#car {
margin-bottom: -33px;
margin-right: 30px;
}
a.menulink {
display: block;
background: #f5f5e0;
color: #000;
padding-top: 3px;
height: 22px;
border-bottom: 1px solid #aeaea6;
border-top: 1px solid #fbfbf3;
border-left: 10px solid #609f60;
border-right: 10px solid #609f60;
}
div.menulink {
display: block;
background: #f5f5e0;
color: #000;
padding-top: 3px;
height: 22px;
border-bottom: 1px solid #aeaea6;
border-top: 1px solid #fbfbf3;
border-left: 10px solid #31cd31;
border-right: 10px solid #31cd31;
}
a.menulink:hover {
border-bottom: 1px solid #aeaea6;
border-top: 1px solid #fbfbf3;
border-left: 10px solid #31cd31;
border-right: 10px solid #31cd31;
}
А страничка будет выглядеть так:
[img]http://demiart.ru/forum/uploads/post-13952-1189338487.jpg[/img]
Я закончил.
Автор: Net aka Ariser (я)Оригинал здесь:
http://demiart.ru/forum/index.php?showtopic=31627[/img]
Сообщение сайта
Урок верстки
prostors
20.5.2009, 20:54;
Ответить: prostors
0 
