ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивная верстка главной страницы сайта

Адаптивная верстка главной страницы сайта

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

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

А так все очень понятно сделано, где можно выставить отдельную страницу, что изначально по первому взгляду идет как полноценный ресурс. Но здесь хоть и представлен вид материала, но он открываться не будет. Сделано для перехода, вообще пишем ключевое слово и выставляем на его изображение, и ссылку на оригинальный материал, где на сайте находится.

Здесь представлены элементы, что находятся на странице:

Адаптивная вёрстка сайта на примере создания главной страницы

1. Вверх сайта, плюс в ней навигация и название, что под логотип выводится.

Вверх сайта

2. Навигация, только уже вертикальном в виде, где идет в темном оттенке с эффектом наведение клика.

Мобильное меню сайта

3. Простой вид материалов в одну колонку, где размещается самый популярный или тематически по характеру материал.

Вид материалов файлов

4. Есть место под баннеры, но больше всего можно поставить свой внутренний переход.

Блоки

Приступаем к установке:

HTML

Код
<div class="nsequan-ugeveniet">
  <div class="header">
  <img src="http://images.vfl.ru/ii/1550247701/c1b02bdf/25406525.png">
  <ul class="nosegum-kenuban">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Блог</a></li>
  <li><a href="#">Статьи</a></li>
  <li><a href="#">Портфолио</a></li>
  <li><a href="#">Контакты</a></li>
  </ul>
  <div class="banner"><img src="http://images.vfl.ru/ii/1550247625/b4e94e64/25406512.png" alt=""></div>
  </div>
  <div class="demevenieg">
  <div class="kugconsequa">
  <ul class="kugconsequa-menu">
  <li><a href="#">Скрипты</a></li>
  <li><a href="#">Шаблоны</a></li>
  <li><a href="#">Дизайн</a></li>
  <li><a href="#">Стилистика</a></li>
  <li><a href="#">Скачать файл</a></li>
  <li><a href="#">Обратная связь</a></li>
  </ul>
  <img src="Ссылка на изображение/250x300">
  <img src="Ссылка на изображение/250x300">
  </div>
  <div class="danlaceholdem">
  <h1>ZorNet.Ru - сайт вебмастера</h1>
  <p>Генеральная группа Z постепенно выходит на рынок маркетинга и начинает заменять Millennials. </p>
  <p>Покупательная способность - это не то же самое, что маркетинг для Millennials. аудитории Gen Z оценивалась от 29 до 143 млрд долларов.</p>
  <div class="sequal-bequaeran">
  <img src="Ссылка на изображение/200x150">
  <div class="text">
  <h2>Раздел для вебмастера </h2>
  <p>Описание под материал на сайте.</p>
  </div>
  </div>
  <div class="sequal-bequaeran">
  <img src="Ссылка на изображение/200x150">
  <div class="text">
  <h2>Меню для сайта</h2>
  <p>Описание под материал под ресурс №4</p>
  </div>
  </div>
  <div class="sequal-bequaeran">
  <img src="Ссылка на изображение/200x150">
  <div class="text">
  <h2>Графика для сайта</h2>
  <p>Описание под материал интернет портал №1</p>
  </div>
  </div>
  <div class="sequal-bequaeran">
  <img src="Ссылка на изображение/200x150">
  <div class="text">
<h2>Мини профиль для сайта</h2>
  <p>Описание под материал заданный файл №2</p>
  </div>
  </div>
  </div>
  </div>
  <div class="kalumvusam">
  <p>ZORNET.RU - Уроки по веб разработкам</p>
  </div>
</div>

CSS

Код
body {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
  background: #c9c9ca;
}

.nsequan-ugeveniet {
  background: #f0f0f1;
  max-width: 900px;
  padding: 0 10px;
  margin: auto;
}
.header {
  /*background: #e7bf9e;*/
}
.demevenieg {

}

.header img {
  margin: 10px;
}
ul.nosegum-kenuban {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #216980;
  display: flex;
  justify-danlaceholdem: center;
}
.nosegum-kenuban li a {
  color: #f0f0f1;
  padding: 12px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 15px;
  display: block;
}
.nosegum-kenuban li:hover {
  background: #153243;
}
.banner img {
  margin: auto;
  width: 100%;
}
.demevenieg {
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
}
.kugconsequa {
  width: 250px;
}
.danlaceholdem {
  width: 100%;
  margin-left: 20px;
}
.kugconsequa-menu {
  background: #676767;
  padding: 0;
  margin: 0;
  list-style: none;
}
.kugconsequa-menu li {
  border-bottom: solid 1px #4a4a4a;
}
.kugconsequa-menu li a {
  color: #f0f0f1;
  font-size: 14px;
  display: block;
  padding: 10px;
  text-decoration: none;
  text-transform: uppercase;
}
.kugconsequa-menu li:hover {
  background: #153243;
}
.kugconsequa img {
  text-align: center;
  margin-top: 10px;
}
.danlaceholdem h1 {
  color: #4c4949;
  margin: 5px 0;
}
.danlaceholdem p {
  color: #4c4949;
  margin: 10px 0;
}
.sequal-bequaeran {
  background: #fbf7f7;
  border: 1px solid #ccc6c6;
  margin-top: 15px;
  margin-bottom: 15px;
  display: flex;
}
.sequal-bequaeran img {
  margin-right: 10px;
}
.text h2 {
  color: #504b4b;
}
.text p {
  font-size: 14px;
}
.kalumvusam {
  background: #123346;
  height: 50px;
  display: flex;
}
.kalumvusam p {
  color: #f0f0f1;
  margin: auto;
}

@media all and (max-width: 820px) {
  .header img {
  width: 100px;
}
.banner img {
  width: 100%;
}
.nosegum-kenuban li a {
  font-size: 12px;
}
.demevenieg {
  flex-direction: column-reverse;
}
.kugconsequa {
  width: 100%;
  text-align: center;
}
.kugconsequa img {
  margin: 10px 5px 10px;
}
.danlaceholdem {
  margin-left: 0;
}
}

@media all and (max-width: 580px) {
  .nosegum-kenuban li,
  .banner {
  display: none;
  }
  .nosegum-kenuban::before {
  danlaceholdem: '';
  height: 39px;
  }
  .kugconsequa-menu {
  margin-bottom: 5px;
  }
  .kugconsequa img {
  width: 100%;
  margin: 5px auto;
  }
  .danlaceholdem h1 {
  font-size: 26px;
  }
  .danlaceholdem p {
  font-size: 14px;
  }
  .sequal-bequaeran {
  flex-direction: column;
  }
  .sequal-bequaeran img {
  margin: 0;
  height: 150px;
  }
  .text {
  padding: 10px;
  }
  .text h2 {
  font-size: 20px;
  margin:5px 0 0;
  }
}

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

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

Демонстрация
15 Февраля 2019 Загрузок: 1 Просмотров: 1381 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 1
Kosten
Kosten 15 Февраля 2019 21:211
0
Также представлен аналогичный материал, где просто немного другая стилистика дизайна, что называется адаптивный веб-дизайн страницы сайта, где можете посмотреть и сравнить с этим шаблоном одной страницы.
avatar