Основная часть сайта

В этом уроке мы разработаем основную часть нашего сайта. Мы сделаем боковое меню со статьями и оснавную часть страницы.

Основная часть сайта. Создание сайта

Боковое меню

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

<div id="aside-menu"> отвечает за позиционирования бокового меню.
<div class="article-menu-block"> - блок текста с картинкой.
<h2 class="article-name"> - отвечает за название раздела статей.


<aside>
  <div id="aside-menu">
    <div id="aside-container">
    <h2 class="article-name">Научные статьи:</h2>
    <div class="article-menu-block">
      <a href="#">
    <img src="img/2.jpg" alt="статья" class="article-menu" />
    <span class="article-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></a>
      </div>
      <div class="article-menu-block">
      <a href="#">
    <img src="img/2.jpg" alt="статья" class="article-menu" />
    <span class="article-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></a>
      </div>
      <div class="article-menu-block">
      <a href="#">
    <img src="img/2.jpg" alt="статья" class="article-menu" />
    <span class="article-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></a>
      </div>
    <h2 class="article-name">Разговорные статьи:</h2>
    <div class="article-menu-block">
    <a href="#">
    <img src="img/2.jpg" alt="статья" class="article-menu" />
    <span class="article-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></a>
  </div>
  <div class="article-menu-block">
      <a href="#">
    <img src="img/2.jpg" alt="статья" class="article-menu" />
    <span class="article-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></a>
      </div>
      <div class="article-menu-block">
      <a href="#">
    <img src="img/2.jpg" alt="статья" class="article-menu" />
    <span class="article-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></a>
      </div>
    <h2 class="article-name">Официально-деловые статьи:</h2>
    <div class="article-menu-block">
    <a href="#">
    <img src="img/2.jpg" alt="статья" class="article-menu" />
    <span class="article-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></a>
  </div>
  <div class="article-menu-block">
      <a href="#">
    <img src="img/2.jpg" alt="статья" class="article-menu" />
    <span class="article-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></a>
      </div>
      <div class="article-menu-block">
      <a href="#">
    <img src="img/2.jpg" alt="статья" class="article-menu" />
    <span class="article-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></a>
      </div>
  </div>
</div>
</aside>
 

Основная часть сайта

В основную часть сайта мы поставим блок с самыми новыми статьями.

<div class="article-container"> отвечает за расположение статей.
<div class="main-article-block"> отвечает за каждую отдельную статью.
<span class="article"> отвечает за название статьи.


<section>
  <div id="section-block">
    <h2 id="header">Новые статьи:</h2>
    <div class="article-container">
    <div class="main-article-block">
      <a href="#">
    <img src="img/1.jpg" alt="статья" class="article-img" />
    <span class="article">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></a>
    <p class="title-description">Описание:</p>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.</p>
      </div>
      <div class="main-article-block">
      <a href="#">
    <img src="img/1.jpg" alt="статья" class="article-img" />
    <span class="article">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></a>
    <p class="title-description">Описание:</p>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.</p>
      </div>
      <div class="main-article-block">
      <a href="#">
    <img src="img/1.jpg" alt="статья" class="article-img" />
    <span class="article">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></a>
    <p class="title-description">Описание:</p>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.</p>
      </div>
      <div class="main-article-block">
      <a href="#">
    <img src="img/1.jpg" alt="статья" class="article-img" />
    <span class="article">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></a>
    <p class="title-description">Описание:</p>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.</p>
      </div>
  </div>
  </div>
</div>
</section>
 

Css

Теперь приступаем к CSS коду.

float: left отвечает за выравнивания элемента по левому краю.
display: flex; отвечает за выравнивания элемента в ряд .
flex-basis: 0; отвечает за ширину флекс-элемента, относительно которой будет происходить растяжение.
justify-content: space-between; отвечает за выравнивание их по центру.


.article-menu-block a {
  text-decoration: none;
  color: #3d3d3d;
  font-size: 1.1em;
  font-family: 'PT Sans', sans-serif;
}
.article-name {
  font-family: 'PT Sans', sans-serif;
  padding-bottom: 1%;
}
.article-menu {
  float: left;
  border-radius: 4px;
  margin-right: 8px;
}
.article-menu-block {
  float: left;
  padding-bottom: 3%;
  width: 100%;
}
#aside-menu {
  float: left;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.article-container {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0 0 20px;
  justify-content: center;
}
.main-article-block {
  flex-basis: 0;
  padding: 0 60px 20px 0;
  font-family: 'PT Sans', sans-serif;
}
.main-article-block a {
  color: black;
  text-decoration: none;
}
.main-article-block a:hover {
  color: orange;
}
#header {
  text-indent: 20px;
  font-family: 'PT Sans', sans-serif;
}
.title-description {
  color: red;
  font-size: 1.1em;
}
.description {
  font-size: .9em;
  color: #3d3d3d;
}