—»     —»   Гибкая разметка для вашего веб-сайта
  Раздел: CSS/Style Sheets   Нет комментариев  

Гибкая разметка для вашего веб-сайта



Вероятно, вы уже сталкивались с проблемой, когда практически невозможно настроить ширину контента на странице таким образом, чтобы она подходила ко всем устройствам (от мобильных устройств с маленькими дисплеями до громадных мониторов настольных ПК). Нам кажется, что все бывали в такой ситуации. Но сегодня эта проблема не имеет значения, так как к нам на помощь пришла гибкая (или жидкая) разметка. Мы подготовили для вас несколько примеров гибкой разметки, из которых вы можете выбрать что-то подходящее. Все эти разметки имеют несколько колонок, внутри которых размещен контент. И в качестве небольшого бонуса вы можете переключаться между разметками «на лету» (без необходимости перезагружать страницу), что было реализовано с помощью CSS3.

Гибкая разметка для вашего веб-сайта



Этап 1 – HTML

index.html

<div class="layout">
<h1>Variants</h1>
<span id="var1"></span>
<span id="var2"></span>
<span id="var3"></span>
<span id="var4"></span>
<span id="var5"></span>
<div class="variants">
<a href="#var1" class="var1"></a>
<a href="#var2" class="var2"></a>
<a href="#var3" class="var3"></a>
<a href="#var4" class="var4"></a>
<a href="#var5" class="var5"></a>
</div>

<div class="columns">
<div class="column" id="left"><img src="post.png" alt="" />Demo text content, nothing to read here. demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content</div>
<div class="column" id="right"><img src="post.png" alt="" />Demo text content, nothing to read here. demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content</div>
<div class="column" id="center">
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<hr style="clear:both" />
Demo text content, nothing to read here. demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content</div>
</div>
</div>

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

Этап 2 – CSS

А сейчас мы переходим к стилизации нашей страницы. Сначала мы подготовим основные стили для нашей разметки в 3 колонки:

.columns {
overflow: hidden;
width: 100%;
}
.column {
border: 1px dashed #CCCCCC;
min-height: 150px;
overflow: hidden;
padding: 10px;
position: relative;

/* CSS3 Box sizing property */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;

/* CSS3 transition */
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.column img {
float: left;
margin: 0 10px 10px 0;
}
.column div {
background-color: #888888;
float: left;
height: 80px;
margin: 0 10px 10px 0;
width: 80px;
}
#left {
background-color: #C8FC98;
float: left;
width: 25%;
}
#right {
background-color: #FDE95E;
float: right;
width: 25%;
}
#center {
margin: 0 25%;
}

Как видно, по умолчанию левая и правая колонки имеют одинаковую ширину (указанную в процентном соотношении), но центральной колонке мы ширину не задаем. На данный момент, все колонки гибкие. Вскоре мы рассмотрим и другие варианты, а сейчас займемся стилизацией кнопок:

.variants {
height: 32px;
margin: 20px auto;
width: 200px;
}
.variants a {
cursor: pointer;
float: left;
height: 30px;
margin: 0 5px;
width: 30px;
}
.variants .var1 {
background-color: red;
}
.variants .var2 {
background-color: orange;
}
.variants .var3 {
background-color: pink;
}
.variants .var4 {
background-color: green;
}
.variants .var5 {
background-color: blue;
}

Все так же просто, как кажется – просто окрашенные блоки. И наконец, наши другие пользовательские гибкие разметки:

/* variant 1 */
#var1:target ~ .columns #left {
width: 25%;
}
#var1:target ~ .columns #right {
width: 25%;
}
#var1:target ~ .columns #center {
margin: 0 25%;
}

/* variant 2 */
#var2:target ~ .columns #left {
width: 50%;
}
#var2:target ~ .columns #right {
display: none;
}
#var2:target ~ .columns #center {
margin: 0 0 0 50%;
}

/* variant 3 */
#var3:target ~ .columns #left {
width: 18em;
}
#var3:target ~ .columns #right {
width: 18em;
}
#var3:target ~ .columns #center {
margin: 0 18em;
}

/* variant 4 */
#var4:target ~ .columns #left {
width: 18em;
}
#var4:target ~ .columns #right {
width: 20%;
}
#var4:target ~ .columns #center {
margin: 0 20% 0 18em;
}

/* variant 5 */
#var5:target ~ .columns #left {
display: none;
}
#var5:target ~ .columns #right {
width: 18em;
}
#var5:target ~ .columns #center {
margin: 0 18em 0 0;
}

В первом варианте все колонки гибкие. Во втором варианте у нас будет только 2 видимых колонки, третья будет спрятана. В третьем варианте первая и третья колонки будут обозначены фиксированной шириной, а центральная колонка будет гибкой. 4-й вариант предусматривает 1-ю фиксированную колонку и гибкие последующие. И наконец, в 5-м варианте у нас снова будет только лишь 2 колонки, где центральная колонка будет гибкой, а правая колонка будет обозначена фиксированной шириной (левая колонка не будет видна).

Заключение

На сегодня всё! Сегодня мы подготовили отличную страницу с несколькими вариациями гибких колонок. Надеемся, что данный материал окажется полезным для вас. Не стесняйтесь делиться этим руководством с вашими друзьями и желаем вам удачи в проектах!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: верстка сайта, CSS
Опубликовал Design FactoRy   Прочитано (раз): 5663   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930