book51.ru

Инструменты пользователя

Инструменты сайта

  • Показать исходный текст
  • История страницы
  • Ссылки сюда
  • Оставить на чай
  • Экспорт в PDF
  • Наверх
    • Вы посетили: • Адаптивная вёрстка сайта (теория и практика)
    software:development:demo:responsive_site_layout

    Это старая версия документа!

    Содержание

    Адаптивная вёрстка сайта (теория и практика)

    Адаптивная верстка сайта (от английского, responsive web design, иногда — adaptive web design) — это создание структуры HTML-документа на базе HTML-разметки, предусматривающей автоматическую адаптацию веб-страницы в зависимости от размера экрана устройства пользователя. Иными словами - это макет веб-страницы, автоматически подстраивающийся под размер экрана разнообразных гаджетов пользователя, таких как планшеты и смартфоны. В адаптивной вёрстка предполагается использование современных технологий, делающих основные элементы, изменяющими свой размер и расположение на странице, исходя из ширины окна. При этом отсутствуют и полосы прокрутки. Для просмотра контента достаточно просто листать страницы вниз. Для отображения на смартфонах и планшетах лишние элементы отсеивают: убирают графические объекты, сворачивают меню, оставляя только самые значимые блоки. Параллельно увеличивается размер элементов управления, чтобы нужную кнопку без труда можно было нажать пальцем, ведь на обычном сайте попасть по ссылке с первого раза удается не всегда. Все это достигается с помощью медиа-запросов, которые лежат в основе данной технологии, меняют масштаб элементов, а CSS свойства дают полную свободу действий, управляя компоновкой и расположением блоков на странице, автоматически преобразуя шаблон. Данная статья рассматривает применение адаптивной резиновой вёрстки при создании главной страницы.

    Шаблон страницы при верстки

    Страница состоит из четырех основных блоков: Шапка сайта или хедер (от анг. header — заголовок) – это титульная верхняя часть страницы, в которой располагаются элементы навигации (nav или меню) и элементы, содержащие информацию о сайте, блок основного содержимого (main) и сайдбар (sidebar) — это боковая панель сайта, визуально разграниченная с контентом на странице. Благодаря ее блокам посетители понимают, что и где расположено на сайте. Ширина боковой панели обычно меньше ширины основного блока с контентом. подвал или футер (от анг. footer - нижний колонтитул) — блок в нижней части страницы. За основу преломления шаблона возьмём 768px и 480px.

    CSS
    /* Устройства с очень маленьким экраном (смартфоны, меньше 768px) */
/* Стили CSS (по умолчанию) - для ширины viewport <768px */
 
/* Устроства с маленьким экраном (планшеты, 768px и выше) */
@media (min-width: 768px) {
/* Стили для устройств с шириной viewport, находящейся в диапазоне 768px - 991px */
}
 
/* Устройства со средним экраном (ноутбуки и компьютеры, 992px и выше) */
@media (min-width: 992px) {
  /* Стили для устройств с шириной viewport, находящейся в диапазоне 992px - 1199px */
}
 
/* Устройства с большим экраном (компьютеры, 1200px и выше) */
@media (min-width: 1200px) {
  /* Стили для устройств с шириной viewport >1200px */
}

    Пример сайта

    Пример сайта выполненного в адаптивной вёрстке можно посмотреть в разделе пример или перейдя по ссылке. для понимания примера необходимо сузить просматриваемую страницу в браузере или просмотреть на компьютере и в браузере мобильного устройства.

    1. Блок <head>

    Добавим в блок <head> (голова) запись кода приведенного ниже и открыв «Пояснительную записку блока <head>:« разберем данный код:

    HTML
    <!--начало веб страницы-->
<!DOCTYPE html> 
<html>
<!--начало блока метаданных веб страницы-->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive site layout</title>
  <link type="Image/x-icon" href="blender3d_demo/images/favicon.ico" rel="shortcut icon">
  <!-- our project just needs Font Awesome Solid + Brands -->
  <link rel="stylesheet" type="text/css" href="blender3d_demo/css/Font-Awesome-6.x/css/all.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="blender3d_demo/css/Font-Awesome-6.x/css/v4-shims.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="blender3d_demo/css/blender3d_demo.css">
  <script src="blender3d_demo/js/jquery/2.2.2/jquery.min.js"></script>
  <script src="blender3d_demo/js/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<!--конец блока метаданных веб страницы-->

    1. <!DOCTYPE html> - указания типа текущего документа (HTML5).
    2. <html> - открывающий тег, является началом блока (контейнера), который заключает в себе все содержимое веб-страницы.
    3. <head> - открывающий тег блока , содержащего машиночитаемую информацию (metadata).
    4. <meta charset="utf-8"> - указывает кодировку документа.
    5. <meta name="viewport" content="width=device-width, initial-scale=1"> - сообщение браузеру, что ширина страницы равна ширине устройства, с которого эта страница просматривается. (width(ширина сайта) = device-width(ширина устройства) и масштаб: 1).
    6. <title>Responsive site layout</title> - заголовок страницы на вкладке браузера.
    7. <link type="Image/x-icon" href="blender3d_demo/images/favicon.ico" rel="shortcut icon"> - иконка страницы на вкладке браузера.
    8. <link rel="stylesheet" type="text/css" href="blender3d_demo/css/Font-Awesome-6.x/css/all.css" rel="stylesheet"> - подключение библиотеки векторных иконок
    9. <link rel="stylesheet" type="text/css" href="blender3d_demo/css/Font-Awesome-6.x/css/v4-shims.css" rel="stylesheet"> - подключение библиотеки векторных иконок
    10. <link rel="stylesheet" type="text/css" href="blender3d_demo/css/blender3d_demo.css"> - подключение внешней таблицы стилей CSS описанный ниже.
    11. <script src="blender3d_demo/js/jquery/2.2.2/jquery.min.js"></script> - подключение библиотеки с набором функций JavaScript, фокусирующийся на взаимодействии JavaScript и HTML. (min - минимальный набор функций).
    12. <script src="blender3d_demo/js/prefixfree/1.0.7/prefixfree.min.js"></script> - подключение плагина prefixfree, дающего возможность исключать префиксы, у свойств таблицы CSS, которые еще не до конца стандартизированы.
    13. </head> - закрывающий тег блока

    2. Блок header

    В блок заголовка <header> запишем следующие элементы блоков (контейнеров): логотип, кнопки меню и поиска по сайту, и открыв «Пояснительную записку блока <header>» разберем данный код:

    HTML
    <header>
<!--начало блока логотип/меню веб страницы-->
    <nav class="container">
      <a class="logo" href=""><img src="blender3d_demo/blender3d_demo.png" ></a>
      <div class="nav-toggle"><span></span></div>
      <form action="" method="get" id="searchform">
        <input type="text" placeholder="search...">
        <button type="submit"><i class="fa fa-search"></i></button>
      </form>
      <ul id="menu">
        <li><a href="">Features</a></li>
        <li><a href="">Download</a></li>
        <li><a href="">Support</a></li>
      </ul>
    </nav>
<!--конец блока логотип/меню веб страницы-->
</header>

    1. <header> - открывающий тег блока.
    2. <nav class="container"> - начало нашего блока колонтитула.
    3. <a class="logo" href=""><img src="blender3d_demo/blender3d_demo.png" ></a> - блок логотипа с указанием месторасположения иконки.
    4. <div class="nav-toggle"><span></span></div> - блок кнопки показа/скрытия главного меню.
    5. <form action="" method="get" id="searchform"> - начало блока формы поиска.
    6. <input type="text" placeholder="search..."> - форма ввода текста поиска.
    7. <button type="submit"><i class="fa fa-search"></i></button>
    8. </form> - закрывающий тег формы поиска.
    9. <ul id="menu"> - блок главного меню.
    10. <li><a href="">Features</a></li> - кнопка меню «Features».
    11. <li><a href="">Download</a></li> - кнопка меню «Download».
    12. <li><a href="">Support</a></li> - кнопка меню «Support».
    13. </ul> - конец блок главного меню.
    14. </nav> - конец нашего блока колонтитула.
    15. </header> - закрывающий тег блока.

    3. Блок main

    В данный блок поместим предварительное содержимое анонса статей и открыв «Пояснительную записку блока main» разберем данный код:

    HTML
    <!--начало тела веб страницы--> 
<body>
<!--начало контейнера контента веб страницы-->
<div class="container">
<!--начало контейнера контента анонса статей страницы-->
  <div class="posts-list">
    <article id="post-1" class="post">
      <div class="post-image"><a href=""><img src="blender3d_demo/blender3d_demo_1.png" ></a></div>
      <div class="post-content">
        <div class="category"><a href="">Features</a></div>
        <h2 class="post-title">Blender 3.6 LTS</h2>
        <p>Blender 3D program
        Blender is one of the most popular 3D modeling software. This is a multifunctional software, acquaintance with which will be useful for those who are interested in 3d graphics and who want to understand the basic principles of this industry.</p>
        <div class="post-footer">
          <a class="more-link" href="">Continue Reading</a>
          <div class="post-social">
            <a href="" target="_blank"><i class="fa fa-facebook"></i></a>
            <a href="" target="_blank"><i class="fa fa-twitter"></i></a>
            <a href="" target="_blank"><i class="fa fa-pinterest"></i></a>
          </div>
        </div>
      </div>
    </article>
        <article id="post-2" class="post">
      <div class="post-image"><a href="">
	    <video width="100%"  controls="controls" poster="blender3d_demo/poster.jpg">
            <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
            <source src="blender3d_demo/vesna(720p).mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        </video>
	  </a></div>
      <div class="post-content">
        <div class="category"><a href="">Download</a></div>
        <h2 class="post-title">Spring</h2>
        <p> Is the story of a shepherdess and her dog who encounter ancient spirits in order to continue the cycle of life..</p>
        <div class="post-footer">
          <a class="more-link" href="">Continue Reading</a>
          <div class="post-social">
            <a href="" target="_blank"><i class="fa fa-facebook"></i></a>
            <a href="" target="_blank"><i class="fa fa-twitter"></i></a>
            <a href="" target="_blank"><i class="fa fa-pinterest"></i></a>
          </div>
        </div>
      </div>
    </article>
</div>
<!--конец контейнера контента анонса статей страницы-->

    1. <body> - начало блока хранения содержания веб-страницы (контента).
    2. <div class="container"> - начало контейнера контента веб страницы.
    3. <div class="posts-list"> - начало контейнера с анонсом статей.
    4. <article id="post-1" class="post"> - начало контейнера с анонсом 1й статьи.
    5. <div class="post-image"><a href=""><img src="blender3d_demo/blender3d_demo_1.png" ></a></div> - блок вставки картинки с указанием месторасположения файла.
    6. <div class="post-content"> - начало блока текстовой информации 1й статьи.
    7. <div class="category"><a href="">Features</a></div> - блок указания категории 1й статьи.
    8. <h2 class="post-title">Blender 3.6 LTS</h2> - блок заголовка 1й статьи.
    9. <p> - Blender 3D program Blender is one of the most popular 3D modeling software. This is a multifunctional software, acquaintance with which will be useful for those who are interested in 3d graphics and who want to understand the basic principles of this industry. - </p> - блок текста 1й статьи.
    10. <div class="post-footer"> - начало блока «Читать далее» 1й статьи.
    11. <a class="more-link" href="">Continue Reading</a> - блок надписи «Читать далее» 2й статьи.
    12. <div class="post-social"> - начало блока иконок-ссылок социальных сетей.
    13. <a href="" target="_blank"><i class="fa fa-facebook"></i></a> - иконка-ссылка «facebook»
    14. <a href="" target="_blank"><i class="fa fa-twitter"></i></a> - иконка-ссылка «twitter»
    15. <a href="" target="_blank"><i class="fa fa-pinterest"></i></a> - иконка-ссылка «pinterest»
    16. </div> - конец блока иконок-ссылок социальных сетей.
    17. </div> - конец блока «Читать далее» 1й статьи.
    18. </div> - конец блока текстовой информации 1й статьи.
    19. </article> - конец контейнера с анонсом 1й статьи.
    20. <article id="post-2" class="post"> - начало контейнера с анонсом 2й статьи.
    21. <div class="post-image"><a href=""> - начало блока вставки видеофайла с указанием месторасположения.
    22. <video width="100%" controls="controls" poster="blender3d_demo/poster.jpg"> - начало вставки видеофайла с указанием ширины, вставки панели управления, и файла-постера с указанием месторасположения.
    23. <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'> -
    24. <source src="blender3d_demo/vesna(720p).mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> - месторасположение встраиваемо видеофайла с указанием кодеков.
    25. </video> - закрывающий тег вставки видеофайла.
    26. </a></div> - конец блока вставки видеофайла с указанием месторасположения.
    27. <div class="post-content"> - начало блока текстовой информации 2й статьи.
    28. <div class="category"><a href="">Download</a></div> - блок указания категории 2й статьи.
    29. <h2 class="post-title">Spring</h2> - блок заголовка 2й статьи.
    30. <p> - Is the story of a shepherdess and her dog who encounter ancient spirits in order to continue the cycle of life.. - </p> - блок текста 2й статьи.
    31. <div class="post-footer"> - начало блока «Читать далее» 2й статьи.
    32. <a class="more-link" href="">Continue Reading</a> - блок надписи «Читать далее» 2й статьи.
    33. <div class="post-social"> - начало блока иконок-ссылок социальных сетей.
    34. <a href="" target="_blank"><i class="fa fa-facebook"></i></a> - иконка-ссылка «facebook»
    35. <a href="" target="_blank"><i class="fa fa-twitter"></i></a> - иконка-ссылка «twitter»
    36. <a href="" target="_blank"><i class="fa fa-pinterest"></i></a> - иконка-ссылка «pinterest»
    37. </div> - конец блока иконок-ссылок социальных сетей.
    38. </div> - конец блока «Читать далее» 2й статьи.
    39. </div> - конец блока текстовой информации 2й статьи.
    40. </article> - конец контейнера с анонсом 2й статьи.
    41. </div> - конец контейнера с анонсом статей.

    4. Блок <aside>

    В боковую колонку <aside> добавим список категорий c анонсом последних записей и открыв «Пояснительную записку блока <aside>» разберем данный код:

    HTML
    <!-- начало контейнера контента правой колонки веб страницы--> 
<aside>
  <div class="widget">
    <h3 class="widget-title">Categories</h3>
    <ul class="widget-category-list">
      <li><a href="">Features</a> (3)</li>
      <li><a href="">Download</a> (2)</li>
      <li><a href="">Support</a> (1)</li>
    </ul>
  </div>
  <div class="widget">
    <h3 class="widget-title">The last notes</h3>
    <ul class="widget-posts-list">
      <li>
        <div class="post-image-small">
          <a href=""><img src="blender3d_demo/blender3d_demo_2.jpg"></a>
        </div>
     <h3>Cycles</h3>   
     is Blender’s built-in powerful unbiased path-tracer engine that offers stunning ultra-realistic rendering. · Real-time viewport preview· CPU & GPU rendering· PBR shaders & HDR lighting support· VR rendering support
	  </li>
	  <li>
        <div class="post-image-small">
          <a href=""><img src="blender3d_demo/blender3d_demo_3.jpg"></a>
        </div>
     <h3>Modeling</h3>
	 blender’s comprehensive array of modeling tools make creating, transforming and editing your models a breeze. · Full N-Gon support· Edge slide, inset, grid and bridge fill, and more· Advanced sculpting tools and brushes· Multi-resolution and Dynamic subdivision· 3D painting with textured brushes and masking · Python scripting for custom tools and add-ons
	  </li>
      <li>
        <div class="post-image-small">
          <a href=""><img src="blender3d_demo/blender3d_demo_4.jpg"></a>
        </div>
        <h3>VFX</h3>
        professionals say: “Probably the best tracker in the market”. Blender includes production ready camera and object tracking. Allowing you to import raw footage, track the footage, mask areas and see the camera movements live in your 3D scene. Eliminating the need to switch between programs.
      </li>
	  <li>
        <div class="post-image-small">
          <a href=""><img src="blender3d_demo/blender3d_demo_5.jpg"></a>
        </div>
        <h3>Animation</h3>
        Thanks to the high quality rigging and animation tools, Blender is being used for numerous short films, advertisements, TV series and feature films now.· Envelope, skeleton and automatic skinning· B-spline interpolated bones· Curve editor and dope sheets· Custom bone shapes for fast input· Sound synchronization
      </li>	  
    </ul>
  </div>
</aside>
<!-- конец контейнера контента правой колонки веб страницы-->
</div> 
<!-- конец контейнера контента веб страницы-->

    1. <aside> - начало контейнера контента правой колонки веб страницы.
    2. <div class="widget"> - начало блока категорий.
    3. <h3 class="widget-title">Categories</h3> - блок с рамкой и названием «Категории»
    4. <ul class="widget-category-list"> - начало блока перечислений категорий.
    5. <li><a href="">Features</a>(3)</li> - блок категории «Features» с указанием количества статей.
    6. <li><a href="">Download</a>(2)</li> - блок категории «Download» с указанием количества статей.
    7. <li><a href="">Support</a>(1)</li> - блок категории «Support» с указанием количества статей.
    8. </ul> - конец блока перечислений категорий.
    9. </div> - конец блока категорий.
    10. <div class="widget"> - начало блока анонсов статей.
    11. <h3 class="widget-title">The last notes</h3> - блок с рамкой и названием «Последние записи».
    12. <ul class="widget-posts-list"> - начало блока анонсов статей «Последние записи».
    13. <li> - начало блока анонса статьи (для остальных статей идентично этому блоку).
    14. <div class="post-image-small"> - начало блока вставки картинки анонса статьи.
    15. <a href=""><img src="blender3d_demo/blender3d_demo_2.jpg"></a> - вставка картинки с указанием месторасположения.
    16. </div> - конец блока вставки картинки анонса статьи
    17. <h3>Cycles</h3> is Blender’s built-in powerful unbiased path-tracer engine that offers stunning ultra-realistic rendering. · Real-time viewport preview· CPU & GPU rendering· PBR shaders & HDR lighting support· VR rendering support - заголовок и текст анонса статьи.
    18. </li> - конец блока анонса статьи (для остальных статей идентично этому блоку).
    19. </ul> - конец блока анонсов статей «Последние записи».
    20. </div> - конец блока анонсов статей.
    21. </aside> - конец контейнера контента правой колонки веб страницы.
    22. </div> - конец контейнера всего контента веб страницы.

    В подвале страницы разместим информацию о копирайте и открыв «Пояснительную записку блока <footer>» разберем данный код:

    HTML
    <!--начало контейнера подвал веб страницы-->
<footer>
    <div class="footer-col"><span>The Free and Open Source 3D Creation Suite © 2023</span></div>
</footer>
<!--конец контейнера подвал веб страницы-->
</body>
</html>
<!--конец веб страницы-->

    1. <footer> - начало блока «подвал».
    2. <div class="footer-col"><span>The Free and Open Source 3D Creation Suite © 2023</span></div> - блок текста копирайта.
    3. </footer> - конец блока «подвал».
    4. </body> - конец блока хранения содержания веб-страницы (контента).
    5. </html> - закрывающий тег, является концам блока (контейнера), который заключает в себе все содержимое веб-страницы.

    6. Общие CSS-стили

    Общие стили, сброс стилей браузера по умолчанию:

    CSS
    *, *:after, *:before {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   transition: .5s ease-in-out;
   /* добавим плавность переходов для всех элементов страницы*/
}
ul {
   list-style: none;
}
a {
   text-decoration: none;
   outline: none;
}
img {
   display: block;
   width: 100%;
}
h1, h2, h3, h4, h5, h6 {
   font-family: 'Playfair Display';
   font-weight: normal;
   letter-spacing: 1px;
}
body {
   font-family: 'Open Sans', arial, sans-serif;
   font-size: 14px;
   line-height: 1;
   color: #373737;
   background: #f7f7f7;
}
/* добавим очистку потока для всех контейнеров, внутри которых задано обтекание дочерних элементов */
header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after {
   content: "";
   display: table;
   clear: both;
}
/* стилевой класс, который управляет шириной контейнера сетки*/
.container {
   margin: 0 auto;
   width: 100%;
   max-width: 960px;
   padding: 0 15px;
}

    7. Стили для шапки и её содержимого

    CSS
    header {
   width: 100%;
   background: #2f4f4f;/* цвет и размер блока меню */
   box-shadow: 3px 3px 1px rgba(0, 0, 0, .05);
   padding: 15px 0;
   margin-bottom: 30px;
   position: relative;
}
/* логотип */
.logo {
   display: block;
   float: left;
}
.logo span {
   color: #f7f7f7;
   display: inline-block;
   width: 30px;
   height: 30px;
   line-height: 30px;
   border-radius: 50%;
   margin: 5px 0;
   text-align: center;
   text-shadow: 2px 2px 1px rgba(0, 0, 0, .4);
}
.logo span:nth-child(odd) {
   background: #EF5A42;
}
.logo span:nth-child(even) {
   background: #f7f7f7;
}
/* меню */
#menu {
   float: right;
}
#menu li {
   display: inline-block;
   margin-right: 30px;
}
#menu a {
   color: #f5f5f5;/*цвет меню*/
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 600;
   display: block;
   line-height: 40px;
}
#menu a:hover {
   color: #2f4f4f;/* цвет и размер верхней полосы разделителей блока "продолжить чтение" */
}
#menu li:last-child {
   margin-right: 0;
}
/* форма поиска */
#searchform {
   float: right;
   margin-left: 46px;
   display: inline-block;
   position: relative;
}
#searchform input {
   width: 170px;
   float: left;
   border: none;
   padding-left: 10px;
   height: 40px;
   overflow: hidden;
   outline: none;
   color: #9E9C9C;
   font-style: italic;
}
#searchform button {
   background: transparent;
   height: 40px;
   border: none;
   position: absolute;
   right: 10px;
   color: black;
   cursor: pointer;
   font-size: 18px;
}
#searchform input:focus {
   outline: 2px solid #EBEBE3;
}
/* кнопка переключения меню, появляющаяся при ширине 768px */
.nav-toggle {
   display: none;
   position: relative;
   float: right;
   width: 40px;
   height: 40px;
   margin-left: 20px;
   background: black;
   cursor: pointer;
}
.nav-toggle span {
   display: block;
   position: absolute;
   top: 19px;
   left: 8px;
   right: 8px;
   height: 2px;
   background: white;/* цвет и размер верхней полосы разделителей кнопки меню для мобильных */
}
.nav-toggle span:before, .nav-toggle span:after {
   content: "";
   position: absolute;
   display: block;
   left: 0;
   width: 100%;
   height: 2px;
   background: white;/* цвет и размер верхней полосы разделителей кнопки меню для мобильных */
}
.nav-toggle span:before {
   top: -10px;
}
.nav-toggle span:after {
   bottom: -10px;
}
/* класс, который будет добавлен в верхнему меню при нажатии на кнопку и покажет скрытое меню*/
#menu.active {
   max-height: 123px;
}

    8. Стили для блока с основным содержимым

    CSS
    /* левый контейнер */
.posts-list {
   margin-bottom: 30px;
   width: 64%;
   float: left;
}
/* блок для статьи */
.post {
   margin-bottom: 35px;
}
.post-content p {
   line-height: 1.5;
   padding-bottom: 1em;
}
.post-image {
   margin-bottom: 30px;
   box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени картинки поста */
}
.category {
   margin-bottom: 15px;
}
.category a {
   color: #d3d3d3;
   text-transform: uppercase;
}
.post-title {
   margin-bottom: 12px;
   font-size: 26px;
}
/* блок с кнопкой "продолжить чтение" и кнопками социальных сетей */
.post-footer {
   border-top: 1.5px solid #2f4f4f;/* цвет и размер верхней полосы разделителей блока "продолжить чтение" */
   border-bottom: 1.5px solid #2f4f4f;/* цвет и размер нижней полосы разделителей блока "продолжить чтение" */
   position: relative;
   margin-top: 10px;/*отступ блока от текста-контента*/
}
.more-link {
   position: relative;
   display: inline-block;
   font-size: 10px;
   text-transform: uppercase;
   color: white;
   line-height: 34px;/* блока блока "продолжить чтение" */
   padding: 0 20px;
   background: #2f4f4f;/* цвет фона блока "продолжить чтение" */
   letter-spacing: 0.1em;
   white-space: nowrap;
}
.more-link:after {
   content: '';
   display: block;
   position: absolute;
   width: 0;
   height: 0;
   top: 0;
   right: 0;
   border: solid transparent;
   border-width: 17px 25px;/*высота и длина  треугольника блока "продолжить чтение" */
   border-left-color: #2f4f4f;/* цвет фона треугольника блока "продолжить чтение" */
   transform: translateX(100%);
}
.post-social {
   position: absolute;
   left: auto;
   top: 50%;
   right: 0;
   text-align: right;
   transform: translateY(-50%);
   padding: 0;
   font-size: 12px;
}
.post-social a {
   display: inline-block;
   margin-left: 8px;
   color: #2f4f4f;/* цвет фона иконок соц сетей в блока "продолжить чтение" */
   width: 25px;
   height: 25px;
   line-height: 23px;
   text-align: center;
   border-radius: 50%;
   border: 1px solid;
}

    9. Стили для боковой колонки

    CSS
    /* правый контейнер */
aside {
   width: 33%;
   float: right;
}
/* блок для виджетов */
.widget {
   padding: 20px 15px;
   background: #dcdcdc;/* цвет блока для виджетов */
   font-size: 13px;
   margin-bottom: 30px;
   box-shadow: 4px 4px 2px rgba(0, 0, 0, .05);/* тень рамки блоков */
}
.widget-title {
   font-size: 15px;/* размер шрифта элемента */
   padding: 10px;/* значение полей вокруг содержимого*/
   margin-bottom: 10px;/* отступ от рамки блоков */
   text-align: center;/* положение текста блоков */
   border: 2px solid #2f4f4f;/* цвет рамки категорий */
   box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени блока категорий */
}
.widget-category-list li {
   border-bottom: 1.5px solid #2f4f4f;/* цвет и размер полос разделителей блока категорий */
   padding: 8px 0;/* значение полей вокруг содержимого*/
   color: 	#2f4f4f;/* цвет текста количества постов в категории*/
   font-style: arial; /* шрифт текста наименования постов в категории*/
}
.widget-category-list li:last-child {
   border-bottom: none;
}
.widget-category-list li a {
   color: 	#2f4f4f;/* цвет текста наименований категорий постов*/
   margin-right: 20px;/* отступ от текста наименований категорий постов */
   font-style: normal;/*обычное начертание текста*/
}
.widget-category-list li a:before {
   content: "\f105"; /* стрелки перед текстом наименований категорий постов*/
   display: inline-block;
   font-family: 'FontAwesome';
   margin-right: 10px;
   color: #2f4f4f;/* цвет стрелки перед текстом наименований категорий постов*/
}
.widget-posts-list li {
   border-top: 1.5px solid 	#2f4f4f;/* цвет и размер полос разделителей блока постов */
   padding: 8px 0;/* значение полей вокруг содержимого*/
}
.widget-posts-list li:nth-child(1) {
   border-top: none;
}
.post-image-small {
   width: 60%; /*размер картинки*/
   float: left;/*положение картинки*/
   margin-right: 15px;/*отступ от правого края картинки*/
   box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени картинки */
}
.widget-post-title {
   float: left;
}

    10. Стили для нижнего колонтитула

    Подвал сайта разделим на три равных столбца:

    CSS
    footer {
   padding: 20px 0;
   background: #3C3D41;
   color: white;
}
.footer-col {
   width: 100%;
   float: left;
}
.footer-col a {
   color: white;
}

    11. Медиа-запросы

    CSS
    @media (max-width: 768px) {
   /* показываем кнопку для переключения верхней навигации */
   .nav-toggle {
      display: block;
   }
   header {
      padding: 10px 0;
   }
   /* скрываем верхнее меню, отменяем обтекание, позиционируем его, сместив на высоту шапки сайта */
   #menu {
      max-height: 0;
      background: white;
      float: none;
      position: absolute;
      overflow: hidden;
      top: 63px;
      right: 0;
      left: 0;
      margin: 0;
      padding: 0;
      z-index: 3;
   }
   /* делаем элементы списка блочными, чтобы они располагались друг под другом */
   #menu li {
      display: block;
      text-align: center;
      border-bottom: 1px solid black;
      margin-right: 0;
   }
   /* отменяем обтекание левой и правой колонок, устанавливаем им ширину 100%*/
   .posts-list, aside {
      width: 100%;
      float: none;
   }
   .widget-post-title {
      font-size: 1.5em;
   }
}
 
@media (max-width: 480px) {
   /* отменяем обтекание для логотипа и выравниваем по центру*/
   .logo {
      float: none;
      margin: 0 auto 15px;
      display: table;
   }
   .logo span {
      margin: 0 2px;
   }
   /* позиционируем меню на увеличившуюся высоту шапки */
   #menu {
      top: 118px;
   }
   /* позиционируем форму поиска по левому краю */
   #searchform {
      float: left;
      margin-left: 0;
   }
   /* убираем верхнюю и нижнюю границы и выравниваем кнопку по центру */
   .post-footer {
      border-top: none;
      border-bottom: none;
      text-align: center;
   }
   /* отменяем позиционирование кнопок соцсетей */
   .post-social {
      position: static;
      text-align: center;
      transform: none;
      margin-top: 20px;
   }
   .widget-post-title {
      font-size: 1.2em;
   }
   /* отменяем обтекание для столбцов подвала страницы */
   .footer-col {
      float: none;
      margin-bottom: 20px;
      width: 100%;
      text-align: left;
   }
}

    12. Скрипт мобильного меню в отдельном файле

    JS
    <script src="blender3d_demo/js/blender3d_demo.js"></script>

    1. <script src="blender3d_demo/js/blender3d_demo.js"> - начало подключение файла скрипта с указанием папки месторасположения.
    2. </script> - конец подключение файла скрипта.

    13. Код скрипта для мобильного меню

    Данный скрипт работает при ширине окна браузера менее 768px, откройте «Пояснительную записку» для понимания кода скрипта.

    JS
    $('.nav-toggle').on('click', function(){
  $('#menu').toggleClass('active');
});

    1. $('.nav-toggle').on('click', function(){ $('#menu').toggleClass('active'); }); - в теле <header> → таблицы стиля CSS .nav-toggle → блока скрытого меню <div class="nav-toggle"><span></span></div> имеет значение таблицы стиля CSS display: none; (т.е. скрыт по умолчанию и появляющейся при ширине странице меньше 768px) → нажатие кнопки блока показа/скрытия главного меню → стиль CSS #menu активный, т.е. будет показано скрытое меню → (стиль CSS #menu.active).

    Только авторизованные участники могут оставлять комментарии.
    software/development/demo/responsive_site_layout.1693972149.txt.gz · Последнее изменение: 2023/09/06 06:49 — vladpolskiy