Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

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

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Шаблоны » Дизайн » HTML верстка » Три варианта необычной HTML верстки

Три варианта необычной HTML верстки

Опубликовал: artCreative™
Категория: HTML верстка
Дата:Вторник, 19 Марта 2013 в 16:11

0 голосов

Все три макета сверстаны на html5, рассчитаны на фиксированный дизайн с общей шириной сайта не более 1000px.
ВЕРСТКА ПЕРВАЯ

CSS:

Код

.aContainer {width:500px; margin:0px auto; text-align:center; overflow:hidden}
.aLeftBlock {width:298px; float:left; margin:0px 2px 2px 0px}
.aHeader {height:100px; width:298px; background:#bd7d70; border-radius:3px}
.aMenu {height:30px; width:298px; background:#7bbd70; margin:2px 0px; border-radius:3px}
.aContent {height:250px; width:298px; background:#70b8bd; border-radius:3px}
.aRightBlock {width:200px; float:right; overflow:hidden}
.aLeftColumn {width:98px; float:left; height:280px; background:#bd7086; margin:0px 2px 0px 0px; border-radius:3px}
.aRightColumn {width:100px; float:left; height:280px; background:#af70bd; border-radius:3px}
.aFooter {width:200px; height:102px; background:#707ebd; margin-top:2px; border-radius:3px}

HTML

Код

<div class="aContainer">
<div class="aLeftBlock">
<div class="aHeader"> Шапка </div>
<div class="aMenu"> Меню </div>
<div class="aContent"> Контент </div>
</div>
<div class="aRightBlock">
<div class="aLeftColumn"> Контейнер 1 </div>
<div class="aRightColumn"> Контейнер 2 </div>
<div style="clear:both"></div>
<div class="aFooter"> Подвал </div>
</div>
</div>

ВЕРСТКА ВТОРАЯ

CSS

Код

.bContainer {width:500px; margin:0px auto; text-align:center; overflow:hidden}
.bMenu {width:500px; margin:2px 0px; background:#7bbd70; border-radius:3px}
.bLeftBlock {width:198px; float:left; margin:0px 2px 0px 0px; overflow:hidden}
.bHeader {height:70px; width:198px; background:#bd7d70; border-radius:3px}
.bLeftColumn {width:96px; float:left; height:200px; background:#bd7086; border-radius:3px; margin:2px 2px 2px 0px}
.bRightColumn {width:100px; float:left; height:200px; background:#af70bd; border-radius:3px; margin:2px 0px}
.bFooter {width:198px; height:70px; background:#707ebd; border-radius:3px}
.bRightBlock {width:300px; float:left; height:344px; background:#70b8bd; border-radius:3px}

HTML

Код

<div class="bContainer">
<div class="bMenu"> Меню </div>
<div class="bLeftBlock">
<div class="bHeader"> Шапка </div>
<div style="clear:both"></div>
<div class="bLeftColumn"> Контейнер 1 </div>
<div class="bRightColumn"> Контейнер 2 </div>
<div style="clear:both"></div>
<div class="bFooter"> Подвал </div>
</div>
<div class="bRightBlock"> Контент </div>
</div>

ВЕРСТКА ТРЕТЬЯ

CSS

Код

.cContainer {width:500px; margin:0px auto; text-align:center; overflow:hidden}
.cMenu {width:500px; margin-bottom:2px; background:#7bbd70; border-radius:3px}
.cLeftBlock {width:98px; margin-right:2px; float:left; background:#bd7086; border-radius:3px; height:402px}
.cRightBlock {width:400px; float:left}
.cHeader {width:400px; margin-bottom:2px; height:100px; background:#bd7d70; border-radius:3px}
.cContent {width:298px; height:300px; float:left; margin-right:2px; background:#70b8bd; border-radius:3px}
.cRightColumn {width:100px; height:300px; float:left; background:#af70bd; border-radius:3px}
.cFooter {width:500px; margin-top:2px; background:#707ebd; border-radius:3px; height:50px}

HTML

Код

<div class="cContainer">
<div class="cMenu"> Меню </div>
<div style="clear:both"></div>
<div class="cLeftBlock"> Контейнер 1 </div>
<div class="cRightBlock">
<div class="cHeader"> Шапка </div>
<div class="cContent"> Контент </div>
<div class="cRightColumn"> Контейнер 2 </div>
</div>
<div style="clear:both"></div>
<div class="cFooter"> Подвал </div>
</div>

Спонсор материала: Дизайн-Ателье по разработке сайтов и граффики RealARTs

Ссылка на источник материала

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 986 « Назад

Теги материала: верстки, HTML верстка, необычной, html, варианта, три

Комментарии пользователей

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

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Шаблоны » Дизайн » HTML верстка » Три варианта необычной HTML верстки

Три варианта необычной HTML верстки

Комментарии пользователей