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-технологии

Всплывающее модальное окно на jQuery

Всплывающее модальное окно на jQuery

Необходимо создать три файла или скачть modal-window-js.rar архив примера.

И так создаем HTML-файл - index.html

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

Красивое увеличение картинки при наведении

Красивое увеличение картинки при наведении

Нужно подготовить три файла ккартинку, HTML-файл и CSS-файл.

Создаем HTML-файл index.html с кодом:

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

Женщины о себе...

Женщина о себе - женский юмор

1. Женщина сказала - Женщина сделала! Если Женщина сказала и не сделала, значит, Женщина по-шу-ти-ла.

2. Умная девушка всегда знает, когда включить дуру.

3. Я вся такая легкая, такая воздушная, такая неземная, такая смелая, неотразимая... Короче, пьяная я сегодня!

4. Женская логика: "Лучше по-хорошему скажи, иначе я сама додумаю, хуже будет!"

5. Счастье - это когда ты ходишь в его футболке, без косметики, с нелепым хвостиком на голове и для него ты самая красивая на Земле!

6. Решила по дому мужскую работу сделать сама, легла на диван, смотрю телевизор. Тяжело, не спорю, но надо...

7. Тридцать - это те же двадцать, только более ухоженная, самостоятельная и уверенная в себе!

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

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

Бюджет создания сайта определяется индивидуально и составляем ~30т.р. (+или-). Срок выполнения 2-4 недели, всё зависит от сложности сайта и взаимодействия с клиентом. Обычно бывают задержки со стороны клиентов.

Верстка сайта производится сразу в двух вариантах:

  • Для обычных компьютеров (лэптопов)
  • Для мобильны устройств (планшетов, смартфонов)
Подробнее...

Статистика женщин и мужчин на 2016г.

Статистика женщин и мужчин на 2016г.

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

А вот, как реально обстоят дела по официальной статистике за 2016 год, взятой с официального сайта www.gks.ru - Федеральная служба государственной статистики.

И так: таблица 1.2. Женщины и мужчины по возрастным группам

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

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

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