Уважаемые друзья и пользователи сайта ART-UCOZ!
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Разметка сайта с использованием сетки
Дата добавления: 05.04.2017 - 13:31
Категория: Хаки / Дополнения
Добавил: Buger
Количество просмотров: 1.8k
Количество комментариев: 0
Размер файла: 1.6 Kb
Рейтинг материала: 5.0 / 2
БЕСПЛАТНО
рейтинг
5.0
/
голосов
2
HTML разметка
Вставляем между
Код
<body>
.......
</body>
.......
</body>
Код
<div class="container">
<header>
<div class="logo">Logo</div>
<nav>Nav</nav>
</header>
<div class="main">
<div class="sidebar">sidebar</div>
<div class="content">content</div>
<div class="sidebar">sidebar</div>
</div>
<footer>
Footer
</footer>
</div>
<header>
<div class="logo">Logo</div>
<nav>Nav</nav>
</header>
<div class="main">
<div class="sidebar">sidebar</div>
<div class="content">content</div>
<div class="sidebar">sidebar</div>
</div>
<footer>
Footer
</footer>
</div>
Код
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
CSS
Код
.container {
display: grid;
grid-template-rows: 2fr 10fr 1fr;
height: 100vh;
max-width: 1200px;
margin: 0 auto;
grid-gap: 1vw;
}
header {
background-color: #ccc;
display: grid;
grid-template-columns: 4fr 12fr;
align-items: center;
}
.main {
display: grid;
grid-template-columns: 4fr 10fr 3fr;
grid-gap: inherit;
}
footer {
background-color: #ccc;
text-align: center;
display: grid;
align-items: center;
}
.content {
background-color: #f1f1f1;
}
.sidebar {
background-color: #ccc;
}
.logo {
text-align: center;
}
display: grid;
grid-template-rows: 2fr 10fr 1fr;
height: 100vh;
max-width: 1200px;
margin: 0 auto;
grid-gap: 1vw;
}
header {
background-color: #ccc;
display: grid;
grid-template-columns: 4fr 12fr;
align-items: center;
}
.main {
display: grid;
grid-template-columns: 4fr 10fr 3fr;
grid-gap: inherit;
}
footer {
background-color: #ccc;
text-align: center;
display: grid;
align-items: center;
}
.content {
background-color: #f1f1f1;
}
.sidebar {
background-color: #ccc;
}
.logo {
text-align: center;
}
Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями: