<MyRusakov.ru />

Своя Web-студия за 55 дней

Своя Web-студия за 55 дней

Система "Своя Web-студия за 55 дней" поможет Вам открыть свою собственную успешную Web-студию всего за 55 дней. Обучение построено на теории, плюс практике, то есть я прямо на Ваших глазах буду абсолютно с нуля открывать свою Web-студию, нанимать специалистов, принимать и выполнять заказы. Это настоящее реалити-шоу. Плюс весь курс разбит по дням, в каждый из которых Вам необходимо будет посмотреть небольшое количество видеоуроков, выполнить задания по этим урокам и проставить галочки о выполнении. Каждый из дней у Вас будет отнимать не более 1-го часа в день.

Таким образом, выполняя ежедневно маленькие шажки, Вы через 55 дней станете владельцем уже прибыльной Web-студии, заработав при этом первые 100 000 рублей.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Свойство «float» на практике

Свойство «float» на практике

Эта статья является продолжением предыдущей статьи на тему использования свойства float. Почему мы такое пристальное внимание уделяем этому float? Все дело в том, что без уверенного понимания как это свойство работает, начинающему верстальщику будет очень сложно верстать макет будущего сайта.

Лучше всего показать действие свойства float на практических примерах. Давайте рассмотрим их ниже.

Вставка заметки

При оформлении статьи очень часто вставляют сбоку от нее текстовый блок с картинкой, призванный выделить главные тезисы этой статьи. При этом основной текст статьи обтекает такой блок справа или слева, сам же блок обычно помещают между тегами <aside>…</aside>, выделяют рамкой и другим цветом фона.

Здесь код без CSS стилей:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Вставка заметки</title>
</head>
<body>
<aside>
<p>
<img src="images/articles/css_float_2_00.png" width="48" height="48"
alt="рулетики капустные">
  — время приготовления: 25 минут
</p>
<p>
<ul>
  <li>капуста 1 кочан</li>
  <li>ветчина 640 г</li>
  <li>сало 150 г</li>
</ul>
</p>
</aside>
<h2>
  Рулетики капустные с начинкой
</h2>
<p>
Отделите капустные листья от кочана, бросьте их в кипящую воду на 8 минут и дайте им остыть. Срежьте острым ножом толстые прожилки у кочана. Затем нарежьте ветчину пластинами толщиной в 5 миллиметров и положите сверху на листья капусты. Посолите и поперчите по вкусу и посыпьте сверху сыром. Закрутите листья трубочкой, оберните их салом, крепко перевяжите нитками и отправьте в разогретую духову до 200 градусов на 35 минут. При подаче блюда, посыпьте сверху зеленью.
</p>
</body>
</html>

 Свойство «float» на практике

Как видно на скриншоте выше - все блоки HTML разметки переносятся на новую строку и встают друг под друга. Мы же хотим добиться расположения блока с заметкой справа от текста статьи. Для этого зададим в стилях у тега aside – свойство float: right;

<style>
 aside {
 float: right; /* Размещаем боковую панель справа */
 }
</style>

Посмотрим сразу на результат ниже:

 Свойство «float» на практике

Далее поработаем над остальными стилями, наведем красоту. Для тех, кто незнаком с фотошопом, предлагаю установить для браузера Chrome как минимум три расширения – ColorZilla (подобрать нужный код цвета), WhatFont (узнать название понравившегося шрифта на любом сайте) и PageRuler (замеряет расстояние между элементами в пикселях).

Этот код надо разместить в тег <style>…</style>

<style>
aside {
 padding: 0px 10px; /* Отступы текста от верхней и нижней границы */
 margin: 20px; /* Отступы от края браузера по часовой начиная с верха */
 width: 200px; /* Ширина вставленного блока заметки */
 float: right; /* Вставляем боковую панель справа */
 background: #FBFDCF; /* Цвет фона вставки */
 border: 1px solid #E4BEE3; /* Значения границы */
 font-size: 0.9em; /* Размер шрифта - em масштабируемая единица */
  }
aside img {
 vertical-align: middle; /* Выравнивание картинки по середине текста */
  }
aside p { margin: 0.5em 0; }
p { margin: 11px; }
h1 {
 color: #930E8E;
 font-family: Verdana;
 font-size: 1.8em;
 text-align: center;
  }
</style>

Вот что у нас получилось:

 Свойство «float» на практике

Свойство «float» на реальном примере

В процессе обучения, мы порой забываем о главном: «А зачем нам нужен этот CSS со всеми его свойствами?». Очевидно для верстки сайта – скажите Вы. Так давайте наконец-то займемся настоящим делом, сверстаем какой-нибудь кусочек сайта. Походим по разным сайтам и выберем себе по уровню подготовки, подходящий фрагмент на сайте и сделаем его верстку. Мне понравился вот этот блок статьи на новостном сайте. Я сделал его скриншот для удобства и теперь попробую в точности повторить то, что вижу на экране.

 Свойство «float» на практике

Если у Вас еще не стоят для Google Chrome необходимые расширения – ColorZilla, WhatFont и PageRuler, то пришло время их поставить. Для других браузеров ищите аналоги в инструментах для разработчиков.

Итак приступим. Первым делом мысленно разобьем статью на блоки и сделаем HTML разметку. Перед нами фрагмент статьи - <article>, который состоит из абзаца - <p> и врезки блока с картинкой и ссылками - <aside>. Блок с врезкой находится справа, которую слева обтекает текст статьи. Структура HTML разметки такая:

<article>
  <aside>
   <p>картинка</p>
   <p>копирайт</p>
   <p>ссылка на похожую статью</p>
  </aside>
  <p>текст статьи</p>
</article>

Дальше копируем с сайта url картинки, текст, ссылки и заполняем ими теги. Только после этого по порядку описываем CSS стили. Расширение WhatFont расскажет все о шрифте используемом на сайте – название, размер, толщина, цвет.

 Свойство «float» на практике

Сайт использует Google шрифт – "Open Sans". Это значит, чтобы шрифт отображался правильно, надо прописать строчку в коде между тегами head:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

Через расширение ColorZilla мы узнаем коды всех цветов, просто берем пипетку и берем образец цвета в нужном месте.

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

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta charset="utf-8">
<title>фрагмент статьи</title>
<style>
 article {
  margin: 0 auto;
  width: 636px;
  padding: 30px; /* Поля */
  font-family: 'Open Sans';
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: 24px;
  color: #333333;
  text-align: left; /* выравнять текст по левому краю */
  }
 aside {
  float: right; /* Размещаем врезку справа */
  background: #F4F4F4; /* Цвет фона врезки */
  padding: 0 10px 10px 10px; /* Отступы картинки относительно серого блока */
  margin: 6px 0 6px 11px; /* Отступы */
  width: 340px; /* Ширина обтекаемого блока */
  }
  aside p {
  margin: 14px 9px 9px 9px;
  }
 .copy a {
  font-family: 'Open Sans';
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 18px;
  color: #7c7c7c;
  text-decoration: none;
  }
 .copy a:hover {
  text-decoration: underline;
  }
 .blue a {
  font-family: 'Open Sans';
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  color: #62a7d9;
  }
 .blue a:hover {
  text-decoration: none;
  }
</style>
</head>
<body>
<article>
<aside>
<p>
<a href="" target="_blank">
<img src="url_image.jpg" alt="" width="320" height="182">
</p>
<p class="copy"><a href="">
 copyright
</a>
</p>
<p class="blue">
<a href="" target="_blank">
 Ссылка на другую статью
</a>
</p>
</aside>
<p class="content">
 текст статьи
</p>
</article>
</body>
</html>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.