Изучение HTML. Вёрстка сайта из PSD шаблона. Часть 3

0_HTML

Вот мы и добрались до основной части сайта где собственно и будет находиться вся информация — это контент и правая часть.






И так от слов к делу, приступим к верстке следующего фрагмента сайта – контент и правая часть. Контент и боковая часть помещаются в один блок.

<div id='content'>

<section>

контент

</section>

<aside>

боковая часть

</aside>

</div> <!--content-->

В <section> помещается основной текст с изображениями. В <aside> — содержимое правой части сайта.

К обоим блокам необходимо применить свойство float. Одному установить атрибут left, другому right.

#content{

padding-top: 10px;

padding-right: 20px;

padding-bottom: 60px;

padding-left: 30px;

}

section{

width: 645px;

float: left;

}

aside{

width: 245px;

float: right;

}

Отступы указаны для #content. Сто сделано для того, чтобы свойство padding не увеличивало фактическую ширину для <section> и <aside>.

Сейчас на сайте вроде бы всё нормально.

001

Однако, если увеличить в одной из колонок количество строк, то получится следующее.

HTML:

<section>

контент<br>

контент<br>

контент<br>

контент<br>

контент<br>

контент<br>

контент<br>

</section>

002

Для лучшего понимания местоположения каждого фрагмента блокам #content, <section> и <aside> желательно установить временно фоновый цвет.

CSS:

#content{

padding-top: 10px;

padding-right: 20px;

padding-bottom: 60px;

padding-left: 30px;

background-color: #3FF;

}

section{

width: 645px;

float: left;

background-color: #F9C;

}

aside{

width: 245px;

float: right;

background-color: #6F6;

}

Результат в браузере

003

Свойство float позволяет установить обтекание блока текстом. Что и происходит в данном примере. Для корректного отображения нижней части сайте обтекание необходимо отменить. С этой целью создаётся пустой блок с CSS свойством clear:both.

HTML:

</section>

<aside>

боковая часть

</aside>

<div class="clear"></div>

CSS:

.clear {

clear: both;

}

Результат в браузере

004

Теперь фоны можно убрать. Только для # wrapper установить белый

CSS:

#wrapper {

width: 964px;

margin-top: 100px;

margin-right: auto;

margin-bottom: 85px;

margin-left: auto;

background-color: #FFF;

}

#content{

padding-top: 10px;

padding-right: 20px;

padding-bottom: 60px;

padding-left: 30px;

}

section{

width: 645px;

float: left;

}

aside{

width: 245px;

float: right;

}

Далее необходимо вставить текст.

<section>

<h2>Здоровое питание для ваших Лучших друзей!</h2>

<p><img class="float-left" src="img/food1.png" width="283" height="346" />GUABI Natural  -это профессиональный высококачественный сухой корм Супер-Премиум класса для Ваших животных</p>

<p>Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. </p>

&nbsp;

<h2>Важнейшие компоненты</h2>

<p>Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.</p>

&nbsp;

<img class="float-left" src="img/food2.png" width="302" height="376" />

<p>Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта. Тестовый текст для проверки шрифта.</p>

&nbsp;

&nbsp;

<p class="bold-center">GUABI Natural – это рецепт сбалансированного и богатого всеми питательными веществами корма, необходимого для удовлетворения ежедневных потребностей Ваших питомцев</p>

</section>

CSS:

section p,section h2{

font-size: 14px;

color: #655e5e;

padding-top: 8px;

}

section h2{

text-align: center;

}

.float-left{

float: left;

}

.bold-center{

font-weight: bold;

text-align: center;

}

В правой части есть три одинаковых блока. Отличаться будут только лишь наполнением. Здесь очень удобно применение классов.

HTML:

<aside>

&nbsp;

<div class="right-block">

<h3>Миска питомца</h3>

<img src="img/dogplate.gif" width="241" height="204" />

<p class='link'><a href="#">в миске питомца<br />товаров на: 0 рублей</a></p>

</div> <!--right-block-->

&nbsp;

<div class="right-block">

<h3>Наши новости</h3>

<br /><br /><br /><br /><br /><br /><br /><br />

</div> <!--right-block-->

&nbsp;

<div class="right-block">

<h3>Наши акции</h3>

<br /><br /><br /><br /><br /><br /><br /><br />

</div> <!--right-block-->

&nbsp;

</aside>

Тег <br /> применяется для того, чтобы видеть блоки в том виде, в каком они выглядят в дизайне.

CSS:

.right-block {

width: 241px;

border-right-width: 2px;

border-left-width: 2px;

border-right-style: solid;

border-left-style: solid;

border-right-color: #dcdedd;

border-left-color: #dcdedd;

}

.right-block h3{

color: #FFF;

text-align: center;

padding-top: 10px;

padding-bottom: 10px;

font-family: "Times New Roman", Times, serif;

font-size: 23px;

background-color: #7fc56b;

}

.right-block p{

font-size: 14px;

color: #655e5e;

padding: 8px;

}

.right-block p.link{

text-align: center;

padding-top: 15px;

padding-bottom: 15px;

}

.right-block p.link a{

font-family: "Times New Roman", Times, serif;

font-size: 23px;

color: #666060;

&nbsp;

}

.right-block p.link a:hover{

text-decoration: none;

}

.right-block:last-child{

border-bottom-width: 2px;

border-bottom-style: solid;

border-bottom-color: #dcdedd;

}

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

Для последнего блока псевдоклассом .right-block:last-child установлена нижняя граница.

005

HTML код нижней части очень прост

<footer>+7(987)555-44-33 (Skype) E-mail : Guabi@list.ru</footer>

CSS:

footer {

font-size: 30px;

color: #f3f7f1;

text-align: center;

padding-top: 25px;

padding-bottom: 10px;

background-color: #7fc56b;

}

006

На этом все. Если у вас остались вопросы задавайте их в комментариях.

 

 






Один комментарий на “Изучение HTML. Вёрстка сайта из PSD шаблона. Часть 3

  1. Pingback: Изучение HTML. Вёрстка сайта из PSD шаблона. Часть 2 (навигация)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *