Автор: <span>admin</span>

В начале в WordPress Contact Form 7 создаем Шорткод, то есть создаем форму отправки с полями, пример

<div class="my-form-contact">
    [text* your-name placeholder "Name"]
    [mask* mask-211 "+7 (___) ___-__-__" "Phone"]
    [text* your-subject placeholder "Subject"]
    [email* your-email placeholder "e-mail"] 
    [textarea your-message]
[submit "Отправить"]
</div>

Далее настраиваем Contact form 7 WordPress — указываем свою почту, куда будут приходить сообщения, затем почту откуда будут приходит письма, тему письма, email и т.д.

В конце ставим галочку — использовать HTML формат письма
Contact form 7 WordPress настройка

Затем вставляем Шорткод Contact Form 7 в нужное место, например так:

<?php echo do_shortcode('[contact-form-7 id="156" title="Обратная связь"]'); ?>

WordPress

Подсветить выбранный активный (или текущий) пункт меню с применением библиотеки javascript JQUERY

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
li {
  flex-grow: 1;
}
a {
  display: block;
  text-align: center;
  margin-bottom: 0.3em;
  text-decoration: none;
  color: #000000;
  font-size: 1em;
  width: 7em;
  border-radius: 10px;
  padding: 1em;
  background-color: rgb(171, 190, 207);
}
a.active,a:hover {
    color:rgb(255, 255, 255);
    background-color:#000000;
}
<ul class="menu">   
          <li><a href="#1">Ссылка 1</a></li>
          <li><a href="#2">Ссылка 2</a></li>
          <li><a href="#3">Ссылка 3</a></li>
          <li><a href="#4">Ссылка 4</a></li>
          <li><a href="#5">Ссылка 5</a></li>
        </ul>
 
$(document).ready(function(){
        $(".menu a[href]").each(function() {
               if ("http://site.ru"+$(this).attr("href") == window.location.href)
               {
                   /*$(".active").removeClass("active");*/
                   $(this).addClass("active");
                   }
               });
            }); 

Результат работы меню — выбираем ссылку, выбранная страница перезагружается и соответствующий пункт меню подсвечивается в соответствии со стилем css.

Подсветить выбранный пункт меню JQUERY пример

Подсветка кнопки при клике на нее:

 
$(document).ready(function(){
        $(".menu a[href]").click(function() {
               if (!$(this).hasClass('active')) { 
                $(this).addClass('active'); 
                } else { 
                $(this).removeClass('active');
                }
            });
        }); 
 

Демонстрация работы программы подсветка кнопки при нажатие — нажмите на кнопки ниже

Пример кода на php — подсветка выбранного меню

<ul>
<li><a href="index.php" <?php if ($_SERVER["REQUEST_URI"] == "/index.php") {echo 'class="active"';}?>>ГЛАВНАЯ</a></li>
</ul>

 

JQuery

vh (viewport height), vw (viewport width) — это новые единицы измерения, разработаны для адаптивной верстки и размеры зависят от окон браузера (размеров устройств). vh (1% высоты окна, то есть если задать font-size:1vh, то на экране монитора с высотой экрана 1000px размер шрифта будет равен 10px) зависит от высоты окна браузера, а vw (1% ширины окна), соответственно, от ширины окна браузера. Также есть связанная с ними величина, которая ограничивает их vmin — по наименьшему из величин vh, vw, а vmах — по наибольшему значению из значений величин vh, vw.

rem (корневой шрифт, первый символ r, означает root и переводится как корень) — сначала размер шрифта настраивается в px в теги <html> (там же меняются) и затем относительно тега <html> применяются в единицах измерения rem на весь html документ — глобально.

Пример использования rem css html код

 
html {
        font-size: 18px;
    }
    div.font1 >span {
      font-size: 0.7rem;
    }
    div.font2 >span {
      font-size: 0.9rem;
    }

 

<div class="font1">        
    <span>Пример<br>
        <span>отображения <br>
            <span>текста<br>
                <span>с использованием 0.7 rem</span>
            </span>
        </span>
    </span>
</div>
<div class="font2"> 
    <span>Пример<br>
        <span>отображения <br>
            <span>текста<br>
                <span>с использованием 0.9 rem</span>
            </span>
        </span>
    </span>
</div> 
Пример
отображения
текста
с использованием 0.7 rem
Пример
отображения
текста
с использованием 0.9 rem

em (ex- высота шрифта) — относительная единица самого элемента и размер шрифта масштабируется только относительно свойства font-size (значение шрифта переопределяется в зависимости от вложенности).

Пример использования em css html код

 
 span {
      font-size: 0.7em;
    } 
<span>Пример<br>
        <span>отображения <br>
            <span>текста<br>
                <span>с использованием em</span>
            </span>
        </span>

    </span>
Пример
отображения
текста
с использованием em

% — размер шрифта в процентах относительно родительского элемента.

Пример использования процентов % css html код

 
    div.font3 span {
      font-size: 80%;
    }
<div class="font3">        
    <span>Пример<br>
        <span>отображения <br>
            <span>текста<br>
                <span>с использованием 0.7 em</span>
            </span>
        </span>
    </span>
Пример
отображения
текста
с использованием 0.7 em

CSS

flexbox

Свойство

display: flex;

выравнивает блоки вдоль одной линии по горизонтали (главная ось по горизонтали).

display flex

flex-direction

Свойство flex-direction позволяет управлять направлением главной оси. Если добавить ещё свойство flex-direction: column; , то блоки выравниваются вдоль одной линии по вертикали

display: flex;
flex-direction: column;

flex-direction column

по горизонтали (выравнивание по левому верхнему краю браузера)

display: flex;
flex-direction: row;

display flex

поменять порядок блоков на обратный для колонки flex-direction: column-reverse;

display: flex;
flex-direction: column-reverse;
flex-direction column-reverse
поменять порядок блоков на обратный для ряда flex-direction: row-reverse; (выравнивание по правому верхнему краю браузера)
display: flex;
flex-direction: row-reverse;
flex-direction row-reverse
justify-content
Свойство justify-content позволяет выравнивать содержание flex блока
justify-content:center; /* выравнивание по центру */
justify-content: flex-start; /* выравнивание происходит от начала главной оси */
justify-content: flex-end; /* выравнивание происходит от конца главной оси */
При использовании justify-content: space-between; первый и последний элемент выравниваются по самому краю главной оси (край браузера), остальные элементы равномерно распределяются и пространство между ними тоже равномерно заполняется.
justify-content space-between
Свойство justify-content: space-around; все элемент выравниваются равномерно и пространство равномерно распределяется между ними начиная и заканчивая с краев
justify-content space-around
align-items
Еще об свойстве align-items — выравнивание в отличие от свойства justify-content происходит от поперечной оси.

align-items:stretch; /* по умолчанию, элементы растягиваются, в блоках необходимо указать свойство height: auto; , также нужно учитывать свойство

max-width и min-width */
align-items stretch
align-items:flex-start; /* выравнивание по верхнему краю */
align-items flex-start
align-items:flex-end; /* выравнивание по нижниму краю */
align-items flex-end
align-items:center; /* выравнивание по центру */
center flexbox выравнивание по центру
align-items:baseline; /* выравнивание по базовой линии */
align-items baseline
 flex-wrap
Свойство flex-wrap задает поведение блокам, или вдоль одной линии даже если они не помещаются, или смещаются слева направо, если не помещаются в окне браузера.
flex-wrap:nowrap; /* значение по умолчанию, при изменении размера браузера блоки сжимаются, запрет переноса*/
nowrap
flex-wrap:wrap; /* при изменении размера браузера блоки сдвигаются, переносятся вниз*/
flex-wrap wrap
flex-wrap: wrap-reverse;  /* то же, что и wrap, только расположение блоков в обратном порядке, перенос вверх*/
flex-wrap wrap-reverse
flex-flow
Свойство flex-flow объединяет в себе два рассмотренных свойства flex-wrap и flex-direction, пример записи
flex-flow: column wrap;
align-content
Свойство align-content активируется совместно с flex-wrap:wrap; (когда блоки идут в несколько строк и применяется для их выравнивания).
align-content:stretch; /* по умолчанию, блоки растягиваются по вертикали, также нужно учитывать свойство max-width и min-width */
align-content:center; /* выравнивание по центру */
align-content: flex-start; /* выравнивание происходит от начала главной оси */
align-content: flex-end; /* выравнивание происходит от конца главной оси */
align-content: space-between; /* выравнивание между блоками равномерное */
align-content: space-around; /* выравнивание вокруг блоков равномерное */
align-self
Свойство align-self задает уникальное свойство блоку (элементу) и предназначено для выравнивания элементов.
 align-self :stretch; /* блоки растягиваются */
align-self :center; /* выравнивание по центру */
 align-self : flex-start; /* выравнивание происходит от начала главной оси */
 align-self : flex-end; /* выравнивание происходит от конца главной оси */
align-self: baseline; /* выравнивание по базовой линии */
gap
Свойство gap создает между блоками колонок и рядов интервал (раздвигает между собой), пример
gap: 5px;
column-gap
Свойство column-gap создает задает между колонками интервал, пример
column-gap: 5px;
flex-grow
flex-grow задает коэффициент увеличение блока. При flex-grow:1; и более блоки растянутся и заполнят свободное место на всю ширину экрана браузера. По умолчанию flex-grow:0; это значит что блоки не увеличиваются и не заполняют свободное пространство.
Пример
flex-grow:0; /* для красного блока */
flex-grow:0; /* для красного блока */
flex-grow:0; /* для зеленого блока */
grow при нуле
Пример для одинаковых блоков, но разными значениями.
flex-grow:1; /* для красного блока */
flex-grow:5; /* для зеленого блока */
flex-grow:10; /* для синего блока */
grow
flex-shrink
Свойство flex-shrink противоположно свойству flex-grow. Наименьшее значение коэффициента для flexgrow, является наибольшим значением для flex-shrink. По сути, flex-shrink обладает противоположным свойством относительно flex-grow.
flex-shrink:1; /* для красного блока */
flex-shrink:5; /* для зеленого блока */
flex-shrink:10; /* для синего блока */
Свойство flex-basis задает базовую ширину блока через width:30%; и например для остальных блоков width:auto;. Свойство flex (по умолчанию flex: 0 1 auto;) задается или одним значением -grow, или двумя — grow, shrink, или тремя значениями grow, shrink, basis.
order
Свойство order меняет порядок блоков, например
order:2; /* для красного блока */
order :1; /* для зеленого блока */
order :0; /* для синего блока */

order порядок блоков

CSS