Html меню для сайта код: Меню для сайта html и css горизонтальное — 11 вариантов меню

Сайт 

Меню, пожалуйста | WebReference

Другой популярной частью сайтов является меню. В основном, это список элементов, которые представляют собой простые ссылки, ведущие на другие места сайта. Давайте реализуем меню! Мы начнём со следующего кода.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Меню</title>
    <link rel="stylesheet" href="main.css" media="screen">
  </head>
  <body>
    <nav>
      <ul>
        <li>
          <a href="index.html">Главная</a>
        </li>
        <li>
          <a href="training.html">Обучение</a>
        </li>
        <li>
          <a href="conferences.html">Конференции</a>
        </li>
        <li>
          <a href="about.html">О нас</a>
        </li>
      </ul>
    </nav>
  </body>
</html>

Наше меню будет состоять из четырёх элементов:

  • Главная
  • Обучение
  • Конференции
  • О нас

Мы хотим, чтобы оно выглядело так.

Вы могли заметить, что мы добавили новые теги <nav>, <ul> и <li>.

<nav> используется для определения всех видов навигационных функций на сайтах, которые содержат ссылки на внутреннюю или внешнюю информацию. Размещение <nav> в коде говорит «всё внутри <nav> будет использоваться для навигации по сайту».

В <nav> мы вставили тег <ul> с несколькими тегами <li>. Тег <ul> представляет собой «неупорядоченный список» (как маркированный список), а теги <li> представляют каждый отдельный компонент этого списка (маркер). При создании сайтов неупорядоченный список часто будет наиболее разумным выбором, когда дело доходит до составления страницы с меню. На самом деле, меню это вариант списка ссылок, который был создан без заданного правила относительно порядка его элементов.

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

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

Теперь попробуем изготовить более стильное меню через наш код CSS.

Как правило, мы начинаем с самого общего тега в HTML-коде, верно? В нашем случае код начинается с <nav>, поскольку он отвечает за наше меню. С этим тегом мало что можно сделать, поскольку данный тег напрямую не меняет внешний вид маркированного списка.

Следующий тег <ul> начинает список. Мы хотим, чтобы наш список выглядел немного иначе, чем по умолчанию. Самое главное — добавить новый фон.

nav ul {
  background-color: PaleVioletRed;
}

Для цвета фона мы выбрали название PaleVioletRed. Перезагрузка страницы показывает наши изменения в результате добавления этого кода.

На самом деле мы применили цвет фона ко всем элементам <ul>. Это потому, что мы применяем его к тегам <nav> и <ul> с помощью следующего селектора.

nav ul {}

Теперь мы хотим избавиться от круглых чёрных точек в этом списке и сделать его более похожим на меню. Мы можем скрыть их благодаря свойству list-style, как показано ниже.

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
}

Установка list-style в значение none делает список без характерных маркеров.

Это выглядит гораздо лучше.

Широкая область цвета удивительно большая. Мы хотим немного урезать её, используя тот же пример, что с рамкой вокруг изображения (padding).

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
}

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

Теперь пришло время для работы с размерами. Наша навигация должна быть 200 пикселей в ширину.

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
  width: 200px;
}

В конце концов, мы добавим border к списку точно как на картинке. Это будет выражаться в сплошной линии толщиной 1 пиксель розового цвета.

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid MediumVioletRed;
}

Вот результат и это выглядит здорово!

С нашей прекрасной внешней рамкой. Пришло время построить каждый отдельный элемент списка, к которому можно обратиться с помощью такого селектора CSS.

nav ul li {}

Этот код ищет <nav>, затем внутри <ul> и <li>. Кажется, что каждому элементу в списке нужна своя граница.

nav ul li {
  border-bottom: 1px solid MediumVioletRed;
}

С помощью этого кода мы добавили border-bottom, так что каждый элемент <li> теперь имеет такой же тип границы как у внешней рамки, но только в нижней части текста.

В настоящее время наше меню должно выглядеть так.

Теперь у нас две проблемы. Первая — пространство слева между границей и элементами списка. Изменим его, используя нашего знакомого padding.

nav ul li {
  border-bottom: 1px solid MediumVioletRed;
  padding: 5px;
}

Это гораздо лучше, правда? Мы добавили padding шириной 5 пикселей между текстом и границами.

Наша вторая проблема менее заметна, но всё ещё существует в виде двойной линии в нижней части нашего меню. Это потому, что наша граница для меню добавилась к нашей границе для последнего элемента, когда мы вставили bottom-border. Помните, что мы использовали код в <ul> из <nav> для указания границы.

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid MediumVioletRed;
}

Также вспомним, что мы устанавливаем list-style в none так, что маркеры или любые другие знаки не появляются.

list-style: none;

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

Проделаем то же самое, только с помощью свойства bottom-border и установив для него значение none. Однако мы хотим нацелиться только на последний пункт меню, чтобы его нижняя граница не конфликтовала с большой нижней границей.

nav ul li:last-child {
  border-bottom: none;
}

Результат применения этого кода сверхэффективен.

Двойная граница исчезла, всё потому, что мы нашли <ul> в <nav>, а затем выбрали в нём последний <li> и отключили нижнюю границу. Псевдо-селектор last-child указывает на последний элемент списка.

nav ul li:last-child {}

Этот селектор можно перевести следующим образом:

«найдите <nav>, затем <ul> и примените все изменения к последнему элементу <li>».

Последнее, что нам нужно сделать, это настроить текст в ссылках.

Вы можете создать ссылки в HTML следующим образом.

<a href="url">Набранный здесь текст ведёт на указанный веб-адрес</a>

Мы используем тег <a> вместе с атрибутом href. Значением этого атрибута должен быть адрес, на который вы хотите переместить пользователя, если он щёлкает по ссылке. В нашем примере у нас есть четыре ссылки. Одна из них выглядит так.

<a href="training.html">Обучение</a>

Это значит, что браузер будет показывать слово «Обучение», на которое можно щёлкнуть и затем браузер отправится на страницу, которая была сохранена в файле training.html.

Зная, что этот тег является частью кода HTML, мы можем создать специальный селектор, который ищет именно этот тег.

nav ul li a {}

Вуаля!

Давайте добавим новые свойства к нашему новому селектору. Прежде всего, изменим цвет шрифта на белый.

nav ul li a {
  color: white;
}

Обновление браузера показывает наши новые изменения.

Отлично! Теперь у нас есть ссылки белого цвета. Изменим некоторые акценты. Браузер устанавливает выделение в CSS для всех ссылок в виде text-decoration: underline. Мы хотим изменить это значение, как мы уже делали это раньше со значением none.

nav ul li a {
  color: white;
  text-decoration: none;
}

Красота! Мы завершили желаемое меню.

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

Проверьте эту ссылку, которую я написал в своём Twitter (без подчёркивания).

При наведении указателя мыши на эту ссылку происходит нечто интересное, о чём многие интернет-пользователи хорошо знают — текст становится подчёркнутым.

Попробуем сделать нечто подобное в нашем меню, что позволит ссылке выделиться при наведении на неё. Мы будем использовать псевдо-селектор под названием hover.

nav ul li a:hover {
  text-decoration: underline;
}

В этот раз мы добавили его к ссылкам <a>. Это означает, что при наведении указателя мыши на ссылку будет применяться эффект. Это также относится и к наведению на другие элементы.

div:hover
li:hover
img:hover

Эффект виден ниже, когда мы наводим курсор мыши на ссылку «Конференции».

В итоге, окончательный код CSS должен выглядеть так.

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid MediumVioletRed;
}
  
nav ul li {
  border-bottom: 1px solid MediumVioletRed;
  padding: 5px;
}
nav ul li:last-child {
  border-bottom: 0;
}
nav ul li a {
  color: white;
  text-decoration: none;
}
nav ul li a:hover {
  text-decoration: underline;
}

Недавно появившиеся псевдо-селекторы (last-child и hover) будут полезны в будущем.

В этой главе вы узнали, как использовать ссылки и вставлять их в HTML-документы. На данный момент мы использовали только адреса, ведущие на локальные файлы (например, training.html), сохранённые на вашем компьютере, но вы также можете использовать ссылки, указывающие на внешние сайты в Интернете, вроде этого.

<a href="http://twitter.com/varjs">Мой Twitter</a>

Этот код в браузере будет отображаться как Мой Twitter. Обратите внимание, что адрес содержит http:// в самом начале. Это правило говорит, что каждая ссылка используемая в HTML-документе и ведущая на другой сайт, должна быть с префиксом http://. В противном случае, ваши ссылки не будут перенаправлять пользователей в нужное место.

Автор: Дамиан Вельгошик

Последнее изменение: 11.08.2018

HTML, CSS — Меню — Stack Overflow на русском

Вопрос задан

Изменён 3 года 1 месяц назад

Просмотрен 110 раз

Доброй день, друзья. Интересует вопрос касательно меню. Имеются 2 проблемы при его верстке:

  1. До сих пор не могу понять кому я должен назначать стили и какие. Поясню: собственно на макете вы увидите как оформляется меню, вопрос в том: кому назначать падинги, задний фон, бордер сверху? Ссылке или лишке?

  2. Попытался импровизировать, но возникла следующая проблема. Бордер сверху над пунктом меню должен быть статичным при наведении на кнопочку, но проблема в том, что после того как срабатывает :hover, этот бордер толкает все меню вниз.

Буду благодарен за любые советы.

  • html
  • css
  • вёрстка

5

Вариант при помощи border-top.

Суть в чём, изначально border-top есть, но его не видно, ибо его цвет transparent (прозрачный), при наведение он становится нужным цветом. Эффект затухания\появления.

.item {
  display: inline-block;
  padding: 7px 12px 10px; /* 7px - это верхний отступ, он как и нижний 10px - 3px бордера сверху */
  background: #e8ebf1;
  color: #000;
  border-top: 3px solid transparent;
  transition: all .3s linear;
  font-size: 140%;
}

.item:hover {
  border-top-color: #2aacc8;
  color: #2aacc8;
  background: #fff;
}
<div>Наведи на меня</div>

В принципе, можно сделать эффект «выезда», через border-top, но при анимации мы будет наблюдать дёрганье:

.item {
  display: inline-block;
  padding: 10px 12px;
  background: #e8ebf1;
  color: #000;
  border-top: 0 solid #2aacc8;
  transition: all .3s linear;
  font-size: 140%;
}

.item:hover {
  border-top-width: 3px;
  padding-top: 7px; /* те же 10px - 3px */
  color: #2aacc8;
  background: #fff;
}
<div>Наведи на меня</div>

По этому, считаю, что для реализации нужной вам фишки, лучше всего использовать box-shadow.
К тому же не придётся трогать padding вообще, ибо box-shadow идёт от границ элемента и по факту игнорирует отступы.

Эффект затухания\появления:

.item {
  display: inline-block;
  padding: 10px 12px;
  background: #e8ebf1;
  color: #000;
  transition: all .3s linear;
  font-size: 140%;
  box-shadow: 0 3px 0 0 transparent inset;
}

.item:hover {
  box-shadow: 0 3px 0 0 #2aacc8 inset;
  color: #2aacc8;
  background: #fff;
}
<div>Наведи на меня</div>

Эффект «выезда»:

.item {
  display: inline-block;
  padding: 10px 12px;
  background: #e8ebf1;
  color: #000;
  transition: all .3s linear;
  font-size: 140%;
  box-shadow: 0 0 0 0 #2aacc8 inset;
}

.item:hover {
  box-shadow: 0 3px 0 0 #2aacc8 inset;
  color: #2aacc8;
  background: #fff;
}
<div>Наведи на меня</div>

Получите ваше меню и распишитесь:

nav {
  background-color: #f1f1f1;
  padding: 2px 10px 0 10px;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  border-top: 1px solid transparent;
}

li:hover {
  background-color: white;
  border-top: 1px solid white;
}

a {
  display: inline-block;
  position: relative;
  padding: 10px 10px 12px 10px;
  text-decoration: none;
  text-transform: uppercase;
  color: black;
  font-weight: bold;
  padding-top: 10px;
}

a:before,
a:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  height: 4px;
  width: 0;
  background-color: skyblue;
  transition: width 0. 4s ease-in-out;
}

a:before {
  left: 0;
}

a:after {
  right: 0;
}

li:hover a:before {
  width: 50%;
}

li:hover a:after {
  width: 50%;
}

li:hover a {
  color: skyblue;
}
<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About us</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Portfolio</a></li>
    <li><a href="">Blog</a></li>
  </ul>
</nav>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Курс HTML | Создание меню навигации

Навигация по курсу  

В прошлой статье мы создали всю структуру нашего веб-сайта, используя элементы HTML и теги. Давайте теперь начнем создавать сайт по частям.

Первая часть веб-сайта — это заголовок . Итак, первое, что мы создадим, — это меню навигации в шапке веб-страницы.

Панель навигации содержит :  

  • Логотип, выровненный по левому краю.
  • Меню из пяти элементов, выровненных по правому краю.

Давайте посмотрим на часть кода меню заголовка из нашего файла index.html . Below is the portion of code of the Header menu where the highlighted part is the top navigation bar:  

HTML

< header >

    

       

     < div id = "top-header" >

                  

        

         < div id = «Логотип» >

Div >

>

>

 

        

         < nav >

                       

         nav >

     div >   

   

    

         

     < 0038 Div ID = "Header-Image-Menu" >

Div Div. >

Первая задача — добавить изображение для логотипа. Действия по включению изображения и созданию логотипа : 

  • Загрузите изображение, нажав здесь.
  • Скопируйте и вставьте изображение в каталог: root/images. Где root — это верхний каталог нашего проекта. В нашем случае он называется «образец проекта».
  • Включите изображение в код с помощью тега img.

Вторая задача состоит в том, чтобы создать неупорядоченный список в HTML в разделе навигации главного меню:  

  • Добавить неупорядоченный список в раздел меню навигации с 5 элементами списка с именами «Главная», «О программе». Мы», «Наши продукты», «Карьера» и «Свяжитесь с нами».

The code of the Header section after adding the above two things will look like as shown below:  

HTML

8 >< 0037 href = "#" >Home a > li >

                 < li >< a href = "#" > около США. 0038 a href = "#" >Our Products a > li >

                 < li >< a href = "#" >Careers a > li >

                 < li >< a href = "#" >Contact Us a > li >

             ul >

           div >

         nav >

     div >   

 

    

         

     < div id = "header-image-menu" >

Div >

Заголовок >

9 >

99

< header >

          

    

< Div ID = «Top Header» >

>

 

        

         < div id = "logo" >

             < img src = "images/logo . png " />

< / Div >

0038

         < nav >

           < div id = "menu" >

             < ul >

                < li класс = "активный" 7

Если сейчас вы откроете файл index. html в браузере, вы увидите следующий вывод: 

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

Мы создадим панель навигации позже, но сначала создадим файл с именем « style.css » и добавьте его в папку « sample project/css ». Также включите файл CSS, созданный в файл «index.html», добавив строку ниже между тегами заголовка.

HTML

< link rel = "stylesheet" href = "css/style.css" >

Прежде чем мы начнем стилизовать меню навигации, первое, что нужно сделать, это установить значения CSS по умолчанию для элементов HTML. Copy and Paste the below code in your “ style.css ” file: 

CSS

html, body{

     height : 100% ;

}

Body {

Маржу : 0PX 7;

     заполнение : 0px ;

     фон : #FFFFFF ;

     семейство шрифтов : 'Roboto' ;

     размер шрифта : 12pt ;

}

          

ч 1 , ч 2 , h 3 {

     поле : 0 9;

     прокладка : 0 ;

     цвет : #404040 ;

}

      

р, ол, ул{

     маржа0038 : 0 ;

}

P {

Line-Height : 180% ;

}

OL, UL {

;

     в виде списка : нет ;

}

      

. container{   

    

        

     margin : 0px auto ;

     ширина : 1200 пикселей ;

}

Как вы можете видеть в приведенном выше CSS, мы установили значения по умолчанию почти для каждого полезного элемента HTML, необходимого для проекта. Кроме того, мы создали класс CSS с именем « контейнер ». Это в основном определяет контейнер шириной 1200 пикселей, и весь текст внутри него выровнен по центру. Добавьте этот класс с именем container в тег

.
Следующий шаг — присвоить некоторые идентификаторы нашим HTML-элементам, а затем использовать эти идентификаторы в файле CSS для их стилизации . Здесь мы уже присвоили идентификаторы элементам HTML, как вы можете видеть в приведенном выше коде. Давайте просто начнем добавлять к ним стили.

Ниже приведено пошаговое руководство по стилю панели навигации: 

  • Общая стилизация заголовка : Для тега заголовка требуется не так много стилей. Для тега заголовка просто необходимо установить значение «overflow: hidden», чтобы предотвратить переполнение окна при изменении размера браузера.
    Add the below code to style.css: 

CSS

header{

      

     overflow : hidden ;

}

  • Стиль панели навигации (#top-header) : Установите фиксированную высоту 60 пикселей для панели навигации и выровняйте текст по центру.
    Add the below code to style.css: 

CSS

#top-header{

          

     text-align : center ;

     высота : 60px ;

}

  • Стилизация логотипа (#logo) : удалить отступы из родительского блока div логотипа. Сделайте и родитель, и изображение плавающими влево и назначьте им ширину.
    Добавить приведенный ниже код в стиль. CSS:

CSS

#Logo {

Float : LOAT0038 ;

     прокладка : нет ;

     поле : нет ;

     высота : 60px ;

     ширина : 30% ;

}

 

#logoimg{

     ширина : 60% ;

     плавающая : левая ;

     заполнение : 10 пикселей 0 пикселей ;

}   

  • Стиль меню навигации (#menu) : 
    Добавьте следующий код CSS в style. css: 9
2 00031

#menu{

     float : right ;

     ширина : 70% ;

     высота : 100% ;

     поле : нет ;

}

      

#menu ul{

     text-align : center ;

     плавающий : правый ;

     поле : нет ;

     фон : #0074D9 ;

}

      

#menu li{

     дисплей : встроенный- блок;

     прокладка : нет ;

     поле : нет ;

}

      

#menu li a, #menu li span{

     дисплей : встроенный- блок ;

     прокладка : 0em 1,5em ;

     text-decoration : нет ;

     вес шрифта : 600 ;

     преобразование текста : верхний регистр ;

     line-height : 60px ;

}

      

#menu li a{

          

     color : #FFF ;

}

      

#menu li:hover a, #menu li span{

     фон : #FFF ;

     цвет : #0074D9 ;

     граница слева : 1px сплошной #0074D9 ;

     text-decoration : нет ;

}

The overall CSS code combining all of the above class and id's for the navigation bar is shown below:  

CSS

header{

      

     overflow : скрытый ;

}

 

#top-header{

            

3  

38

выравнивание по тексту : по центру ;

     высота : 60px ;

}

#logo {

Float : Lift ;

     прокладка : нет ;

     поля : нет ;

     высота : 60px ;

     ширина : 30% ;

}

#Logo IMG {

Ширина : 60% ;

     с плавающей запятой : слева ;

     заполнение : 10 пикселей 0 пикселей ;

}

#menu {

;

     ширина : 70% ;

     высота : 100% ;

     поле : нет ;

}

#menu ul {

Текст-альбом : Центр ;

     плавающий : правый ;

     поле : нет ;

     фон : #0074D9 ;

}

#menu li {

Дисплей : inline- 7 ;

     прокладка : нет ;

     поле : нет ;

}

#menu Li A, #Menu Li Span {

Дисплей : inline- 7 ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;

     прокладка : 0em 1,5em ;

     text-decoration : нет ;

     вес шрифта : 600 ;

     преобразование текста : верхний регистр ;

     line-height : 60px ;

}

#menu li a {

0038 цвет : #FFF ;

}

      

#menu li:hover a, #menu li span{

     background : #FFF ;

     цвет : #0074D9 ;

     граница слева : 1px сплошная #0074D9 ;

     text-decoration : нет ;

}

Теперь откройте файл index. html в браузере, вы увидите что-то, как показано на рисунке ниже. Если нет, сравните и перепроверьте свой код с нашим, возможно, вы что-то упустили: 

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

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari

<< PREVIOUS 
NEXT >> 
 

 


CSS Tutorial: Creating a Navigation Menu | Учебники по веб-разработке #23

Введение в HTML, CSS, JavaScript и как работают веб-сайты? | Учебники по веб-разработке #1

Учебник по HTML: установка VS Code и Live Server | Учебники по веб-разработке #2

Учебник по HTML: базовая структура веб-сайта | Учебники по веб-разработке #3

Учебник по HTML: заголовок, сценарий, ссылка и метатеги | Учебники по веб-разработке #4

Учебник по HTML: заголовки и абзацы | Учебники по веб-разработке #5

Учебник по HTML: теги Img и Anchor | Учебники по веб-разработке #6

Учебник по HTML: списки и таблицы | Учебники по веб-разработке #7

Учебник по HTML: формы и теги ввода | Учебники по веб-разработке #8

Учебник по HTML: встроенные и блочные элементы | Учебники по веб-разработке #9

Учебник по HTML: Идентификаторы и классы в HTML | Учебники по веб-разработке #10

Учебник по HTML: Объекты HTML | Учебники по веб-разработке #11

Учебник по HTML: семантические теги в HTML| Учебные пособия по веб-разработке #12

Учебное пособие по CSS: Введение в CSS | Учебники по веб-разработке #13

Учебник по CSS: Встроенный, внутренний и внешний CSS | Учебники по веб-разработке #14

Учебник по CSS: Селекторы в CSS | Учебники по веб-разработке #15

Учебник по CSS: Использование инструментов разработчика Chrome | Учебники по веб-разработке #16

Учебник по CSS: Шрифты в CSS | Учебники по веб-разработке #17

Учебник по CSS: Цвета в CSS | Учебники по веб-разработке #18

Учебник по CSS: границы и фон | Учебные пособия по веб-разработке #19

Учебное пособие по CSS: блочная модель CSS, поля и отступы | Учебные пособия по веб-разработке #20

Учебное пособие по CSS: Float & Clear объяснил | Учебники по веб-разработке #21

Учебное пособие по CSS: стилизация ссылок и кнопок | Учебники по веб-разработке #22

Учебник по CSS: Создание меню навигации | Учебные пособия по веб-разработке #23

Учебное пособие по CSS: Свойство отображения CSS | Учебники по веб-разработке #24

Учебник по CSS: абсолютное, относительное, фиксированное и липкое положение в CSS | Учебные пособия по веб-разработке #25

Проект 1: Создание веб-сайта тренажерного зала с использованием HTML5 и CSS3 | Учебные пособия по веб-разработке #26

Учебное пособие по CSS: объяснение видимости и z-index | Учебники по веб-разработке #27

Учебное пособие по CSS Flexbox на хинди | Учебники по веб-разработке #28

Учебник по CSS: единицы em, rem, vh и vw + Объяснение адаптивного дизайна | Учебные пособия по веб-разработке #29

Учебное пособие по CSS: объяснение медиа-запросов | Учебные пособия по веб-разработке #30

Учебное пособие по CSS: Дополнительные сведения о селекторах CSS | Учебные пособия по веб-разработке #31

Учебное пособие по CSS: атрибуты и n-е дочерние псевдоселекторы | Учебники по веб-разработке #32

Учебник по CSS: до и после псевдоселекторов | Учебники по веб-разработке #33

Учебник по CSS: Тень блока и тень текста | Учебные пособия по веб-разработке #34

Учебное пособие по CSS: переменные и пользовательские свойства | Учебники по веб-разработке #35

Учебник по CSS: Создание анимации и ключевых кадров | Учебные пособия по веб-разработке #36

Учебное пособие по CSS: Создание переходов в CSS | Учебные пособия по веб-разработке #37

Учебное пособие по CSS: преобразование свойства в CSS | Учебники по веб-разработке #38

Создание проекта полностью адаптивного веб-сайта с использованием HTML и CSS на хинди | Учебники по веб-разработке #39

CSS Grid: введение и создание базовой сетки | Учебники по веб-разработке #40

CSS Grid: создание строк и пробелов в сетке | Учебники по веб-разработке #41

CSS Grid: объединение нескольких строк и столбцов в сетке | Учебники по веб-разработке #42

CSS Grid: Autofit & MinMax | Учебные пособия по веб-разработке #43

CSS Grid: создание макетов с использованием области шаблонов сетки | Учебники по веб-разработке #44

Использование медиа-запросов с CSS Grid | Учебники по веб-разработке #45

Введение в JavaScript для внешнего и внутреннего интерфейса | Учебники по веб-разработке #46

Написание JavaScript в браузере и консоль разработчика | Учебники по веб-разработке #47

Переменные, типы данных и операторы в JavaScript | Учебники по веб-разработке #48

Строки в JavaScript | Учебники по веб-разработке #49

Строковые функции в JavaScript | Учебники по веб-разработке #50

Область действия, условия «если-иначе» и регистр переключения в JavaScript | Учебники по веб-разработке #51

Массивы и объекты в JavaScript | Учебники по веб-разработке #52

Функции в JavaScript | Учебные пособия по веб-разработке #53

Учебное пособие по JavaScript: Взаимодействие — Оповещение, Подсказка, Подтверждение | Учебные пособия по веб-разработке #54

Учебное пособие по JavaScript: циклы for, while, forEach, Do While | Учебники по веб-разработке #55

Учебник по JavaScript: навигация по DOM | Учебники по веб-разработке #56

Учебник по JavaScript: события и прослушивание событий | Учебники по веб-разработке #57

Учебник по JavaScript: setInterval и setTimeOut | Учебники по веб-разработке #58

Учебник по JavaScript: дата и время в JavaScript | Учебники по веб-разработке #59

Учебник по JavaScript: стрелочные функции в JavaScript | Учебники по веб-разработке #60

Учебник по JavaScript: математический объект в JavaScript | Учебные пособия по веб-разработке #61

Учебное пособие по JavaScript: Работа с JSON в JavaScript | Учебные пособия по веб-разработке #62

Учебное пособие по серверной части: Введение и установка Node. Js | Учебники по веб-разработке #63

Учебное пособие по серверной части: модули Node.Js с примерами | Учебные пособия по веб-разработке #64

Учебное пособие по серверной части: блокировка и неблокирующее выполнение | Учебные пособия по веб-разработке #65

Учебное пособие по серверной части: блокировка и неблокирующее выполнение | Учебные пособия по веб-разработке #66

Учебное пособие по серверной части: Создание пользовательской серверной части с помощью NodeJs | Учебные пособия по веб-разработке #67

Учебное пособие по серверной части: создание пользовательских модулей в узле с помощью NodeJs | Учебники по веб-разработке #68

Учебное пособие по серверной части: npm: Учебное пособие по диспетчеру пакетов Node | Учебные пособия по веб-разработке #69

Учебное пособие по серверной части: установка Express и Postman | Учебные пособия по веб-разработке #70

Учебное пособие по серверной части: написание нашего первого экспресс-приложения | Учебные пособия по веб-разработке #71

Учебное пособие по серверной части: статические файлы и установка механизма шаблонов Pug | Учебные пособия по веб-разработке #72

Учебное пособие по бэкенду: Использование необработанного HTML в шаблонизаторе Pug | Учебники по веб-разработке #73

Учебное пособие по серверной части: завершение серверной части NodeJs нашего веб-сайта Gym | Учебные пособия по веб-разработке #74

Учебное пособие по серверной части: танцевальный веб-сайт с использованием Pure Pug + NodeJs | Учебные пособия по веб-разработке #75

Учебное пособие по серверной части: разработка карт с использованием Pure Pug + NodeJs | Учебные пособия по веб-разработке #76

Учебное пособие по серверной части: веб-сайт Continuing Dance с использованием Pug + NodeJs | Учебные пособия по веб-разработке #77

Учебное пособие по бэкенду: добавление раздела спонсора с помощью Pug + NodeJs | Учебники по веб-разработке #78

Backend Tutorial: Добавление контактной формы с помощью Pug + NodeJs | Учебные пособия по веб-разработке #79

Учебное пособие по MongoDb: Введение в MongoDb + установка | Учебные пособия по веб-разработке #80

Учебное пособие по MongoDb.

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *