ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

CSS учебник

CSS HOME CSS Introduction CSS Syntax CSS How To CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Height/Width CSS Box Model CSS Outline CSS Text CSS Fonts CSS Icons CSS Links CSS Lists CSS Tables CSS Display CSS Max-width CSS Position CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS Opacity CSS Navigation Bar CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors CSS Forms CSS Counters CSS Website Layout CSS Units CSS Specificity

CSS Advanced

CSS Rounded Corners CSS Border Images CSS Backgrounds CSS Colors CSS Gradients CSS Shadows CSS Text Effects CSS Web Fonts CSS 2D Transforms CSS 3D Transforms CSS Transitions CSS Animations CSS Tooltips CSS Style Images CSS object-fit CSS Buttons CSS Pagination CSS Multiple Columns CSS User Interface CSS Variables CSS Box Sizing CSS Flexbox CSS Media Queries CSS MQ Examples

CSS Responsive

RWD Intro RWD Viewport RWD Grid View RWD Media Queries RWD Images RWD Videos RWD Frameworks

CSS Grid

Grid Intro Grid Container Grid Item

CSS Examples

CSS Templates

CSS References

CSS Reference CSS Selectors CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support


CSS Website Layout


Верстка сайта

Веб-сайт часто делится на заголовки, меню, содержание и нижний колонтитул:

Есть тонн различных конструкций макета на выбор. Однако, структура выше, является одним из наиболее распространенных, и мы будем внимательно взглянуть на него в этом учебнике.


Заголовка

Заголовок обычно находится в верхней части веб-сайта (или прямо под верхним навигационным меню). Он часто содержит логотип или название сайта:

Пример

.header {
    background-color: #F1F1F1;
    text-align: center;
    padding: 20px;
}

Result

Header



Панель навигации

Панель навигации содержит список ссылок, помогающих посетителям перемещаться по веб-сайту:

Пример

/* The navbar container */
.topnav {
    overflow: hidden;
    background-color: #333;
}

/* Navbar links */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Links - change color on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

Result


Содержимого

Макет в этом разделе часто зависит от целевых пользователей. Наиболее распространенным макетом является один (или объединение их) из следующих:

  • 1-column (часто используется для мобильных браузеров)
  • 2-column (часто используется для планшетов и ноутбуков)
  • 3-column layout (используется только для настольных компьютеров)

1-column:

 

2-column:

 

3-column:

Мы создадим макет из 3 столбцов и изменим его на макет с 1 колонкой на небольших экранах:

Пример

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}

Результат

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Совет: Чтобы создать компоновку с двумя столбцами, измените ширину на 50%. Чтобы создать макет из 4 столбцов, используйте 25% и т. д.

Совет: Вам интересно, как работает @media правило? ПодроБнее об этом читайте в разделе «запросы CSS Media».

Совет: Более современный способ создания макетов столбцов, является использование CSS Flexbox. Тем не менее он не поддерживается в Internet Explorer 10 и более ранних версиях. Если вам необходима поддержка IE6-10, используйте float (как показано выше).

Чтобы узнать больше о модуле макета гибкой коробки, прочитайте нашу главу CSS Flexbox.


Неравные столбцы

Основное содержание является самой большой и самой важной частью вашего сайта.

Он является общим с не равными шириной столбцов, так что большая часть пространства резервируется для основного содержимого. Боковое содержимое (если есть) часто используется в качестве альтернативной навигации или для указания информации, относящейся к основному содержимому. Изменить ширину, как вам нравится, только помните, что он должен добавить до 100% в общей сложности:

Пример

.column {
    float: left;
}

/* Left and right column */
.column.side {
    width: 25%;
}

/* Middle column */
.column.middle {
    width: 50%;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Result

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit...


Нижний колонтитул

Нижний колонтитул располагается в нижней части страницы. Он часто содержит информацию, как авторское право и контактные данные:

Пример

.footer {
    background-color: #F1F1F1;
    text-align: center;
    padding: 10px;
}

Result

Footer

Адаптивный макет сайта

С помощью некоторых из CSS код выше, мы создали отзывчивый макет веб-сайта, который варьируется от двух столбцов и полной ширины столбцов в зависимости от ширины экрана: