SEO продвижение сайтов

CSS Grid и HTML - типичный шаблон для сайта

CSS Grid и HTML - типичный шаблон для сайта

Технология CSS Grid Layout достаточно молодая, но её уже поддерживают все основные браузеры с марта 2017-го. Модуль CSS Grid Layout вводит порядка 20 новых понятий, о которых я расскажу чуть позже. А сейчас пока предлагаю CSS Grid шаблон с HTML для типовой структуры типового сайта.

И так HTML код:

<!DOCTYPE html><html dir="ltr" lang="ru-ru">
<head>
<title>CSS Grid и HTML - тпичный шаблон для сайта</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
</head><body>

<div id="grid">
<main>
<h1>main</h1>
</main>
<header>
<p>header</p>
</header>
<aside class="left-sidebar">
<p>left-sidebar</p>
</aside>
<aside class="right-sidebar">
<p>right-sidebar</p>
</aside>
<footer>
<p>footer</p>
</footer>
</div>

</body></html>

И сам CSS Grid код:

* {margin:0; padding:0;}


header, main, aside, footer {border:1px solid #ccc; padding:5px;}

header {grid-area:header;}
main {grid-area:main;}
aside.left-sidebar {grid-area:left-sidebar;}
aside.right-sidebar {grid-area:right-sidebar;}
footer {grid-area:footer;}

#grid {
min-width:320px;
max-width:1200px;
margin:0 auto 1px;
min-height:100vh;
display:grid;
grid-gap:10px;
grid-template:100px 1fr 100px / 230px 1fr 230px;
grid-template-areas:"header header header"
"left-sidebar main right-sidebar"
"footer footer footer";
}

@media only screen and (max-width:750px)
{
#grid {
grid-template:100px auto auto auto 100px / 1fr;
grid-template-areas: "header"
"main"
"left-sidebar"
"right-sidebar"
"footer";
}

}

Скачать оба файла можно здесь - CSS _Grid.rar

Автор: Алехин Геннадий (11.04.2018)

Добавить комментарий


Защитный код
Обновить

Ошибки в тексте выделить и Ctrl+Enter


Расскажи о нас друзьям

Web-технологии

Переменные: инициализация и присвоение данных

Инициализация и присвоение данных в С++ начинается с указания типа данных, потом указывается имя переменных, после можно указать значение переменной согласно его типу. Имена переменных могут содержать латинские буквы и цифры, но не могут начинаться с цифры.

double d1(5000.0);//Число с точкой
double d2(5e3);//Другой способ присвоить значение 5000
double d3(.05);//0.05
double d4(5e-2);//Другой способ присвоить значение 0.05

А можно и так…

Подробнее...

Типы данных в С++

С++ строготипизированный язык и имеет следующие ТИПЫ ДАННЫХ.

const int HELLO_WORLD=50; - это константа, принято именовать большими буквами.

bool =1 или true (1) или false (0) – да или нет, логика

Int a =123; // 123 – целые числа

float b=(3.14); // 3.14 – число с точкой, до 6 знаков

double c=(3.14); // 3.14 – число с точкой, до 15 знаков

char – один символ

1 бит = (0 или 1)

1 байт = 8 бит (от 0 до 255 = 256 вариантов)

Таблица — Типы данных С++

Подробнее...

C++ для начинающих

Язык С++компилируемый, статически типизированный язык программирования общего назначения. Поддерживает такие парадигмы программирования, как процедурное программирование, объектно-ориентированное программирование, обобщённое программирование.

Язык имеет богатую стандартную библиотеку, которая включает в себя распространённые контейнеры и алгоритмы, ввод-вывод, регулярные выражения, поддержку многопоточности и другие возможности. C++ сочетает свойства как высокоуровневых, так и низкоуровневых языков.

Редакторы для C++

Visual studio (https://visualstudio.microsoft.com/ru/downloads/) - самый удобный редактор, хороший IDE, но «тяжёлый» есть и другие.

wxDev-C++ - простая и удобная среда разработки, может создавать как консольные, так и оконные приложения (и др.).

Комментарии кода

Комментарии игнорируются компилятором, можно писать что угодно: пояснение к коду или отключать строчки кода. Комментарии есть однострочные и многострочные.

// Это однострочный комментарий.
/*
Это многострочный комментарий.
Эта программа - ничего не делает.
*/

Структура программы и подключение библиотек

Подробнее...
Интересные статьи

Стишки-депрессяшки

Стишки-депрессяшки

У меня нет попы

у меня нет тить

я должна работать

чтобы как то жить

©

В камасутре много

интересных поз

жаль у нас с женою

остеохондроз

©

Надо же приснится

всякая херня

прямо на работе

среди бела дня

Подробнее...

Почему или резонные вопросы

Почему или резонные вопросы

Хотель бы получить ответы на такие вопросы:

  1. Почему современные технологии одновременно позволяют производить банки для пива, которые не разлагаются на свалке за 100 лет, и кузова автомобилей, которые гниют за 3-4 года?
  2. Почему лимонный сок сделан из концентрата, а средство для мытья посуды – из настоящего лимона?
  3. Почему белая нитка, которой соединены новые носки, всегда оказывается прочнее, чем нитки, из которых сделаны сами носки?
Подробнее...

Детские загадки для взрослых

murzilka m

*Загадки, которые были опубликованы в журнале "Мурзилка" 30 лет назад!!! Сегодня они не для детей точно: ))*

1. Чтобы спереди погладить, нужно сзади полизать. (Почтовая марка)

2. Кругом волоса, посредине колбаса. (Кукуруза)

3. Сверху черно внутри красно, как засунешь так прекрасно. (Галоши)

Подробнее...

Оставить заявку

Закрыть
Заполните фрму и отправьте нам заяку
Заполните все обязательные поля*
captcha
Перезагрузить