Поделиться Поделиться

Трехколончатый макет с обрамляющими столбцами фиксированной ширины и с центральным столбцом плавающей ширины

Для создания такого макета используется абсолютное позиционирование для размещения левого и правого столбцов, затем явно указывается ширина столбцов в пикселах, а ширина центрального столбца не указывается и поэтому остается плавающей и уменьшается или увеличивается в соответствии с размерами окна.

<html>

<style type=text/css>

body {margin: 0}

#nav {position: absolute; left: 10px; top: 10px; width: 200px;}

#content {margin-left: 210px; margin-right:210px; margin-top: 10px;}

#sidebar {position: absolute; right: 10px; top: 10px; width: 200px;}

</style>

<body>

<DIV id="nav"> Столбец фиксированной ширины </div>

<DIV id="content"> Ширина столбца уменьшается или увеличивается при изменении размеров окна браузера или разрешении экрана</div>

<DIV id="sidebar"> Столбец фиксированной ширины </div>

</body>

</html>

Трехколончатый макет с обрамляющими столбцами фиксированной ширины и с центральным столбцом плавающей ширины - Инвестирование -  1

Три столбца с шапкой и нижним колонтитулом

Трехколончатый макет с обрамляющими столбцами фиксированной ширины и с центральным столбцом плавающей ширины - Инвестирование -  2

В этом макете используется плавающее размещение. Ширина ни одного из столбцов не будет меняться динамически.

<HTML>

<HEAD>

<TITLE> Макет сайта</TITLE>

<style type="text/css">

#glav{position:absolute; left: 200px; width: 800;}

#masthead {width:800px;height: 150px;background: gold;}

#nav {float:left; width:200px;height: 400px;}

#content {float:left; width: 400px; height: 400px; }

#sidebar {float:left; width:200px;height: 400px;}

#footer {width: 800px; clear: both;height: 150px;background: gold;}

#masthead, #nav, #content, #sidebar, #footer {text-align:center; font: 20px;}

</style>

<body>

<div id=glav>

<div id=masthead> Шапка </div>

<div id=nav> Левая часть </div>

<div id=content> Контент </div>

<div id=sidebar> Правая часть </div>

<div id=footer> Нижний колонтитул </div>

</div>

</html>

Макет с фиксированной шириной, выравненный по центру

<HTML>

<HEAD>

<TITLE> Макет сайта</TITLE>

<style type="text/css">

#glav{position:absolute;left:50%; width: 800px; margin-left:-400px; border: 1px solid orange;}

#content {margin-top: 75px;}

#nav {position:fixed; top:0; width: 800px; border-bottom: 1px solid orange;}

#nav, #content {text-align:center; font: 20px;}

</style>

<body>

<div id=glav><div id=nav> Верхняя часть </div>

<div id=content> Контент </div>

</div>

</html>

Трехколончатый макет с обрамляющими столбцами фиксированной ширины и с центральным столбцом плавающей ширины - Инвестирование -  3

Макет с динамической шириной, выравненный по центру

<HTML>

<HEAD>

<TITLE> Макет сайта</TITLE>

<style type="text/css">

#glav{position:absolute;left:50%; margin-left:-50%; border: 1px solid orange; width:100%}

#content {margin-top: 75px;}

#nav {position:fixed; top:0; border-bottom: 1px solid orange;}

#nav, #content {text-align:center; font: 20px;}

</style>

<body>

<div id=glav><div id=nav> Верхняя часть </div>

<div id=content> Контент </div>

</div>

</html>

Трехколончатый макет с обрамляющими столбцами фиксированной ширины и с центральным столбцом плавающей ширины - Инвестирование -  4

Смешанный макет с выравниванием по центру, позиционированием и плавающим размещением

Трехколончатый макет с обрамляющими столбцами фиксированной ширины и с центральным столбцом плавающей ширины - Инвестирование -  5

<HTML>

<HEAD>

<TITLE> Макет сайта</TITLE>

<style type="text/css">

#conteiner{position:absolute;left:50%; margin-left:-430px; margin-top: 10px; width:860px;}

#masthead {width:860 px; border-bottom: 1px solid black;}

#nav {float:left; width: 150px;padding-top: 20px;}

#content {float:left; width: 490 px; margin-right: 5px; margin-left: 5px; padding-top: 20px;}

#sidebar {float: right; width: 160px; padding-top: 20px; }

#footer {clear: both; width: 860px; border-top: 1px solid black; margin-top: 20px;padding-top: 10px;}

</style>

<body>

<div id=conteiner>

<div id=masthead>

<H1 align=center> Из копилки идей </H1></div>

<div id=nav>

<ul>

<li> <a href="home.html">Главная </a>

<li> <a href="HTML.html">HTML </a>

<li> <a href="CSS.html">CSS </a>

<li> <a href="JavaScript.html">JavaScript </a>

<li> <a href="PHP.html">PHP </a>

</ul>

</div>

<div id="content">

<h1> Web-технологии </h1>

<h2> Создание Web-страниц </h2>

<p align=justify> Для создания Web-страниц применяются различные технологии. Наиболее распространенные из них: язык гипертекстовой разметки - HTML, каскадные таблицы стилей - CSS, язык сценариев JavaScript, язык программирования - PHP.

<p align=justify>

Зачем, спросите вы, для создания сайта знать язык HTML, стили CSS, язык JavaScript? Ведь есть HTML-редакторы, CMS-платформы, с помощью которых

← Предыдущая страница | Следующая страница →