Создание шаблонов с использованием HTML и CSS

шаблонВ данной лабораторной работе рассматривается возможность создания шаблонов с помощью HTML и CSS. Полученные навыки будут полезны при выполнении контрольной работы по HTML и CSS.

Трехколоночные макеты с использованием div

Первый пример.

В первом и втором примере использованы три колонки, где первая колонка задана в процентах, третья в пикселях, а на вторую отводится то, что осталось.

<html>
<head>
<style>
.header { background: #D5BAE4; }
.lll { position: absolute;
width:100%; padding:0px;
margin:0px}
.lll DIV { position: absolute; }
.col1 { background: #C7a3E4; width: 30%; }
.col2 { background: #EaDaC7; left: 30%; right: 200px; }
.col3 { background: #aCa5DE; right: 0; width: 200px; }
</style>
  <title>Три колонки</title>
 </head>
 <body>
  <div class="header">Шапка сайта</div>
  <div class="lll">
   <div class="col1">Колонка 1 задана в %</div>
   <div class="col2">Колонка 2. Пример макета с 
	тремя колонками, где первая колонка задана в %, третья в пикселях,
 а вторая - то, что осталось.</div>
   <div class="col3">Колонка 3 задана в px</div>
  </div>
</body>
</html>

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

<html>
 <head>
  <title>Макет c тремя колонками</title>
  <style>
   .header, .footer { background: #a5BAa4; }
   .layout { overflow: hidden; }
   .col1 { background: #C7b3E4; float: left; width: 200px; }
   .col2 { background: #E0DbC7; 
    margin: 0 100px 0 200px; }
   .col3 { background: #ECD5bE; width: 100px; float: right; }
  </style>
 </head>
 <body>
  <div class="header">Шапка сайта. Резиновая средняя колонка</div>
  <div class="layout">
   <div class="col1">Колонка 1 задана в пикселях</div>
   <div class="col3">Колонка 3 задана в пикселях</div>
   <div class="col2">Колонка 2<br><br>Подвал всегда ниже самой длинной колонки</div>
  </div>
  <div class="footer">Подвал</div>
 </body>
</html>
Задание. Перенесите этот пример к себе и заполните осмысленной информацией.

Использование таблиц

Задание. Используя таблицы, попробуйте реализовать один из двух примеров с использованием таблиц.

Поделиться:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • LiveJournal
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • StumbleUpon
  • Technorati
  • БобрДобр
  • Memori.ru
  • МоёМесто.ru