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

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


22 июня 2012, 14:30. Разместил: Design FactoRy
Вероятно, вы уже сталкивались с проблемой, когда практически невозможно настроить ширину контента на странице таким образом, чтобы она подходила ко всем устройствам (от мобильных устройств с маленькими дисплеями до громадных мониторов настольных ПК). Нам кажется, что все бывали в такой ситуации. Но сегодня эта проблема не имеет значения, так как к нам на помощь пришла гибкая (или жидкая) разметка. Мы подготовили для вас несколько примеров гибкой разметки, из которых вы можете выбрать что-то подходящее. Все эти разметки имеют несколько колонок, внутри которых размещен контент. И в качестве небольшого бонуса вы можете переключаться между разметками «на лету» (без необходимости перезагружать страницу), что было реализовано с помощью 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 колонки, где центральная колонка будет гибкой, а правая колонка будет обозначена фиксированной шириной (левая колонка не будет видна).

Заключение

На сегодня всё! Сегодня мы подготовили отличную страницу с несколькими вариациями гибких колонок. Надеемся, что данный материал окажется полезным для вас. Не стесняйтесь делиться этим руководством с вашими друзьями и желаем вам удачи в проектах!
Вернуться назад