<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

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

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

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

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

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

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

Верстка сайта по PSD макету (часть 3)

Верстка сайта по PSD макету (часть 3)

На прошлом уроке была сделана HTML разметка для дальнейшей верстки PSD макета. Как и ожидалось все блоки и секции встали друг под друга - это и есть блочная модель поведения. Наша задача, разместить блоки в два ряда.

Верстка сайта по PSD макету (часть 3).

Выстраивание блоков в одну линию обеспечат флоаты.

float: left;
float: right;

В ряду помещается четыре блока, следовательно зададим ширину каждому по 25%, таким образом блоки равномерно заполнят пространство, растягиваясь и сужаясь под ширину экрана, не меньше 768 пикселей и не больше 1250 пикселей. Поскольку мы сами ограничили максимальную ширину белого блока с контентом.

max-width: 1250px;

CSS код целиком

body {
  font-family: PlayfairDisplay-Regular;
  margin: 0;
  padding: 0;
}

.clear {
  clear: both; /* Отменяет обтекание элемента одновременно с правого и левого края */
}

.block_violet {
  background-color: #5d257c; /* блок с фиолетовым фоном */
}

.block_white {
  width: 100%; /* растягивает белый блок на всю ширину фиолетового */
  max-width: 1250px; /* максимальная ширина белого блока */
  display: table; /* Определяет, что элемент является блочной таблицей подобно использованию тэга <table> */
  background-color: #fff; /* галерея с белым фоном */
  margin: 0 auto; /* Выравниваем по центру горизонтали страницы */
}

.photo {
  float: left; /* Выравнивает элемент по левому краю, а все остальные элементы, обтекают его справа. */
  width: 25%; /* ширина блока с фото относительно белого блока */
}

section {
  float: left;/* выравнивает секцию по левому краю */
  width: 25%; /* ширина секции относительно белого блока */
}

.block_violet .photo .main_photo {
  width: 100%; /* растягивание фото на всю ширину блока */
}

section .top_left_text {
  float: left; /* Выравнивает элемент по левому краю */
  font-family: PlayfairDisplay-BoldItalic;
  font-size: 100%;
  color: #5d257c;
  margin: 30px 0 27px 20px;
}

section .data {
  float: right; /* Выравнивает элемент по правому краю */
  font-family: PlayfairDisplay-BoldItalic;
  font-size: 100%;
  color: #ccc;
  margin: 30px 20px 27px 0;
}

section h1 {
  font-family: Raleway-Bold;
  font-size: 150%;
  line-height: 30px; /* Устанавливает межстрочный интервал текста */
  color: #000;
  margin: 0 60px 0 20px;
}

section hr {
  color: #000;
  background-color: #000;
  height: 3px;
  border-top: 1px solid #666;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #333;
  border-left: 1px solid #878787;
  width: 30%; /* ширина горизонтальной черты относительно родителя */
  margin: 30px 0 0 20px;
}

section p {
  font-size: 90%;
  line-height: 25px; /* Устанавливает межстрочный интервал текста */
  color: #9f9f9f;
  margin: 30px 30px 0 20px;
}

.button {
  display: inline-block; /* Устанавливаем как строчно-блочный элемент */
  font-family: Raleway-Bold;
  font-size: 90%;
  text-transform: uppercase; /* Все символы текста становятся заглавными. */
  text-decoration: none; /* убирает подчеркивание текста */
  background-color: white; /* цвет фона */
  color: black;
  border: 3px solid #ededed; /* рамка */
  margin: 48px 0 0 20px;
  padding: 10px 28px;
  transition-duration: /* 0.4s; Задаёт время в секундах сколько должна длится анимация */
}

.button:hover {
  background-color: #ededed;
}

Итоги

Почему я решил делать верстку на флоатах, а не на технологии флексов или гридов. Во-первых их поддерживают старые браузеры, а во вторых существует ещё масса сайтов, сверстанных на флоатах. Этот навык будет полезен для выполнения заказов на фрилансе.

Демонстрация примера

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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