• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Адаптивная страница с блоками на HTML+CSS (Адаптивные html-блоки на странице с помощью CSS3)
Адаптивная страница с блоками на HTML+CSS
Kosten
Дата: Четверг, 2019-04-04, 20:58 | Сообщение 1
Администраторы
Сообщений:24253
Награды: 56


Здесь представлена адаптивная страница, плюс с ней идут блоки, также вверх сайта и них. Все это в оригинальном дизайн, что по стилистике можно изменить или выстроить под ваш основной сайт. Тема такая, что иногда мы создаем отдельные страницы, но вот как их оформить, то здесь мало кто делает.

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

Так страница выглядит в реальности:



HTML

Код
<header>Шапка страницы</header>
<div class="delacus-kamet-uguman">
<div class="desgua-bitump-erdiean">
<div class="decon-sectetuga-dipiscing">
<h1>Основной контент</h1>
<p>Также продолжаем описывать, и все это на одной странице.</p>
</div>
<aside>
<h2>Боковая колонка</h2>
<p>Здесь идет описание на странице. </p>
</aside>
</div>
</div>
<footer>Подвал страницы</footer>

CSS

Код
*{transition:.3s linear;}
body {
  margin: 0;
  background: #F0F0F0;
  font-family: cambria;
  color: #240152;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.delacus-kamet-uguman {flex: 1;}
header {
  padding: 20px;
  margin-bottom: 20px;
  background: #6F06CC;
  color: white;
}
.decon-sectetuga-dipiscing {
  padding: 20px;
  margin-bottom: 20px;
  background: white;
}
aside {
  padding: 20px;
  margin-bottom: 20px;
  background: white;
  border: 2px solid #FF9100;
}
footer {
  padding: 20px;
  background: #D1D1D1;
}

@media (min-width:768px) {
  .desgua-bitump-erdiean {display: flex;}
  .decon-sectetuga-dipiscing {
    width: calc(100% - 300px);
    margin-right: 20px;
  }
  aside {width: 300px;}
}


Также можете посмотреть ее в установке, и реально оценить.

Демонстрация
Прикрепления: 3587016.png(56.9 Kb) · saxen.zip(2.3 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Адаптивная страница с блоками на HTML+CSS (Адаптивные html-блоки на странице с помощью CSS3)
  • Страница 1 из 1
  • 1
Поиск: