- Как сделать — Макет блога
- Макет блога
- Создать макет блога
- Пример
- Название блога
- НАЗВАНИЕ ЗАГОЛОВКА
- НАЗВАНИЕ ЗАГОЛОВКА
- О Нас
- Popular Post
- Следуйте за мной
- Подвал
- Пример
- How TO — Blog Layout
- How To Create a Blog Layout
- Example
- Blog Name
- TITLE HEADING
- TITLE HEADING
- About Me
- Popular Post
- Follow Me
- Footer
- Example
- Макет блога на чистом CSS
Как сделать — Макет блога
Узнать, как создать адаптивный макет блога с помощью CSS.
Макет блога
Узнайте, как создать адаптивный макет блога, который варьируется между двумя и полными столбцами ширины в зависимости от ширины экрана.
Изменить размер окна браузера, чтобы увидеть отзывчивый эффект:
Создать макет блога
Шаг 1) Добавить HTML:
Пример
Название блога
НАЗВАНИЕ ЗАГОЛОВКА
Описание заголовка, Декабрь 7, 2017
Некоторый текст..
НАЗВАНИЕ ЗАГОЛОВКА
Описание заголовка, Сентябрь 2, 2017
Некоторый текст..
О Нас
Какой-то текст обо мне в culpa qui officia deserunt mollit anim..
Popular Post
Следуйте за мной
Некоторый текст..
Подвал
Шаг 2) Добавить CSS:
Пример
body <
font-family: Arial;
padding: 20px;
background: #f1f1f1;
>
/* Заголовок/Название блога */
.header padding: 30px;
font-size: 40px;
text-align: center;
background: white;
>
/* Создайте два неравных столбца, которые плавают рядом друг с другом */
/* Левая колонка */
.leftcolumn float: left;
width: 75%;
>
/* Правая колонка */
.rightcolumn float: left;
width: 25%;
padding-left: 20px;
>
/* Поддельное изображение */
.fakeimg background-color: #aaa;
width: 100%;
padding: 20px;
>
/* Добавить эффект карты для статей */
.card background-color: white;
padding: 20px;
margin-top: 20px;
>
/* Очистить поплавки после столбцов */
.row:after content: «»;
display: table;
clear: both;
>
/* Подвал */
.footer padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
>
/* Адаптивный макет — когда экран имеет ширину менее 800 пикселей, сделайте два столбца стеком друг на друга, а не рядом друг с другом */
@media screen and (max-width: 800px) .leftcolumn, .rightcolumn width: 100%;
padding: 0;
>
>
Совет: Зайдите на наш учебник CSS Макет сайта, чтобы узнать больше о макетах веб-сайтов.
Совет: Зайдите на наш учебник CSS Адаптивный веб дизайн, чтобы узнать больше о адаптивном веб-дизайне и сетках.
How TO — Blog Layout
Learn how to create a responsive blog layout with CSS.
Learn how to create a responsive blog layout that varies between two and full-width columns depending on screen width.
Resize the browser window to see the responsive effect:
How To Create a Blog Layout
Step 1) Add HTML:
Example
Blog Name
TITLE HEADING
Title description, Dec 7, 2017
Some text..
TITLE HEADING
Title description, Sep 2, 2017
Some text..
About Me
Some text about me in culpa qui officia deserunt mollit anim..
Popular Post
Follow Me
Some text..
Footer
Step 2) Add CSS:
Example
body font-family: Arial;
padding: 20px;
background: #f1f1f1;
>
/* Header/Blog Title */
.header padding: 30px;
font-size: 40px;
text-align: center;
background: white;
>
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn <
float: left;
width: 75%;
>
/* Right column */
.rightcolumn float: left;
width: 25%;
padding-left: 20px;
>
/* Fake image */
.fakeimg background-color: #aaa;
width: 100%;
padding: 20px;
>
/* Add a card effect for articles */
.card background-color: white;
padding: 20px;
margin-top: 20px;
>
/* Clear floats after the columns */
.row:after content: «»;
display: table;
clear: both;
>
/* Footer */
.footer padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
>
/* Responsive layout — when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) .leftcolumn, .rightcolumn <
width: 100%;
padding: 0;
>
>
Tip: Go to our CSS Website Layout Tutorial to learn more about website layouts.
Tip: Go to our CSS Responsive Web Design Tutorial to learn more about responsive web design and grids.
Макет блога на чистом CSS
Программирование и разработка
Макет блога на чистом CSS будет состоять из заголовка, меню навигации, основной области содержимого и нижнего колонтитула. Заголовок обычно содержит название блога и, возможно, логотип. Меню навигации позволит пользователям легко перемещаться по различным разделам блога. В основной области контента будут отображаться сообщения блога. Нижний колонтитул обычно содержит дополнительную информацию, такую как ссылки на профили блога в социальных сетях и уведомление об авторских правах.
Используемые классы:
- pure-g: создает контейнер для сетки, и все прямые дочерние элементы контейнера будут рассматриваться как элементы сетки.
- pure-u-1-3: указывает, что элемент должен занимать 1/3 доступной ширины в сетке.
- pure-menu: это класс для создания навигационного меню.
- pure-menu-heading: это класс для заголовка навигационного меню.
- pure-menu-list: это класс для создания неупорядоченного списка пунктов меню.
- pure-menu-item: это класс для каждого элемента списка в меню.
- pure-menu-link: это класс для элементов привязки в пунктах меню.
- pure-button: это класс для создания кнопки.
- pure-button-primary: этот класс используется для создания основной кнопки.
- pure-u-1: этот класс используется для создания ячейки сетки, которая охватывает всю ширину контейнера.
- pure-u-md-1-2: этот класс используется для создания ячейки сетки, которая занимает половину ширины контейнера на экранах среднего размера и выше.
Пример 1. Макет состоит из заголовка, содержащего заголовок и подзаголовок блога, и раздела для отображения сообщений блога. Каждое сообщение в блоге включает заголовок, дату и содержание. Сообщения в блоге располагаются в две колонки с использованием сетки Pure.css.