<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS - WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.

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

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

Подробнее
Уроки и статьи
Подписка

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

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Поиск: div

Что искали: div

Всего найдено: 891 записей

... значениями классический пример сетки с двумя колонками. <div class="container">     <div class="row">         <div class="col-sm-6">             первая ...
...     color: black;     text-align: center; } <div class="text">пример создания элемента через <strong>javascript</strong>.</div> создание элемента через ...
... пользовательский класс services. схематичная разметка 1-го уровня <div class="container">   <div class="row">     <div class="col-12 col-md-4">       колонка ...
... переменная i с её уникальным значением. <section>   <div class="loading">     <div class="blocks" style="--i:1;"></div>     <div class="blocks" style="--i:2;"></div> ...
... следующий ряд. такое поведение естественное для блоков. // html <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> ...
... разместит, как надо. давайте посмотрим несколько примеров: <div class="row" style="background: lightblue">   <div class="col-md">col-md</div>   <div class="col-md">col-md</div>   ...
... необходимости, можно легко скопировать участок кода вместе с css: <div class="stat">..элементы..</div> затем вставить в другое место на странице или сайте ...
... текстом и кнопкой. блок и секция чередуются друг с другом. <div class="block_violet">   <div class="block_white">     <div class="photo">       <img ...
... понять по иконке. html разметка + позиционирование в центре <div class="container">   <div class="servicebox">     <div class="icon" style="--i:#4eb7ff;">       <ion-icon ...
... всю ширину браузера, обертываем ее в контейнер:  <div class="container">    ...  </div> используя класс col-md-4 с помощью grid system (сеточной ...
...     <div class="modal fade" id="video_modal" tabindex="-1" aria-labelledby="videointerview" aria-hidden="true">         <div class="modal-dialog modal-lg modal-dialog-centered"> ...
... служить flex-контейнером, а блоки с классом column - его детьми. <div class="row">   <div class="column">     <div class="card">карточка превью-поста ...
... социальных сетей карта шапка + контактная форма <div class="title">   <h2>contact us</h2>   </div>   <div class="box">     <div class="contact ...
... grid сетки можно обратится через псевдокласс nth-child. <div class="container">     <div class="item">item-1</div>     <div class="item">item-2</div> ...
... того, чтобы в дальнейшем задавать для него свои стили. <div class="container">   <div class="posts">     <div class="posts__element posts__element--big">       <img ...
... src="jquery-1.12.4.min.js"></script>   </head>   <body>     <div class="skills" data-percent="90%">       <div class="title" style="background: #ff8c00;"><span>html</span></div> ...
... колонки, по шесть столбиков в каждой. <!-- карусель начало --> <div class="container-fluid"> <div class="row justify-content-center bg-item"> <div id="carouselexamplecontrols" class="carousel slide" ...
... разметка: <div class="parent perspective">   <h1>использование свойства перспективы для родителя </h1>   <div class="child"></div> ...
... свойство flex-basis. <!-- общие правила поведения для всех карточек --> <div style=" display: flex; flex-wrap: wrap; margin-left: -8px; /* отступ от левого края */ margin-right: -8px; ...
... коде, так как оно задается по умолчанию. html структура <div class="container">     <div class="item">1</div>     <div class="item">2</div>     <div ...
... свойства: display: flex и justify-content: center. // html разметка <div class="flex-container">     <div class="flex-item"></div>     <div class="flex-item"></div> ...
... давайте рассмотрим некоторые примеры: <style>   .row div {padding:20px 10px; border: 1px solid;} </style> <div class="container">   <div class="row" style="background: lightblue">    ...
... diplay: table-cell. внутри блока div размещены: label с элементами форм input, типа checkbox. все секции аккордеона закрыты (checkbox)    <div>   <label class="accordion"> ...
... соответственно должен показаться контент второго блока и.т.д. <div class="content">   <div class="info">     <div class="header">       <div ...
...         salary = bs.select_one(             'body > div.page-container > div > div > div > div > article > section:nth-child(1) > div ' ...
... приведу нужный код, а затем мы разберем, что там происходит. <div class="container text-muted">   <div class="row">    <div class="col-md-6 col-lg-3">     <div class="card"> ...
... </head> <body>     <div class="container-fluid d-flex flex-column" style="min-height: 100vh">         <div class="row">             <div class="col-md-12 p-0"> ...
...     <link rel="stylesheet" href="css/style.css" /> </head> <body>     <div class="container py-4 px-3">         <div class="container">             <h2 class="mb-3">последние новости</h2> ...
... заготовку, состоящую из обертки wrapper с 12 ячейками внутри. <div class="container">     <div class="item">1</div>     <div class="item">2</div>     <div ...
... разметку через тег ion-icon. <div class="dropdown">     <input type="text" class="text2" readonly placeholder="dropdown menu">     <div class="option">         <div><ion-icon ...
... иллюстрации сказанного создадим простую фигуру: html разметка: <div class="scene">   <div class="panel"></div> </div> css код: .scene {   width: 200px; ...
... каждом portfolio_item имеется фотография portfolio_image. html разметка <div class="portfolio">   <div class="portfolio_col">     <div class="portfolio_item">       <img ...
... делятся на два типа — блочные и строчные. рассмотрим на примере тегов div (блочный) и span (строчный) принципиальную разницу между ними. поместим ...
...   <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> </head> <body>   <div class="**container** mx-auto">     <div class="grid grid-cols-3 gap-4">       <div class="bg-gray-200 p-4">tile 1</div> ...
... расположен фиолетовый блок-ребенок. // html разметка <div class="wrap">     <div class="block"></div> </div> // css код родительского блока ...
... классом loader и четыре блока. <section>     <div class="loader">         <div></div>         <div></div> ...
... строка и соответственно 2 колонки. <section class="app">   <div class="container">    <div class="app__content">     <div class="row">      <div ...
... невозможности расположить блок по осям x и y одновременно. <div class="container">     <div class="item">item-1</div>     <div class="item">item-2</div> ...
... form создадим розовый блок с классом container. <div class="container">   <form action="#">   </form> </div> внутри тега форм создадим пять рядов ...
... отвечает за свой угол блока. далее напишите такой html-код: <div class="roundborder">   <div>     <div>       <div>         ...
... содержимое шапки пишем внутри парного тега header. <header> <div class="wrap">  <div>  <div>    <a href="#"><img src="logo.png" alt=""/></a>  </div> ...
... одну строку и занимают определенное количество колонок. <div class="container">   <div class="row">     <div class="col-lg-2">номер телефона</div> ...
... создадим саму секцию-портфолио с вложенными тегами div, а каждую картинку положим в отдельный тег div в качестве фона. рекомендуется стили касающиеся ...
... тегами body вставить нижеуказанный html. html разметка: <div class="scene">   <div class="panel panel--translate-neg-z">translatez(-200px)</div> </div> ...
...     }   </style> </head> <body>   <div id="swipearea">swipe here</div>   <script>     const swipearea = document.getelementbyid('swipearea'); ...
... создадим два самых обычных div блока, но для одного зададим стили через атрибут style, а для другого через тег style. <style> div {   width: 150px;   height: 150px; ...
...     <link rel="stylesheet" href="card.css"> </head> <body>     <div class="container">         <div class="work-card">             <div class="work-card__inner"> ...
...     <title>информер погоды на react</title> </head> <body>     <div id="root"></div>     <script src="./index.js"></script> </body> </html> ...
... для фильтрации. <main class="content">     <div class="container">         <div class="card clothing">clothing</div>         <div ...
... jquery. давайте разберём для начала следующий пример <div id="block"><span>блок</span></div> <script type="text/javascript">   var element = $("#block span").clone(); // клонируем ...
... плагином emmet. введите div а теперь нажмите клавишу tab. в результате этих несложных действий мы получим открывающий и закрывающий тег div, а курсор будет ...
... левого края редактора кода. тег div является вложенным элементом относительно тега section. <section>     <div>     </div> </section> ...
... href="#">ссылка</a> <a href="#">ссылка</a> <p class="link"></p> <p class="link"></p> <div id="links"></div> <script type="text/javascript">   $("p.link").append("<a href='#'>ссылка внутри ...
... javascript. в данном уроке мы рассмотрим только первый случай. <div class="container">   <div class="row mt-3">    <div class="col-12">    <button class="btn ...
... анимацию. создадим в html разметке блок и стилизуем его. // html <div class="arrow"></div> сделаем общую основу для стрелок (вверх, вниз, вправо и влево), ...
... разметку, опираясь на схему. <section class="expert">     <div class="expert__icon"></div>     <h2 class="expert__title">расскажите о своём опыте</h2> ...
... создаст структуру html разметки. для каждого объекта массива создается тег div, внутри которого будет параграф p, поле для ввода (input) и дата-атрибут ...
... блок с текстом. новым блокам зададим свои классы. <div class="advantages_col">     <div class="advantages_image"><img src="image_01.svg" alt=""></div>     <div ...
... <!-- общий контейнер --> <div class="swiper-container">     <!-- оболочка для слайдера -->     <div class="swiper-wrapper">         <!-- ...
... бы такой нужный и важный тег <div>. посмотрите код любого сайта, который найдете в интернете и увидите, что тег <div> чаще других тегов встречается ...
... карточки закрашивается черным цветом в мелкую сеточку. <div class="container">     <div class="card"></div>     <div class="card"></div>     <div ...
... jquery, т.к. слайдер использует эту библиотеку для своей работы. <div class="your-class"> <div>your content</div> <div>your content</div> <div>your content</div> ...
... href="fort.min.css">   <script src="fort.min.js"></script> </head> <body>   <div class="form-wrapper">    <div class="top">    <div class="colors"></div></div>    <h1 ...
... позиционирования. html разметка <section class="icons">  <div class="container-fluid">   <div class="row">    <div class="col-sm-4 wrap-icons">     <div ...
... вас должны быть, а далее надо написать следующий html-код: <div class="shadow-block">   <div class="sh-top"></div>   <div class="sh-rt"></div>   <div class="sh-sl"> ...
...     <div id="extension">         <button id="openhistorybtn">open history</button>     </div>     <script src="popup.js"></script> ...
... добавление к html разметке нового блока div. добавим процентное число в индикатор выполнения. <body> <div class="circle-wrap">   <div class="circle"> ...
... создадим квадрат с пустыми блоками и ссылкой button внутри. <div class="square">     <div></div>     <div></div>     <div></div> ...
...         }     </style> </head> <body>     <div id="root"></div>     <script>         // карточка вакансии ...
... элементов, не обращая внимания на пустые ячейки. <div class="grid-wrap">     <div class="grid-item">title</div>     <div class="grid-item">image</div> ...
... форма обратной связи помещена в теге div с классом part_2_of_3 и занимает она две трети от ширины родителя. <div class="con part_2_of_3"> <div class="cont-form"> <form ...
... методов queryselector и queryselectorall посмотрите на следующий html:   <div id="main">    <div class="pic-container">     <img class="img-src" src="smiley.png" ...
при блочной вёрстке часто требуется сделать у блока div высоту 100%. простым указанием height=100% в div не получится добиться желаемого результата, поэтому ...
... называнием id у кнопки. <div class="modal fade" id="examplemodal" tabindex="-1" role="dialog" aria-labelledby="examplemodallabel" aria-hidden="true">     <div class="modal-dialog" role="document">      ...
... управление элементами. например, может быть такая задача: выбрать все div с определённым классом и увеличить в них шрифт. увеличение шрифта - это ...
... этой статье я сейчас приведу. для начала разберём html-код: <div id="container">   <div id="slider">     <h3>заголовок слайдера</h3>     ...
... готовые иконки телефона и конверта из библиотеки ionicons. <div class="card">   <div class="content">     <div class="imgbx">       <img ...
... приступим к созданию в .html файле пропишем следующую структуру <div class="drop">   <div class="option active placeholder" data-value="placeholder">    choose wisely   </div> ...
... и языковое меню. продолжим html разметку в div с классом menu, лежат ссылки на страницы сайта, а в div с классом lang-menu, ссылки на разные языковые версии. ...
... и рассмотрим в этой статье. для начала создадим разметку <div class="pre-loader">   <div class="box1"></div>   <div class="box2"></div>   <div class="box3"></div> ...
...       box-sizing: border-box;     }   </style> </head> <body> <div class="accordion">   <div class="section">     <div class="section-header" onclick="togglesection('section1')">выбор типа 1</div> ...
... избегайте прописывать стили непосредственно в html тегах. <div style="font-size: large;"></div> в каких случаях можно применять инлайновые стили? ...
... для слайдера, внутри которого 6 слайдов с картинками. <div class="slider">     <div class="slider__item">         <img src="img/slides/01.jpg" ...
... изображение. к установленным атрибутам, вернемся чуть позже. <div class="imagewrap">    <div class="imageplace">     <img src="jquery_data_white.jpg" alt="футболка"> ...
... <link href="css/styles.css" rel="stylesheet" type="text/css" /> </head> <body>   <div id="header">шапка сайта</div>   <div id="content">     <div id="left">левые блоки</div> ...
...     <div class="container mt-5">         <h1>cмены темы</h1>         <div class="form-check form-switch"> ...
... контейнер. <div class="container-well"> <h2>портфолио></h2> <p>много сплю и ем, но я гарантирую, что вы полюбите меня таким, какой я есть.</p> </div> ...
... // html разметка <section class="wrap">     <div class="wedding">         <div class="wedding__item"><img src="wedding_01.jpg" alt=""></div>         <div ...
... карточки html разметка создадим div с классом wrapper, который обернёт всю карточку и займёт все пространство страницы. внутри div-а обёртки будет находится ...
... такое как баннер. давайте теперь узнаем, как написать jumbotrons. <div class="container">   <div class="jumbotron"></div> </div> как видите, создать базовый jumbotron ...
... <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <div class="container mt-5">   <h1 class="mb-4">генератор паролей</h1>   <div class="form-group">     <label for="length">длина пароля:</label> ...
... классом list-header, а блоки с контентом - классом list-content. <div class="list-group">     <div class="list-group-item list-header" data-name="spoiler-title">         заголовок ...
... обязательный атрибут itemscope и тип схемы разметки itemtype. <div itemscope itemtype="https://schema.org/person"></div> далее прописываются отдельные свойство схемы, ...
... фигуры. это мы сейчас и узнаем. рисуем чашку //html теги <div class="container">     <div class="cup">         <div class="top">             <div ...
... переменной (j) и указываем значение переменной (цифру). <div class="container">   <div class="card" style="--i:-1">     <div class="content" style="--j:1">       <h2>card ...
... эффектом</title>   <link rel='stylesheet' href='css/style.css'> </head> <body>   <div id="page-wrap">    <h1>блоки со слайдер эффектом</h1>    <p>используются ...
... переходим на сайт https://getbootstrap.com/ в раздел grid. мы определили у блока div классы "col-lg-3" "col-md-6", где col – колонка,lg и mg – большой и средний экран у ...
... его описание. добавление в html-разметку контента <div class="container">     <div class="clip clip1">         <div class="content"> ...
... стилизовать под свой дизайн сделаем html разметку создадим контейнер div с классом box, внутри которого поместим пять пунктов списка ul. в каждый ...
...     </style> </head> <body>     <div class="container-fluid">         <div class="row flex-nowrap">             <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark"> ...
... buttons</title>   <link rel="stylesheet" href="style.css"> </head> <body>   <div class="button"></div>   <div class="button"></div>   <div class="button"></div> </body> ...
... контейнер с классом captcha, до кнопки «отправить». <div class="captcha">     ... </div> 2. внутри контейнера создадим два блока для первой ...
... прописав класс justify-content-center. html код <section class="cart">  <div class="container-fluid">   <div class="row justify-content-center">    <div class="col-sm-6">     <div ...
... data-image-src="/image.jpg", к которой хотите применить эффект. <div class="parallax-window" data-parallax="scroll" data-image-src="/images/image.jpg"></div> скопируем набор стилей и добавим в наш ...
... неопределенных значений следующая функция creatediv() создает в теле документа (body) новый элемент div с определенным стилем высоты, ширины и границы. ...
... собой. далее создадим три блока с содержимым табов tab__box. <div class="wrap">   <div class="tabs">     <nav class="tabs__items">       <a ...
...          <div class="container-fluid d-flex h-100 justify-content-center align-items-center p-0">         <div class="row bg-white shadow-sm"> ...
... легко обработается через css. для начала самый обычный html-код: <div class="tabs">   <div class="content">содержимое 1</div>   <div>вкладка 1</div> </div> ...
... использовал 270 градусов. добавим код в html: <body> <div class="circle-wrap">   <div class="circle">  <div class="mask half">     <div class="fill"></div> ...
...     <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="circle-wrap">   <div class="circle">   </div> </div> </body> ...
...     </style> </head> <body>     <div id="app">         <div class="row">             <div class="column block block_a"> ...
...     </style> </head> <body>     <div class="container">         <div class="sidebar">             <div class="profile"> ...
... созданные классы, чтобы наш popup выглядел более привлекательно. <div class="popup">   <div class="contentbox">     <div class="close"></div>     <div ...
... вёрстки для двухколоночного сайта. для начала html-код: <div id="header">шапка сайта</div> <div id="content">   <div id="left">левая колонка</div>   ...
... </head> в самом же документе нужно создать структуру следующего вида: <div id="tabs">   <ul>    <li><a href="#tabs-1" title="">первый таб</a></li> ...
...     /* add your custom css styles here */   </style> </head> <body>   <div class="container">     <div class="row mb-1">       <div class="col-md-6 offset-md-3"> <!-- adjust the column width and offset as needed --> ...
... перекрывает желтый, так как он в коде прописан последним. <div class="block-yellow">исходная позиция <div class="block-relative">относительная позиция- relative</div> </div> ...
... по макету.   <header class="header">     <div class="container-fluid">       <div class="row">         <div class="col-md-6"> ...
... текст. создание и стилизация текста <div class="box">     ...     <h2>neon text</h2> </div> @import url('https://fonts.googleapis.com/css2?family=monseratt:wght@600;700&display=swap'); ...
... скролла вниз у div, для того чтобы пользователь сразу увидел новое сообщение в чате. сообщения чата, как вы уже догадались, находились в div. большинство ...
... для некоторых дизайнов это не подойдёт, и придётся мучаться с height: 100% у div, что всегда весьма проблемно, тем более, что можно сразу сделать двухколоночную ...
... перебор dom элементов сначала получим три div по имени тега, в консоль выведется html коллекция. // html разметка <div>1</div> <div>2</div> <div>3</div> ...
... элемент по классу задача 2: получить содержимое тега div по классу. для наглядности, мы создали один div с классом any и второй обычный блок. <div class="any">блок ...
... container, куда поместим четыре блока div с изображениями. один блок с классом card - это будущий треугольник. <div class="container">     <div class="card"> ...
... бэм. шаг 3. под ссылкой – блок с аватаркой. <div class="form__avatar"> <img src="img/avatar.png" alt="avatar"> </div> .form__avatar {     width: 97px;     height: ...
... обязательно находится внутри тега form. <form action="#" method="#" id="form">   <div>     <label>       имя:       <input ...
... изображения планеты создадим свой div с классом item . добавим data-depth с разными значениями скорости для движения планет. <div class="space" id="space">     <div ...
...      translatez(-3em); } </style> </head> <body> <div class="scene">    <div class="frontwall"></div>    <div class="leftwall"></div> ...
... давайте разберём такой пример: <div id="article">   <img src="img.jpg" alt="" style="float: left;" />   <p>текст статьи</p> </div> <div>подвал сайта</div> ...
...     <h1>программирование на javascript с нуля до гуру 2.0</h1>          <div class="toggler">         <input type="checkbox" id="toggler__checkbox-id-1" class="toggler__checkbox"> ...
... по высоте и ширине. рассмотрим на примере блока div, сделаем html разметку. <body>   <div></div> </body> поведение блоков по высоте ...
... (карточки): имя человека, должность и иконки на социальные сети. <div class="card">   <div class="imgbox">     <img src="img1.jpg">     <img src="img2.jpg"> ...
...       { imgsrc: 'https://source.unsplash.com/205x203/?gift', name: 'gift 9', description: 'some description', price: 9.75 },   ];   return (     <div classname="app">         <h1>gift cards collection</h1> ...
... форма. <section class="form_section">   <div class="container">     <form class="grid">       <div><input type="text" name="mailing" placeholder="mailing"></div> ...
...     </style> </head> <body>     <div class="container mt-5">         <div id="customcarousel" class="carousel"> ...
... возникло ситуации, когда белые буквы стоят на белом фоне. <div class="header">..</div> .header {     font-family: tahoma, sans-serif;     position: ...
...     </style> </head> <body>     <div class="container">         <div class="sidebar">             <div class="menu-btn"> ...
...     <div class="container">         <h3 class="h3 my-4">генератор картинок</h3>         <div class="row"> ...
... добавим в html-код четыре волны с разными идентификаторами. <div class="waves">     <div class="wave" id="wave1"></div>     <div class="wave" id="wave2"></div> ...
... картинки, в таком случае, браузер покажет в плейере первый кадр видео. <div class="movie-wrap">     <video class="movie" src="video/travaho.mp4" width="640" height="480" controls ...
... примеров. мы получим список (псевдомассив) всех элементов div с классами example_1 и example_2. <div class="simple_one"></div> <div class="example_1"></div> <div class="simple_two"></div> ...
...     <title>валидация формы</title> </head> <body>     <div class="container">         <form id="form" class="form"> ...
... подсказывает пользователю, что сначала следует заняться окном. <div id="mymodal" class="modal"> </div> содержимое модального окна, состоящее из хедера, тела ...
... красный квадрат. как изменить css свойства у элемента через js? <div class="red"></div> .red {     width: 150px;     height: 150px;     background-color: ...
... integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous"> </head> <body>   <div class="container">    @yield('content')   </div> </body> </html> теперь вернемся в файл home.blade.php, ...
... integrity="sha512-5a8nwdmowrsz20fdsjczguidubr8lipyu+wymtzp1lmy9g6oc7hlzv156xqnsgnuztymefftcsfh/tnje/+xbg==" crossorigin="anonymous" referrerpolicy="no-referrer"/> <div class="card">     <div class="circle">         <div class="imgbx">         <img ...
... content с информацией и точно такой же иконкой (блок icon). <div class="container">   <div class="box">     <div class="imgbx">       <img ...
... три блока div с разными классами. контейнер нужен для отображения символа указателя, когда пользователь наводит указатель мыши на div блоки. первый ...
...     <div id="app">         <h1 class="p-3">генератор qrcode</h1>         <div class="text">             <form> ...
... карточек, а замена лиц будет происходить с помощью css-свойств. <div class="container">   <div class="card">     <div class="face face1">       <div ...
... всю конструкцию в центре страницы. // html разметка <div class="container">     ... </div> // css стили .container {     max-width: 1000px;     margin: ...
... в конце урока станет понятно, зачем он был нужен. <div class="container">     <div class="box">         <span></span>         <div ...
... <title>test</title>   <link rel="stylesheet" href="public/css/default.css"> </head> <body> <div id="header">   header </div> <div id="content"></div> смотрите! у нас подключается файл ...
...     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-tx8t27ecre3e/ihu7zmqxvncday5uikz4rekgixemed4m0jlfidpvg6uqki2xxr2" crossorigin="anonymous"> </head> <body>     <div id="root"></div>     <script src="./index.js"></script> </body> </html> ...
... justify-content-end – выравнивает меню по центру на горизонтали <div class="top-menu">  <div class="container-fluid">   <div class="row">    <div class="logo-wrap ...
...    margin: 20px;    }  </style> </head> <body>  <div class="container">   <div class="row">    <div class="col-sm-4">     <form action="" ...
...   <form>     <div>       <input type="text" name="" required="">       <label>логин</label>     </div>     <div> ...
... integrity="sha384-wskhasgfghywdcbwn70/dfybj47jz9qbsmid/irn3ewghxqfzcsftd1lzcfmhktb" crossorigin="anonymous"> </head> <body>   <div class="container">    <div class="row justify-content-center">     <div class="col-4">      <h2>валидация ...
... абсолютно одинаковыми по форме, но разными по содержанию. <div class="container">     <div class="text">приходи в школу</div>     <div class="text">учись ...
... сетке, обратимся к нему через псевдокласс nth-child(1). <div class="container">     <div class="item">item-1</div>     <div class="item">item-2</div> ...
... класс удаляете из html и css кода. <section>     <div class="container bg_pink">container</div> </section> зададим для контейнера максимальную ширину ...
... через блочный тег div. пропишем три блока с классом drop. каждый из таких блоков в будущем станет каплей. / * html разметка * / <div class="drops">     <div ...
... нижнем блоке родителя (section) находятся в свою очередь ещё три блока ребенка (div id="item"). в каждом блоке ребенке есть картинка, подзаголовок, текстовый ...
... в javascript. <div id="text_out"> <p id="text_change">заменить текст</p> <hr> <button onclick="text_out()" class="btn btn-danger">заменить текст</button> </div> заменить ...
... тоже будет полупрозрачным. что не есть хорошо. // html <div>     <div class="black">         <h1>             свойство ...
... мы рассмотрим с вами один из способов отправки на сервер содержимого div блока с атрибутом contenteditable. contenteditable - это атрибут, который будучи применный ...
... может быть любой, слова должны разделяться через дефис. <div data-is-active-color="red"></div> пример стилизации элементов с data атрибутом мы можем ...
... "забит" div-ами. разбираться в таком коде было крайне тяжело, приходилось ставить много комментариев. в современной блочной верстке применять тег div ...
... единственный, если работ в портфолио больше, то ряды можно добавить. <div class="row">…</div> внутри ряда идут четыре столбцы, где один столбец – одна ...
... угодно. в нашем случае там находится параграф с текстом. <div class="accordion">   <div class="contentbx">     <div class="label">list one</div>       <div ...
... пользователь докрутил. // схематичная html разметка <div class="sticky-first">     sticky position #1 </div> <div>     <h3>         несколько ...
... управлять ими, прописывая свойства в дивах. <div class="container">   <img src="vegetables.png" alt="vegetables">   <div class="left">лук</div>   <div class="center">картошка</div> ...
... невидимого фронта. в финальном коде никаких рамок не будет. <div class="container">     <div class="box">         <div class="circle"></div> ...
... class="more">отправить заявку</button> <!--модальное окно--> <div class="modal">     <div class="modal-header">       <span class="close">×</span> ...
... delay);   } </script> код html (вставлять между тегами <body> и </body>): <div>   <p style = 'text-align: center;'>     <img id='bigimgslide' src='images/javascript/space_1.jpg' ...
... под текстом – синий. у тега a, вместо решетки поставьте url. <div class="row">   <div class="column">     <figure class="imghvr-slide-up">     <img ...
...       left: 100px;     }   </style> </head> <body>   <div class="absolutely-positioned">     этот блок абсолютно позиционирован и находится вне потока документа. ...
... код в html: <nav>   <div class="wrapper">   <!-- меню гамбургер, при клике, развернутся пункты меню -->    <div class="menuburger">меню</div> ...
... <body> и </body>): <div>   <input type = 'checkbox' id = 'cb1' onchange = 'showorhide("cb1", "cat1");'/>показать содержимое категории 1   <br />   <div id = 'cat1' style = 'display: ...
... </head> <body> <div>регистрация на мероприятие будет закрыта через <span class="time">00:00:20</span> сек.</div> <div>регистрация на мероприятие будет закрыта через <span class="time">00:00:12</span> сек.</div> ...
... <body>   <div class="container">    <ul class="accordion">     <li>      <a href="#first" class="accordion-header">первый</a>      <div class="accordion-content" ...
... вашего контейнера. html код также несложен: <div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px;">   <div u="slides" style="cursor:move;position:absolute;overflow:hidden;left:0px;top:0px;width:600px;height:300px;"> ...
... .holder с фотографиями с классом img-1. html код целиком: <div id="img-wrap">       <div class="holder">         <img src="photo_01.jpg" ...
...         .submenu-item {}     </style> </head> <body>     <div class="container">         <aside class="sidebar-menu" id="sidebarmenu"> ...
мы с вами когда-то разбирали перемещение div на javascript, а сегодня мы разберём изменение размеров div на javascript, которое так же может быть очень удобно ...
... начала мы должны сделать хоть и элементарную, но html разметку. <div id="page">   <div class="blog section">    <div class="main"></div>    <div class="sidebar"></div> ...
... расположенных в тегах p.    <section class="section">   <div class="sticker">     <div class="sticker_move">       <div class="title">pizza ingredients</div> ...
... пустых блока, которые в дальнейшем заполним картинками. <div class="container">     <div class="clip clip1"></div>     <div class="clip clip2"></div> ...
... параграф с текстом поле для ввода email кнопка подписки <div id="popup">   <div class="content">     <img src="email.png">     <h2>join ...
... но с типом "submit". <div class="container">     <h2>premium subscription</h2>     <form>         <div class="inputbox">           <<input ...
...     <body>         <div id="infinite-scroll">             <div>      <script>        for( let i = 0; i < 100; i++ )  ...
... высота ограничивают размеры вставляемых изображений. <div class="container">     <div class="imgbx">         <img src="turtle.jpg"> ...
... пользователь html структура <div class="booking_form"> <h2>забронировать визит</h2>   <form action="#">     <div class="input_contact">       <input ...
... контейнера поместим блок card с иконкой, текстом и ссылкой more. <div class="container">   <div class="card">      <div class="icon">       <img ...
... выравнивания их по центру. один блок - одна кнопка. <div class="wrapper">     <div class="buttonleft"><span>left</span></div>     <div class="buttonoverlay"><span>center</span></div> ...
... кнопке отработает эта функция, первым аргументом события будет - event. <div class="tab">   <button class="tablinks" onclick="opencity(event, 'москва')">москва</button> ...
... span. каждый span соответствует одной стороне квадрата. <div class="container">     <div class="bg-img">         <div class="box">             <span></span> ...
... возьмем из готовой библиотеки iconicons, указав ее название. <div class="container">   <div class="card">     <div class="icon">       <ion-icon ...
... будут только стили. способ первый <div class="block">     <img class="icon first" src="support.png" alt=""> </div> положение изображения автоматически ...
... страницы, и высота его сможет быть динамичной. html верстка: <div class="wrapper">   <div class="header">    this is the header   </div>   <div class="content"> ...
... сделаем его голубого цвета, а текст – белого: <div class="jumbotron jumbotron-fluid bg-info text-white" style="background: #aaa;">   <div class="container">    <h1>добро пожаловать ...
... нижней грани страницы. итак, сначала рассмотрим разметку. <div class="wrapper">   <div class="header">    <p>это верхняя часть страницы</p>   ...
... структура <div class="carousel-wrapper" style="height: 400px;">   <span id="target-item-1"></span>   <span id="target-item-2"></span>   <span id="target-item-3"></span>   <div class="carousel-item ...
...     <div class="content">       <button class="show_popup blue_btn" rel="popup1">отправить письмо</button>     </div>     ...
... которого поместим карточку с изображением и текстом. <div class="box">     <div class="card">         <div class="imgbx">             <img ...
... основание куба (пятая сторона) не будет показываться вообще. <div class="cube">     <div class="top"></div>     <div>         <span ...
...     </style> </head> <body>     <div class="bubble">         <div class="point"></div>         <div class="point"></div> ...
... в общем flex-контейнере advantage. <div class="advantage">     <table class="advantage-table"></table>     <div class="advantage-users">список пользователей</div> ...
... слой <body> – сама картинка, средний в теге <div> – полупрозрачный блок затемнения и верхний <div> – текст. наша задача задать нужное позиционирование ...
... колонке brand-right - фотография. <section class="section-brand">   <div class="container">     <div class="brand-left">       <h2>о бренде</h2> ...
... применения графики. для этого создадим div с классом smartphone (изображающий сам смартфон), внутри которого поместим другой div с классом content (изображающий ...
... мы создадим два div-а, в одном из них с классом .box мы поместим растянутый на всю ширину и высоту страницы фон-картинку. а в другом div-е с классом .top-text, ...
... прилипает к левому краю. свойство text-align, внутри тега div, выравнивает текст по центру. <div>поставьте меня в центр</div> // html div {     text-align: ...
... loaders.min.css вставьте подходящее число div'ов в этот элемент создайте элемент и добавьте класс анимации(например, <div class="loader-inner ball-pulse"></div> ...
... shadow</title>   <link rel="stylesheet" href="style.css"> </head> <body>   <div class="shadow"></div> </body> </html> а теперь перейдем к css body {   background: #ccc; ...
... href="style.less">   <script src="less.js"></script> </head> <body>   <div id="container">    <div id="nav">     <ul>      <li><a href="#">главная</a></li> ...
... невидимый лоадер, в виде полукруга мячик - просто круг <div class="container">     <div class="loader">         <div class="ball"></div> ...
... html код зададим html структуру. создадим div с классом clock, где будут находиться сам счётчик. под ним зададим div с классом message, в этом блоке будет выводиться ...
... мы создали обертку wrap для блока с тенью curved shadow. <div class="wrap curved">     <div class="shadow">         <div>curved shadow</div> ...
... </head> <body>   <a href="#creditos" name="creditos">ссылка</a>   <div id="titles">    <div id="credits">     <div id="the-end">petpaw.co</div>     <br ...
... фона и размеры у всего блока. <section class="info">     <div class="info__icon"></div>     <h2 class="info__title">личная информация</h2>     <div ...
... текстом. <button class="accordion">вопрос 1</button> <div class="panel">   <p>ответ на вопрос 1...</p> </div> <button class="accordion">вопрос 2</button> <div class="panel"> ...
... сделать всплывающее окно с любым кодом, поскольку сначала мы прописываем тег div, который может служить контейнером и для любых других элементов, а не ...
... таблицу адаптивной. демонстрация адаптивной таблицы. html разметка <div> <table> <tr> <th>имя</th> <th>фамилия</th> <th>баллы</th> ...
...     </style> </head> <body>     <div class="container">         <div class="content">             <h1>заголовок</h1> ...
...     <!-- изображения нужно добавлять в этот блок -->     <div class="images">         <img src="https://myrusakov.ru/images/ue5-cover.png" alt="image" onclick="displaymodal(this);"> ...
... не отображается на странице без написания css-кода. <div class="checkbox">     <div class="inner">         <div class="toggle"></div> ...
... чтобы изображения встали в ряд, а не друг под другом. <div class="container">     <div class="box">         <img src="img1.png">     </div> ...
... для приложения. например, компонент с именем weatherapp.vue. <template>   <div>     <h1>погода на улице</h1>     <input v-model="city" @input="fetchweather" placeholder="введите название города" /> ...
... html-разметка состоит из круга, логотипа дизайнера и текста. <div class="circle">     <div class="logo"></div>     <div class="text">         <p>kristen ...
... поискового поля создадим кастомное поисковое поле, используя только теги div. <div class="search">     <div class="icon"></div>     <div class="input"> ...
... имеем дело с динамической сменой фона с помощью javascript. <div class="navigation">     <div class="navarea">         <ul>         <li><a ...
... </head> <body>     <div id="myelement" style="width: 200px; height: 100px; background-color: lightblue;"></div>     <script>         const element = document.getelementbyid('myelement'); ...
... дорого, хоть и сделана на чистом css. html разметка <div class="planet planetearth">     <div class="container">         <div class="earth"></div> ...
... принципов material design рассмотрим пример карточки с информацией: <div class="card">   <div class="card-header">     <h3>заголовок карточки</h3> ...
... видно, что индикатор загрузки представляет собой зеленый блок div внутри серого div-а. зеленая полоска постепенно должна закрыть собой серую. запускается ...
... отдельный, чтобы раскрасить его в другой цвет. <div class="coupon">     <img src="coupon.jpg" alt="coupon"> <div class="box">     <h2>скидка -20%</h2> ...
...     <link rel="stylesheet" href="style.css"> </head> <body>     <div id="random-phrase">         <div id="phrase"></div>         <div id="author"></div> ...
... active в тег li, чтобы обозначить текущую страницу.    <nav>   <div class="nav-wrapper">     <a href="#" class="brand-logo"><img src="logo.png" alt=""</a> ...
... красной рамкой. html форма <div class="form"> <form>   <h2 class="form__title">валидация номера телефона</h2>     <div class="form__input">       <input ...
... вставим сами картинки и две кнопки – вперед / назад. <div id="gallery">     <div class="photos">         <img src="img/woman.jpg"> ...
... вида фона, добавляя к селектору bg_example разные css свойства. <div class="bg_example"></div> // html разметка // css код .bg_example{ width: 400px; height: 300px; } это ...
... черного цвета, необходимо все три перекрасить в розовый цвет. <div class="box">элемент 1</div> <div class="box">элемент 2</div> <div class="box">элемент 3</div> ...
... ними мы и будем работать. добавим каждому полю name со своим значением. <div class="input_contact">     <input type="text" placeholder="имя" name="first_name">     <input ...
... позиционирование блока с ленточкой относительно окна браузера. <div class="wrap">     <div class="box">         <div class="ribbon">             best ...
... связку input+label в div с классом radio, то же самое сделаем для второй связки. присвоим так же классы input и label, для их дальнейшей стилизации. <div class="radio"> ...
...   margin: 0;   padding: 0; } секция с описанием html код <div class="container">   <div class="section_header">     <h3>what we do</h3>     <h2>some ...
... разобраться. html код <div class="box">     <h2>login</h2>     <form>         <div class="inputbox">         <input ...
...   #openclosecheckbox:checked~#content {     display: block;   } </style> <body>   <div class="simple-modal">     <label class="simple-modal__label btn btn-primary" for="openclosecheckbox">показать картинку</label> ...
...         </table>     </template>     <div class="container">         <div class="jumbotron mt-3" style="text-align: center;">             <h1 id="headertitle">список задач</h1> ...
... браузер и предназначен для вывода текущей даты. <div>     <input type="date" id="startdate"> </div> <div>     <input type="date" id="enddate"> </div> ...
... радиокнопка становится выбранной, необязательно целиться в сам кругляш. <div class="form-group">     <label>         <input type="radio"> ...
...             <!-- логотип сайта -->             <div class="brand-title">мой сайт</div>             <!-- кнопака - гамбургер меню --> ...
... отношению к браузеру, который и будет выступать его родителем. <div class="block"></div> html, body {     width: 100%;     height: 100%; } .block ...
... увидеть на codepen. ниже я приведу код одной такой ячейки. <div class="container">     <div class="box top-left">         <div class="item">top ...
... создаются с помощью тега <div>. то есть всё, что необходимо поместить в определённый контейнер помещается внутри тега <div>. а уже у этого тега ...
...         }     </style> </head> <body>     <div id="videocontainer">         <h2>мой видео плеер</h2> ...
... запутанно, не спорю, но давайте разберёмся на примере<div><h2>заголовок в контейнере</h2></div>элемент, в данном случае - это текст "заголовок ...
... href="/path/to/starwarsintro.css"> <!-- поместите в body, где вы хотите, чтобы было интро --> <div class="star-wars-intro">   <!-- синий интро текст -->   <p class="intro-text"> ...
... $.post(url, data, function(o) {   $("#listinserts").append('<div>' + o.text + '<a href="#" class="del" rel="'+ o.id +'">x</a></div>'); }, 'json'); добавьте также ссылку ...
... <title>transforms</title>   <meta charset="utf-8"> </head> <body>   <div class="block">css3 трансформации</div> </body> </html> и зададим первоначальные стили ...
... <div id="animatedmodal"> <!-- это важно! чтобы закрыть модальное окно, имя класса должно совпадать с именем, данным в id class="close-animatedmodal" --> <div ...
... звонка: демо пример формы в модальном окне: html код: <div class="pulse"> </div> иконка с сайта font awesome для начала необходимо подключить ...
... method="post">   <div>     <input type="text" name="x" />     <br />     <input type="submit" value="возвести в квадрат" name="sqr" />   </div> </form> ...
... а после названия страницы, создадим форму контактов. <div> <form>   <div>   <label>ваше сообщение</label>     <input ...
... начнем с html разметки: <body>   <div>     <h1>полупрозрачный текст на фоне</h1>   </div> </body> заголовок h1 мы поместили ...
... как правильно использовать теги div, section и article в html5. помимо всем известного и очень часто используемого тега div, в html5 появились новые, семантические ...
... покажу её решение. итак, давайте разберём вот такой код: <div id="left">левые блоки</div> <div id="right">   <img src="images/img.jpg" alt="" />   <p>текст ...
... поместим блок div с заголовком, текстом и кнопкой. вставляем код целиком в наш html документ, после тега . <section class="mops_bg"> <div class="wrap"> <div ...
... элемента мы увидим одинаково оформленный текст. // html разметка <div>универсальный</div> <h3>css</h3> <p>селектор</p> // css стили * {     font-size: ...
... 'red'; }); узнаем координаты мыши при клике по блоку. <div>узнать координаты</div> <script> let div = document.queryselector('div'); div.addeventlistener('click', ...
... анимация составляется для конкретного элемента, например для блока div. <div class="square"></div> теперь нарисуем квадрат, привяжем к нему название ...
... <section class="section service--wrapper">     <div class="container">         контент     </div> </section> .container{     max-width:960px; ...
... существенный недостаток, текст не так хорошо выделяется. <div>   <div class="blue">     <h1>       прозрачность ...
... любого элемента похожим на стандартный вид. рассмотрим пример. <div>это блок div</div> теперь применим такие стили div {   appearance: button; } теперь ...
... браузера. сама карточка – это тег div с классом card. разумеется, что в данном примере мы могли бы и не присваивать класс тегу div, ведь он у нас один на странице. ...
... давайте приведу небольшой пример. пусть у нас есть такой html-код: <div class="container">   <div>     <p>первый абзац</p>   </div>   <p>второй ...
... которую мы умножаем на саму себя, чтобы сгенерировать правильное число div.grid-item, которое ведет себя как контроллер, который сдвигает картинку, ...
... вложенные селекторы выбрать все параграфы, вложенные в тег "div". $(document).ready(function () {   $("div p").css("color", "red"); }); html-код <div>   <p>вложенный ...
... вставим код с иконками между тегами div. а перед закрывающим тегом body вставляем две ссылки из данной библиотеки. <div class="navigation">   <ul>     <li ...
... наше меню. <div class="nav">   <a href="#home">главная</a>   <a href="#news">новости</a>   <a href="#contact">контакт</a> </div> создадим ...
... codepen. html-код прозрачной панели навигации в тег nav мы поместим блок div с логотипом компании и список ul с ссылками, которые являются пунктами ...
...       color: var(--color);       width: var(--width);     }     div {       background-color: var(--bgcolor);       color: var(--color);       ...
... перечислять внутри него не один, а сразу несколько тегов: :not(p, h1, div) // то же самое, что и :not(p):not(h1):not(div) 2. :has() это очень интересный селектор, открывающий ...
... css. кнопка</h2>     <div>       <a class="button" href="#">заказать работу</a>     </div> .button {     background-color: ...
... <div class="box">     <div class="circle">         <img src="img1.png">     </div>     <img src="img1.png"> </div> ...
... правильная верстка. правильная верстка может быть построена на тегах div и при этом быть валидной, не кривой и хорошо адаптироваться. семантические ...
... метода createelement(). в js файле прописываем код: <!-- создадим html-элемент div в javascript, вызвав метод createelement() для объекта документа . ...
... посмотрим сразу на пример. к примеру, у нас есть такой html код: <div id="id1">какой-то текст</div> теперь мы можем сослаться на данный элемент из строки ...
... делается перетаскиваемый div на javascript. давайте не будем лить воду, а сразу рассмотрим прокомментированный код: <div id="block" style="border: 1px solid #000; cursor: ...
... структуру для выборки элементов. <header> <div>     <h3 class="brand">привет, мир!</h3> </div> </header> <main>     <p>следуйте ...
... в jquery, служащих для стандартной анимации: <div id="block" style="background-color: #ccc; height: 200px; width: 200px;">блок</div> <span id="fade_out">скрыть блок (через изменение ...
... $(document).ready(function() {     $("#radios").radiostoslider();    });   </script>   <div id="radios">    <input id="option1" name="options" type="radio">    <label for="option1">1<br>выбор</label> ...
...       <div id="float_1" style="display: none; position: absolute;">         <img src="foto5.jpg" alt="фото 1" />       </div>     </td> ...
...      <script defer src="https://kit.fontawesome.com/921224fb4e.js"></script> </head> <body>     <div id="root"></div>     <script src="./main.js"></script> </body> </html> ...
... обрабатывать следующим образом: <span id="add">добавить в блок span</span> <div id="block"></div> <script type="text/javascript">   $("span#add").bind("click", function() {     $("#block").append("<span>добавленный ...
... {   for(var i = 0; i < o.length; i++) {    $('#listinserts').append('<div>' + o[i].text + '</div>');   } }, 'json'); теперь в index.php нашей dashboard пропишем ...
...         }     </style> </head> <body>     <div id="root"></div>     <!-- load react. -->     <!-- note: when deploying, replace "development.js" with "production.min.js". --> ...
... <body> <div class="zoomer" onmousemove="zoom(event)"      style="background-image: url(zoom-image-2.jpg);" >     <img src="zoom-image-2.jpg" /> </div> <div class="zoomer" onmousemove="zoom(event)" ...
... новый атрибут. <div contenteditable>   <p>lorem ipsum dolor sit amet</p>   <p>lorem ipsum dolor sit amet</p>   <p>lorem ipsum dolor sit amet</p> </div> теперь, кликнув ...
... поскольку для них хотим задать больший размер шрифта, чем остальной текст. <div class="container">   <img src="avatar-female.png" alt="avatar">   <p><span>марина ...
... нужные html и css заготовки - создадим в разметке кнопку и блок. <div class="btn">запускай!</div> <div class="box"></div> оформим красиво внешний вид элементов. ...
... уровня, параграф с текстом и форма с одним полем ввода и кнопкой. <div id="popup"> <div class="popup-box"> <span class="popup-close">×</span>   <h2>подписывайтесь ...
...     <li>         <a href="#">         <div class="icon">         <i class="fa fa-home" aria-hidden="true"></i> ...
...     <link rel="stylesheet" href="../css/style.css"> </head> <body> <div class="container py-4">     <nav aria-label="breadcrumb"> ...
... тег select поместим внутри тега div с классом select. создадим две опции, между которыми и должен происходить выбор. <div class="select">     <select> ...
... сайтов. допустим, есть такой html-код: <body>   <div id="main">     <p>текст</p>   </div>   <div id="footer">     <p>подвал</p> ...
... icon, вставим, ссылку на svg иконку, посредством тега object. <div class="box">     <div class="icon">         <object type="image/svg+xml" data="sedan-car-front.svg" ...
... bar</title>   <link rel="stylesheet" href="style.css"> </head> <body>   <div class="wrapper">    <div class="progress-bar">     <span class="progress-bar-fill" style="width: 30%"></span> ...
...     <!-- контейнер, в котором будет размещено react приложение -->     <div id="app"></div> </body> </html> , а также файл index.js: import react from 'react'; ...
... `<article> <header>    <h1>${title}</h1> </header> <section>    <div>${intro}</div>    <div>${body}</div> </section> <footer>    <ul>       ${tags.map(tag ...
...       }     };   } </script> <div>   <input type="button" value="отправить" onclick="send()" />   <div id="yandex"></div> </div> а теперь файл test.php, ...
... контейнер body и установим нужный свойства. //html код <div class="card">     <h2>gradient</h2> </div> <div class="card">     <h2>shadow</h2> ...
... // html разметка <button class="btn">запуск анимации</button> <div class="wrapper">     <div class="box"></div> </div> найдем оба элемента по селектору ...
... атрибут data-aos со значением - название выбранной анимации. <div data-aos="fade-in"></div> полный список названий анимаций, есть на github. как добавлять ...
... и подходит для любого варианта. <section>   <div class="container">     <div class="box">       <h2>css</h2>       <h3>vertical</h3> ...
... одного элемента. текст с тенью <div class="container">     <h2 class="text1">box shadow</h2> </div> .container{     position: relative;     width: ...
... <h1>сайт</h1> <h1>сайт</h1> <h1>сайт</h1> <h1>сайт</h1> <div id="parent_popup">   <div id="popup">     <p style="cursor: pointer;" onclick="document.getelementbyid('parent_popup').style.display='none';">закрыть</p> ...
...     <h1>${title}</h1>     </header>     <section>     <div>${desc}</div>     <div>${body}</div>     </section> </article>` ...
...       }     };   } </script> <form name="myform" action="#" method="post">   <div>     <select name="countries" onchange="changecountry(this.value)">       ...
... понятная, внутри тега section будет находится шапка сайта header, внутри которой блок div с логотипом и навигационная панель nav. она будет использоваться, как ...
...   <header class="header">    <div class="logo">    <a href="#"><img src="img/logo.png" alt=""></a>    </div>    <nav class="menu">     <ul> ...
... блока, но с разными значениями свойства box-sizing. // html теги <div class="content-box">content-box</div> <div class="border-box">border-box</div> // css стили .content-box {     box-sizing: ...
... с классом top-header, поместим три флекс-элемента – абзацы с текстом. <div class="top-header">   <p>массажный салон для вашего здоровья и красоты</p> ...
... контейнер container шапка header контент в центральной части main подвал footer <div class="container">   <header class="header">header</header>   <main class="content"> ...
... внутри (теги span) и контентную часть с заголовком. <section>     <div class="wave">         <span></span>         <span></span> ...
... наш таймер. во-первых, создайте следующую html структуру для часов: <div id="clockdiv"></div> затем напишите функцию, которая будет отображать данные ...
... названиями нужных иконок и две ссылки на саму библиотеку. <div class="menu">     <div class="toggle"><ion-icon name="add-outline"></ion-icon></div>     <li ...
... вашей странице <link rel="stylesheet" href="animate.css"> создайте блок с class=box <div class="box"></div> зададим ему какие-нибудь базовые стили .box {   background: cornflowerblue; ...
... разметке, значит оно будет на нижнем слое. <section>     <div class="bg"></div>     ... </section> *{     margin: 0;/*обнуление ...
... <div id="movie-bg"> <video autoplay muted loop poster="video/travaho.jpg" id="myvideo"> <source src="video/travaho.mp4" type="video/mp4"> ваш браузер не поддерживает html5 видео. </video> </div> ...
... (сайдбар) с пунктами меню и иконками (тег i), находящиеся внутри ссылок. <div class="sidebar">   <a href="#"><i class="fas fa-fw fa-home"></i> главная</a> ...
... capslock. html разметка для примера создадим простенькую html разметку. <div class="wrap">     <label for="input">пароль:</label>         <input ...
...     <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.css"> </head> <body>     <div class="container">         <div class="alert alert-lucky">внимание, внимание, говорит...!</div> ...
...     background:#0e3959;/*цвет фона*/ } .info h3 {     color: #fff;/*цвет подзаголовка*/ } .infobox div{     display: flex;/*flexbox сетка*/     align-items: center;/*вертикальное ...
... классы (thought и speech). <div class="bubble thought">выноска в стиле комиксов для иллюстрации мыслей персонажа, напоминающая «пузырёк».</div> <div class="bubble speech">выноска ...
... ввода имени и е-майла пользователя и кнопка отправить. <div class="wrapper">   <div id="newsletter">     <h2>подпишитесь на наши новости</h2> ...
...   <link rel="stylesheet" href="style.css"> </head> <body>   <div class="wrapper">    this is the content   </div>   <footer>    <div class="wrapper">     ...
... классом wrapper и из блока самого текста с классом text. <div class="wrapper">     <div class="text">анимация набора текста на css</div> </div> ...
... и сохраним под новым именем female_pixel.jpg. <div class="box">     <img src="female.jpg"> </div> <div class="box pixel">     <img src="female_pixel.jpg"> ...
... семантических тегов. однако многие разработчики по-прежнему используют div для всего подряд, не осознавая преимущества новых тегов section и article. в ...
... class="header">     <div class="brand">         <img src="logo.svg" alt="logo" style="height: 32px;">     </div>     <div class="text"> ...
... баннера пустой блок. во втором блоке расположиться контент. <div class="banner"></div> <div class="content">здесь будет контент</div> css код растянем ...
...   <div class="jumbotron" style="color:black">   <h1 style ="color:white"> get the latest news on our website   </h1>   </div> ...
... линий кнопки под блоком с навигационным меню. <div id="menu-toggle" class="menu-icon">     <div class="menu-icon-line"></div> </div> кнопка гамбургер ...
... функцию очереди, установите значение true   template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',   animation: {    ...
... статьях, и пропишем там следующий код: <div class="container" style="background: skyblue">   <h1>фиксированный контейнер</h1> </div> <div class="container-fluid" style="background: ...
...     <h1>фильтр объектов на карте</h1>     <div class="controls">         <input type="text" id="search" placeholder="введите название..."> ...
... с классом wrapper для выравнивания сердечка по центру. <div class="wrapper">     <div class="heart"></div> </div> заготовка для сердечка ...
... блок с классом user отвечает за разметку самой иконки. <div class="wrapper">     <div class="user"></div> </div> css стили стандартный набор ...
... пузырька</title>   <link rel="stylesheet" href="style.css"> </head> <body>   <div class="comments">    <div class="comment bubble">     <p>lorem ipsum dolor sit amet, consectetur adipisicing ...
... выводится значения текущих координат курсора. <div class="block">     move the mouse </div> <div class="coords">     x: <span class="x"></span><br> ...
... href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <section>   <div class="loader">     <span style="--i:1;"></span>     <span style="--i:2;"></span> ...
... выводится наши товары, как в обычном интернет-магазине. <div id="items"> // здесь будут товары </div> js код писать наш код мы будем в javascript файле, ...
... создадим контейнер с двумя фотографиями <div id="container1">   <img src="sample-before.png">   <img src="sample-after.png"> </div> когда картинки будут загружены, ...
... пункты меню навигации. <footer>     <div class="waves">         <div class="wave" id="wave1"></div>     </div>     <ul ...
...     cursor: pointer;   } </style> </head> <body> <div id="mymodal" class="modal">   <div class="modal-content">     <form id="passwordform"> ...
... function funcetsy(){ /* функция funcetsy без параметров */ return '<a href="#"><div class="etsy"></a></div>'; /* возвращает блок с классом etsy */ } итого код целиком ...
... его вместе с тегами форматирования в html-страницу. // html разметка <div class="container">     <p class="text-example">как изменять существующие ...
... потянуть за него, то создастся полупрозрачная копия. // html <div class="elem" draggable="true">тяни</div> <div class="area">бросай</div> // css .elem {     width: ...
... бургер-иконку, копируем код и вставляем между тегами span,. <div class="wrapper">   <div class="menu">   <a href="#" class="menu-icon">     <span><i ...
... узнаете из этой статьи. для начала разберёмся с html-кодом: <div id="content">контент</div> <div id="top">наверх</div> перейдём к стилям: #content {   ...
... <body>   <p>загруженные файлы:</p>   <div id="uploads">    <ul>    </ul>   </div>   <div class="dropzone" id="dropzone">перетащите файлы ...
... </body>):<h4 style="cursor:pointer;" onclick="expandit('ans1')">вопрос №1</h4><div id = "ans1" style="display:none">ответ №1.</div><h4 style="cursor:pointer;" onclick="expandit('ans2')">вопрос №2</h4><div ...
...     <link rel="stylesheet" href="floatingbutton.css">   </head>   <body>     <div id="root">руддщ</div>     <script type="text/babel">         /** ...
... class="section-blog">  <!-- контейнер -->   <div class="container">    <!-- обертка для блоков -->    <div class="blog-wrap grid">     <!-- первый ...
... страницы и вставить после тега body следующую разметку: <div class="circle-wrap">   <div class="circle">   </div> </div> стили css ...
... создадим в html файле блок, где будет выводится данное число. <div id="out" class="out-num">0</div> 2) создадим две переменные: time - общее время отработки ...
... дефолтного, но тогда не забудьте изменить это название и в jquery коде. <div id="tab-container"> <ul class="nav nav-tabs">   <li class="nav-item">     <a ...
... <body>   <p>загруженные файлы:</p>   <div id="uploads">    <ul>    </ul>   </div>   <div class="dropzone" id="dropzone">перетащите файлы ...
...       </head>       <body>         <div class="container">           <h1>list of 200 items</h1> ...
...     margin: 100px auto;    }   </style> </head> <body>   <div class="share"></div>   <script>    new share(".share", {     networks: {      ...
... создается внешний вид курсора, затем скрывается дефолтный курсор и созданный div следует за скрытым курсором по всей странице. иными словами новый курсор ...
... добавить его в файле app.scss @import 'framework/layout'; и создайте div с классом wrapper в файле index.html <div class="wrapper">content</div> ну, что же, на этом все. увидимся ...
... заданных рамок. создадим блок div с классом wavy, разместим его в центре страницы и временно окрасим бокс в белый цвет. <div class="wavy"></div> *{     margin: ...
... src="tinytools.periodselector.min.js"></script> создайте элемент div с каким-нибудь id или классом. например, пусть будет #archive <div id="archive"></div> чтобы запустить наш скрипт, ...
...         public $fundsofclientsnoncreditorganizations;         public $depositsofindividuals;         public $debtobligationsissued;         public $iterestpaymentoobligations; ...
...   <input type="text" id="b">   <button id="submit">отправить!</button>   <div id="block"></div> </body> </html> html до безобразия прост: 2 текcтовых поля, блок, ...
... понятнее, посмотрите демки. для чего использовать? например, у вас есть div, который вы хотите анимировать выезжающим эффектом с области за пределами ...
... обычном html и с pug. html <div>     <h1>pug</h1>     <p>html</p>     <p>шаблонизатор</p> </div> pug div     h1 ...
... тур по любому элементу на странице. давайте, к примеру, создадим div с id=block <div id="block">какой-то текст. неважно какой. тут может быть все, что угодно</div> ...
... html.сначала создайте простейшую html-страницу, в которую добавьте контейнер (тег <div>), выравнивающий своё содержимое по центру. надеюсь, что вы с этим без ...
... выставьте нужные классы. <div class="floatl">   <label class="floatl__label">first name</label>   <input class="floatl__input" placeholder="first name" type="text"></div> </div> создайте ...
... практике. для этого анимируем div. html разметка <html> <head>   <title>transition</title>   <meta charset="utf-8"> </head> <body>   <div class="block">кнопка клац!</div> ...
... href="#"><i class="fa fa-globe" aria-hidden="true"></i></a></li>     <div class="cursor"></div> </ul> стилизация иконок *{     margin: ...
... html код создайте div с идентификатором myfirstchart, внутри которого построится svg график и укажите нужную высоту. <div id="myfirstchart" style="height: 250px;"></div> ...
... обойтись без графики и все сделать на чистом css. создание карточки в теге div мы создадим карточку. обычно тег i используется для выделения части ...
... добавить фильтр, используйте следующую структуру: <div class="cssco cssco--c1">   <img src="image.png"/> </div> в классе у div блока укажите нужный вам фильтр. ...
... следующий код вызовет исключение. print(1/0) # вывод # zerodivisionerror: division by zero так как невозможно разделить 1 на 0, то программа ...
... разметку для кнопки, обернем тег input в блок с классом form__button. зачем нужен блок div? тег input является строчным элементом, поэтому он проигнорирует свойство, ...
... простенький html-код, состоящий из одного пустого тега div с классом loader, не считая конечно тега body. <div class="loader"></div> в файле стилей пропишем весь ...
... main. пример использование тега main ниже. <body> <header> <div id="logo">rocking stone</div> <nav>...</nav> </header> <main role="main"> <h1>guitars</h1> ...
... href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> html разметка создается контейнер div с классом "info-box", внутри которого три элемента li списка ul с двумя span. span ...
... wp_enqueue_script('ya-share2', 'https://yastatic.net/share2/share.js' ); } вторая часть кода – это блок div с классом 'ya-share2' и выбранные вами соцсети. его, то вы и будете вставлять ...
... y'); ?<</small< давайте выведем саму статью - контент, внутри тега div: <div class="entry">   <?php the_content(); ?> </div> внимание! ничего не вывелось. ...
...     <link rel="stylesheet" href="style.css"> </head> <body>     <div class="cloud"></div> <!-- этот div представляет изображение облака --> ...
... разметку в html-документе, куда и будет выводиться данный массив. <div id="box_out"></div> код вывода вместе с циклом в js // получили элемент c id="box_out" ...
... идентификаторов. давайте сразу приведу код, и вы всё поймёте: <div id="top"></div> <!-- много контента --> <a href="#top">наверх</a> соответственно, ...
... нет. посмотрим на примере. function div($n) {   if(!$n) {    throw new exception("деление на ноль");   }   return 1/$n; } try {   div(3);   div(0); } catch($e) {   echo "ошибка: ...
... создадим меню, используя теги списков. для кастомного курсора создадим div с классом cursor. <ul>     <li><a href="#">home</a></li>     <li><a ...
... весь html код состоит из одного div с идентификатором toggle. разместим toggle в центре экрана и зададим ему цвет. <div id="toggle"></div> *{     margin: ...
... на сайте, в нужном месте в файле index.html вставляем div с id demo, где будет происходить анимация. <div id="demo"></div> css свойства вы задаете подходящие ...
... ссылок навигационного меню navlinks, а так же иконка гамбургер. <div class="mobile-wrap"> <div class="nav-wrap">   <a href="#home" class="active">логотип</a>   <nav ...
... данный атрибут можно использовать, чтобы стилизовать элементы. <div data-name="myname"></div> <style>   div[data-name=myname] {    width: 100px;    height: 100px; ...
...       display: inline-block;     }   </style> </head> <body>   <div id="canvas"></div>   <button onclick="savepixelart()">сохранить</button> ...
... mouseout. $(function () {   $("div").hover(onin, onout); }); // функция которая отработает при наведении курсора на элемент function onin() {   $("div").html("навести"); } ...
...         }     </style> </head> <body>     <div id="chat"></div>     <input type="text" id="message" placeholder="type a message..."> ...
... разметка состоит из элементов маркированного списка, внутри блока div. <div class="list">     <h2>list item hover effect</h2>     <ul> ...
... "></script>   <script src="tinytools.progressbar.min.js"></script> </head> <body>   <div id="progress"></div>   <script>    $(document).ready(function () {     $("#progress").progressbar({ ...
... области переключателя запустится функция togglemenu(). <div class="toggle" onclick="togglemenu();"></div> оформление и позиционирование переключателя ...
... появлялась красная рамка вокруг картинки. html-код очень простой: <div class="img"></div> теперь css-код: .img {   background: url("image_1.jpg") no-repeat; // подставляем ...
... приложение на react 1) создадим блок, в котором будет работать react <div id="content"></div> 2) укажем, что результат работы будет выводиться в ранее ...
...   <input type="text" id="b">   <button id="submit">отправить!</button>   <div id="block"></div> </body> </html> теперь напишем наш скрипт $(document).ready(function(){ ...
... href="style.css"> </head> <body>   <div class="profile">    <img src="images/profile.png" alt="эффект серого оттенка">   </div> </body> </html> css .profile img { ...
... необходимые отступы, оборачиваем меню навигации в div с классом container. вот и все, html разметка создана. <div class="container">   <nav class="link-up">     <a ...
... именем index.html. внутри блока head добавляем тег style. в блоке body добавим блок div с классом .ball. далее добавим стилей к блоку body. и сделаем наш мяч видимым, ...
... общий контейнер div. тег form должен присутствовать обязательно, если данные впоследствии будут отправляться на сервер. <body> <div class="box">   <form> ...
...   <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range"></div> давайте изменим стили в этой строке и посмотрим на результат. ...
... скачать с помощью bower или кнопок на сайте библиотеку. создайте div на странице <div id="fakeloader"></div> подключите стили <link rel="stylesheet" href="yourpath/fakeloader.css"> ...
... src="patternlock.js"></script> создайте блок div с id=patterncontainer и затем ниже проинициализируйте плагин, как показано на сайте <div id="patterncontainer"></div> <script> ...
... css3 очень легко! давайте разберемся, как. для начала создадим блок div в html <div class="spinner"></div> теперь перейдем к стилям @keyframes spin {   100% { ...
... рамки <table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0"> заменяем: <div> на <table> <margin> на <padding> <background> на <background-color> или <bgcolor> ...
... контейнером для фоновой картинки, а тег div с классом header_box – контейнером для двух заголовков. <header>   <div class="header_box">     <h1>the ...
...         img = browser.find_element(by.xpath,             '//*[@id="islrg"]/div[1]/div[' +                                    str(i) + ']/a[1]/div[1]/img') ...
... type="checkbox" ng-model="showmytext"> <div ng-show="showmytext">текст, который появится сразу после того, как пользователь активирует checkbox.</div> на чистом javascript у ...
... заголовок. <section>     <div class="content">         <h2>curved header</h2>     </div> </section> css код на данный ...
... "встраивание карт" копируете html-код и вставляете его на страницу <div class="contact map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14008.114827184252!2d77.  20653218124517!3d28.6289017187057!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd37b741d057%3a0xcdee88e47393c3f1!2sconnaught%20place%2c%20new%20delhi%2c%20delhi%20110001!5e0!3m2!1sen!2sin!4v1632509812844!5m2!1sen!2sin" ...
... необходимые скрипты и стили, подключите их. сделайте разметку <div class="ct-chart ct-perfect-fourth"></div> создайте объект с настройками, проведите линию с этими ...
... перейдём к файлу index.html <!-- остальной код --> <div class="dropzone" id="dropzone">перетащите файлы сюда</div> <script>   (function() {    var dropzone = document.getelementbyid("dropzone"); ...
... </head> 2) создайте контейнер для диаграммы: <body> <div id="container" style="width: 500px; height: 400px;"></div> </body> 3) создайте диаграмму. поместите тег <script> ...
... которых будет выводиться текущая дата (число, день недели, месяц и год). <div class="calendar">     <p id="monthname"></p>     <p id="dayname"></p> ...
... умножение / - деление рассмотрим конкретный пример <div class="alert">this is an alert! be accurate!</div> теперь добавим немного стилей .alert {   width: 100%;   ...
... <html> <section class="map">     <div class="container">         код карты     </div> </section> // css .map {     padding: ...
...         }     </style> </head> <body>     <div class="spinner">         <span class="spinner__animation"></span> ...
... классом element черную сплошную рамку толщиной 5 пикселей. // html <div class="element"></div> // css .element {     width: 150px;     height: 150px;     background-color: ...
... добавьте data-scroll атрибут в html-элемент, который вы хотите анимировать. <div data-scroll></div> когда вы прокручиваете страницу и элемент становится видимым ...
... html-структуру и загрузите картинки: <body>   ...   <div id="interactive_3d">    <img src="images/frame_1.png">   </div>   ... </body> теперь вызовите функцию ...
... разметке, а можно отобразить его с помощью псевдоэлемента before. <div class="google_logo"></div> рисуем синий блок весь блок строится на бордерах (border). ...
...     <title>онлайн магазин</title> </head> <body>     <div id="app"></div>     <script src="./main.js"></script> </body> </html> ...
... странице простой блок для взаимодействия. // html код <div class="box">     touch me! </div> // css код .box {     width: 200px;     height: ...
... модуля. angular.module('myapp', ['swipeli']); директива создайте директиву <div   swipe-li   class="item"   disabled=""   intent="true"   accept="done(item)"   reject="skip(item)" ...
... after). сделаем у блока правый верхний угол скошенным. // html разметка <div class="block">     <img class="icon" src="image.png" alt="">     <h2>иван ...
... порядке должны отображаться дочерние блоки на странице. вот его синтаксис: #div {   box-ordinal-group: 3; } те блоки, у которых число меньше, будут отображаться ...
... формой, которое будет появляться при клике по этой кнопке. <div class="wrapper">...</div> ограничим ширину контейнера и расположим его содержимое ...
... выводим все дочерние элементы     }     echo "</li>";   } ?> <div id="menu">   <h2>меню</h2>   <ul>     <?php       ...
... <title>вдавленный текст</title> </head> <body>   <div class="wrapper">    <p>вдавленный текст</p>   </div> </body> </html> но и css код не сложнее ...
... смотрите ниже пример использованя миксина без каких-либо аргументов. div::after {   @include pseudo;   top: -1rem; left: -1rem;   width: 1rem; height: 1rem; } отзывчивое ...
... <body>     <!-- главный контейнер -->     <div class="container">         <!-- заголовок -->         <header class="dashboard-header"> ...
... <title>сокращатель url</title>   <link rel="stylesheet" href="css/style.css"> </head> <body>   <div class="container">    <h1 class="title">сокращатель url</h1> <?php   if(isset($_session['feedback'])) ...
... нужен для стилизации кнопок по цвету. <header class="header">     <div class="filter">         <button class="button button_all">all</button> ...
... <head>   <meta charset="utf-8">   <title>navigation</title> </head> <body>   <div class="pagination">    <ul>     <li><a href="#">1</a></li>     ...
...       }     </style>   </head>   <body>     <div class="container">       <p>название сайта: {{my_string}}</p> ...
... javascript код должны выглядеть так: <div class="selector">   <!-- какое-то содержание(блоки, картинки, фреймы...) --> </div> $('.selector').devicemock({   type ...
... разработчики языка php придумали функцию intdiv(). давайте рассмотрим, как теперь это будет выглядеть: intdiv(10, 3) = 3 вот и все! казалось бы, мелочь, а ...
... <title>border-radius</title>   <meta charset="utf-8"> </head> <body>   <div class="block"></div> </body> </html> теперь зададим базовые стили для нашего ...
...   <title>multibackgrounds</title>   <meta charset="utf-8"> <body>   <div class="block"></div> </body> </html> и простые стили, чтобы увидеть наш блок, в ...
... document.getelementsbytagname('body')[0];          var elem = document.createelement('div');          elem.classname = 'comments';          ...
...   <title>multi-columns in css3</title>   <meta charset="utf-8"> </head> <body>   <div class="block">   <h2>заголовок h2</h2>   <p>lorem ipsum dolor sit amet, consectetur ...
...   <input type="text" id="trtext" value="" />      <div id="result"></div>      <script>          let el = document.queryselector("#trtext"); ...
... <title>animation</title>   <meta charset="utf-8"> </head> <body>   <div class="block"></div> </body> </html> теперь напишем стили @keyframes spin {   0% {    ...
...   <meta charset="utf-8">   <title>test</title> </head> <body>   <div class="box"></div> </body> </html> теперь добавим стилей. .box {   width: 100px;   ...
...     <title>webpack</title> </head> <body>     <div id="app"></div> </body> </html> далее нам нужно установить сам webpack ...
...    содержание    <a href="#" class="nav-toggle"></a>   </nav>   <div class="wrapper">    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. quod autem beatae, sit ...
... элемента мы можем использовать псевдо-класс :checked и смежный селектор(div + div), чтобы изменить свойство display для ul с none на block. шаг за шагом: прежде ...
... технологию flexbox. // html код <div class="container">     <h1 class="title">         gradient     </h1> </div> // css код .container { ...
... <meta charset="utf-8">   <title>box-shadow</title> </head> <body>   <div class="block"></div> </body> </html> и зададим какие-нибудь первоначальные стили ...
...         <h1>posts</h1>     </header>     <div class="container">         {% block content %}         # здесь окажется код с дочерних файлов ...
... приложение работает как надо. пример создания галереи //html <div class="gallery">     <a href="#"><img src="https://via.placeholder.com/200x150" alt=""></a> ...
... дальнейшем поместим фоновую картинку и секцию с длинным текстом. <div id="header"></div> <section>     <h2>background size change into small when scrolling</h2> ...
... прохождении валидации - зеленым. <form id="form" action="#">     <div class="inputbox">         <input type="text" id="email" placeholder="enter email ...
... файл или внизу html страницы. далее, создайте структуру следующего вида: <div id="myturntable" class="turntable">   <ul>    <li data-img-src="images/mypic1.jpg"></li> ...
... <title>сокращатель url</title>   <link rel="stylesheet" href="css/style.css"> </head> <body>   <div class="container">    <h1 class="title">сокращатель url</h1>    <form action="shorten.php" ...
... главное, его всегда соблюдать. дальше пишем скрипт вывода новостей на php: <div id="news"> <?php   $news = file_get_contents("news.txt");   $news = explode("\n", $news);   for ($i ...
... rel="stylesheet" href="style.css"> </head> <body>   <div class="booth">    <video id="video" width="400" height="300" autoplay></video>   </div>   <script src="video.js"></script> </body> ...
... pictures from your webcam</title>   <link rel="stylesheet" href="style.css"> </head> <body>   <div class="booth">    <video id="video" width="400" height="300" autoplay></video>    <a ...
... портрет человека и текстура. <div class="portrait">     <img src="women.jpg">     <img src="texture.jpg" class="texture"> </div> css код поместим ...
... легко можно допустить ошибку и даже ее не заметить. // html <div class="box-icon ">..</div> <h1>документация</h1> // css .box-icon {     padding: ...
... возникнуть не должно. теперь приступим к html-коду: <div id="like" data-id="<?=$id?>"><?=$likes?></div> здесь мы просто выводим данные на страницу. самому ...
... десктопная версия: мобильная версия: html разметка: <div class="container">     <header>шапка</header>     <article> ...
... которых можно создавать эффект многослойности. <section>     <div class="circle">         <i></i>         <i></i> ...
... href="css/jquery.classycountdown.min.css" /> создайте блок там, где вы хотите вывести счетчик. <div class="countdown"></div> и запустите плагин $('.countdown').classycountdown({   theme: "flat-colors", ...
... следующий компонент: function navbar() {   return (     <div>       <link to="/">главная</link>       <link to="/about">о нас</link> ...
... animation-delay: calc(var(--i) * -0.5s) вместо переменной i, подставятся её значения. <div class="vapour">     <span style="--i:1;"></span>     <span style="--i:7;"></span> ...
...             # и получаем нужный div блок с контентом             info = soup.find('div', {'class': 'block_cont'}) ...
... нужные свойства. <div class="toggle">     <span></span>     <span></span>     <span></span> </div> *{     margin: ...
... идентификатором. // html <div id="hidden-window">     <h2>привет!</h2>     <p>я модальное окно.</p> </div> // css #hidden-window { display: ...
...     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-glhltq8irabdzll6o3ovmwsktqop6b7in1zl3/jr59b6eggoi1afkw7cmda6j6gd" crossorigin="anonymous"> <div class="px-5 mx-5">     <h1>my table</h1>     <table class="table table-striped table-bordered"> ...
... foto.src;   } </script> код html (вставлять между тегами <body> и </body>):<div>   <p style = 'text-align: center;'>     <img id = 'bigimg' src = 'gallery1.jpg' height = ...
... interval   ); </script> код html (вставлять между тегами <body> и </body>):<div>   <img src='slide_1.jpg' id="image_1" style="position: absolute;" />   <img src='slide_2.jpg' id="image_2" ...
... src="image.svg" alt=""> 3) вставить через css-свойство background-image <div class="bg-image"></div> .bg-image {     width: 50px;     height: 50px;     background-image: ...
... где используется шаблонизатор {username} (пусть файл называется user_panel.tpl): <div>   <p>здравствуйте, <b>{username}</b>!</p>   <p><a href = 'editprofile.php'>редактировать ...
... свойства. <div class="container">     <svg class="tag-icon">         <use xlink:href="#tag"></use>     </svg> </div> например ...
...     <button onclick="generateimage()">создать изображение</button>     <br>     <div id="imagecontainer"></div>     <script>         function generateimage() { ...
... применяемых для создания различных эффектов и стилизуем его. <div id="test"></div> #test {     background:#bdfa02;     height:100px;     width:200px; ...
...     } } добавляем где-то в начале статьи следующий код: <div class = "estimated-time">     <?php $post_content = "..."; // содержимое статьи ?> ...
... <div class="blur-block">     <h1>лимон</h1> <span>полезен в любой сезон года. это гибрид цитруса и горького апельсина.</span> </div> ...
...   <link rel="stylesheet" href="style.css">     </head> <body> <div class="container">     <h1 class="neontext">           welcome to! ...
...         }     </style> </head> <body>     <div class="container">         <h1>список дел</h1> ...
...     <td>1</td>     <td>2</td>   </tr> </table> <div id="tb_overlay"></div> здесь я добавил одну таблицу, в качестве тестового контента, ...
... стилями, заменяя exam_01 на соответствующие классы (exam_02, exam_03, exam_04, exam_05). <div class="exam_01"> красивое оформление важных блоков с текстом привлекает ...
... код html (вставлять между тегами <body> и </body>): <div>  <img src = 'images/javascript/foto4.jpg' alt = 'фотография' width = '200' onclick = 'openimagewindow(this.src);' /> </div>
... без заливки и с позиционированием от верхнего левого угла браузера. <div class="button">     hover me     <svg width="150" height="75" viewbox="0 0 150 ...
... иконку. <body> <div class="wrap">     <input type="text" class="input" placeholder="поиск">     <i class="fas fa-search" aria-hidden="true"></i> </div> </body> ...
... поставили в html файл, после закрывающего тега nav. <div>     <a href="#" class="menu-trigger">меню</a> </div> задали ей стили и сразу спрятали. .menu-trigger ...
...       }     </style>   </head>   <body>     <div class="box">     </div>   </body> </html>
... кода (кнопка + ссылка) в html разметке. <div class="container">     <a href="#" class="button">button</a> </div> по умолчанию кнопка прижата к левому ...
... button и родительского контейнера. <div class="container">     <button type="button">отправить</button> </div> предвосхищая вопрос новичков ...
... полоски, стилизовав теги span. <div class="gamburger">   <span></span>   <span></span>   <span></span> </div> идея в том, что убрав среднюю ...
...   <link rel="stylesheet" href="style.css">      </head> <body> <div class="container">     <h1 class="neontext">           welcom! ...
... разными классами и поместим их в родительский контейнер links. // html <div class="links">     <p class="left">         <a href="#">подчеркивание ...
... расширяя возможности вашего чата. теперь необходимо вывести html-код: <div id="chat">   <table>     <tr>       <td>имя</td> ...
... непосредственный элемент img, содержащийся внутри его родительского div , я могу написать  queryselector ("div + img"). а как насчет getelementbyid, getelementsbytagname, getelementsbyclassname? ...
...         }       }     };   } </script> <div>   <input type="text" name="a" id="a" />   <br />   <input type="text" name="b" id="b" /> ...
...     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body>     <div class="container mt-3" style="width: 450px;">         <h2 class="text-center">covid latest report-uk</h2> ...
...     </style> </head> <body> <div class="pagination">     <!-- ссылки на страницы --> </div> <script>     // javascript для обработки кликов по ссылкам пагинации ...
...     settimeout("doimagewave(\"" + count + "\", " + (n + 1) + ")", 80);   } </script> код html (вставлять между тегами <body onload="doimagewave(8, 1)"> и </body>):<div id="imagewave"></div>
... создадим на html странице область для анимированного фона. <div id="particles" class="particles"></div> 4) стилизуем данный блок по классу particles, задав ему ...
...     <link rel="stylesheet" href="styles.css"> </head> <body>     <div class="content">         <!-- длинный контент страницы --> ...
... занимались вёрсткой html-документа, то неоднократно использовали тег <div>, причём этот тег вам приходилось ставить везде: в начале и в конце ...
...     #map { height: 100vh; }   </style> </head> <body>   <div id="map"></div>   <script>     // инициализация карты ...
...     <!-- контейнер для карты -->     <div id="map"></div>     <!-- подключаем скрипт leaflet --> ...
... прописываете wow и название анимации. было так: <div id="item" class="animated pulse"> а стало так: <div id="item" class="wow pulse"> теперь анимация запускается ...
... wow, к любому блочному элементу на сайте. <div class="wow bounceinup">здесь ваш текст, картинка, видео..</div> после всех выполненных шагов, анимация ...
...     <h1>отображение маршрута на карте</h1>     <div id="map"></div>     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> ...
...   <h1>карта с пользовательскими метками</h1>   <div id="map"></div>   <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> ...
...     <input type="button" value="показать карту" onclick="showmap()">     <div id="ymapsid" style="width:600px;height:400px; margin-top: 20px;"></div> </body> </html> как это работает? ...
... условия, которые должны выполняться. пример использования в функции def divide(a, b):     assert b != 0, 'делитель не может быть равен нулю' ...
... которые должны выполняться. пример использования в функции <?php function divide($a, $b) {     assert($b != 0, 'делитель не может быть равен нулю'); ...
... высоты блоков. к примеру, у нас есть блок с шириной и высотой 70px. <div class="block"></div> .block {   width: 70px;   height: 70px; } теперь давайте добавим к ...
... создадим блок, на примере которого будем рассматривать примеры. <div class="container"></div> css .container {   width: 400px;   height: 300px;   float: left;   margin: 40px; ...
... $loop->have_posts() ) : $loop->the_post();   the_title();   echo '<div class="entry-content">';   the_content();   echo '</div>'; endwhile; ?> аналогичный действия надо ...
... у инпутов текстовым, для возможности ввода, как чисел, так и строк. <div class="form-group"> <h3>умножение чисел</h3> <label for="inp_1">введите число ...
...     def multiply(self, a, b):         return a * b     def divide(self, a, b):         if b != 0:             return a / b ...
...   <a href="#">услуги</a>   <a href="#">контакты</a>   <div class="search-box">   <form action="#">     <input type="text" placeholder="поиск.." ...
...     return a - b def multiply(a, b):     return a * b def divide(a, b):     if b != 0:         return a / b ...
... ниже (для демонстрационных целей я выбрал произвольную дату): <div id="app"></div> var app = document.queryselector('#app'); // получение текущей даты ...
...     <title>document</title> </head> <body>     <div id="box"></div>     <script src="index.js"></script> </body> </html> ...
... тега img. <div>     <img src="img/<?php if (!empty($utm_term)) {     echo $utm_term;     } else { echo 'kettle'; }?>.jpg" alt=""> </div> в случае ...
... отдельный слайд с картинкой. этот список мы поместили в контейнер bx-slider. <div class="bx-wrap"> <ul class="bx-slider">   <li><img src="images/stil_01.jpg" title="скандинавский ...
...         return lambda x, y: x * y     elif operator == 'divide':         return lambda x, y: x / y     else: ...
... прилипать к логотипу. <header>   <div class="wrap-logo">   <a href="#logo" class="logo">логотип сайта</a>   </div>   <nav>     <a ...
... firstday.getdate();  if (testme == 2)    firstday.setdate(0);  startday = firstday.getday();  document.writeln("<div align = 'center'>");  document.write("<table border = '1'>");  document.write("<tr><th colspan='7'>");  ...
...     <title>перемещение по dom-дереву</title> </head> <body>     <div id="container">         <h1>пример html-документа</h1> ...
...         }     </style> </head> <body>     <div class="container">         <header>             <h1>генератор резюме</h1> ...
...     settimeout("dowave(\"" + text + "\", " + (n + 1) + ")", 50);   } </script> код html (вставлять между тегами <body onload="dowave('myrusakov.ru', 1)"> и </body>): <div id="wave"></div>
...     }        </style>    </head> <body>   <div class="content">     это просто текст, который меняет свой стиль при выделении. посмотрите как этот пример ...
...         }     </style> </head> <body>     <div id="slider-container">         <button id="previous">предыдущее</button> ...
...     <title>js ajax file upload</title> </head> <body>     <div id="example">         <form enctype="multipart/form-data" action="http://localhost:8080/upload" method="post"> ...
... яндекс.карт. для начала напишем соответствующий html-код: <div id="map" style="width: 400px; height: 300px"></div> комментировать тут особо нечего, всё очень просто: ...
... обоим присваиваем классы для получения этих элементов через javascript. <div class="inputs">     <input type="password" class="password">     <label> ...
... начинается автоматически. <div style="width: 1000px; height: 500px;"   data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%"> </div> также, вы можете сделать ...
... этом параграфе цвет, толщину и шрифт у текста. //html разметка <div class="container">     <h1 id="header">мудрая цитата</h1>     <p ...
... оберткой.      <header>   <div class="wrap-logo">     <img src="logo.jpg" alt="">   </div>   <nav>     <ul>         <li><a ...
... сложности у нас будет 4 ряда, в последнем из которых - кнопка (button). <div class="form__wrapper"> <form>   <ul>   <li class="form__line">     <label ...
... method="get">   <div>     поиск: <input type="text" name="query" />     <br />     <input type="image" src="images/button.png" alt="" />   </div> </form> ...
... заголовка отвечают css стили. //html код <div class="container">     <h1 id="heading">польза ананасов</h1> </div> //css код .container {     width: ...
... всегда на связи</span> <a href="tel:+74993228580" class="nav-callback__phone">+7 499 322-85-80</a> <div class="nav-callback-social">     <a href="#" class="nav-callback-social__link"><span class="nav-callback__android"></span></a> ...
... <body>   <h1>загрузка файлов</h1>   <form>     <div id="queue"></div>     <input id="file_upload" name="file_upload" type="file" multiple="true">   </form> ...
... rel="stylesheet" href="style.css"> </head> <body>   <div class="box dog-ear">здесь какой-то длинный текст в нашем блоке...</div> </body> </html> html структура написана. ...
... одну картинку на другую и ссылку, используя знания о dom и javascript? <div class="container">     <h1 id="heading">польза фруктов</h1>     <p ...
... примера создадим фигуру и заставим её двигаться вниз и вправо. <div class="square"></div> // html // css .square {     width: 200px;     height: 200px; ...
... безопаснее работать с уникальными классами, чем с тегами. // html код <div class="container">     <h1 id="heading">комплексы для дома</h1>     <p ...
... document.getelementbyid("key").innerhtml = id;   } </script> и html-код: <body onkeyup="hotkey(event)">   <div id="key"></div> </body> результатом данного скрипта и html-кода будет изменение ...
... классом, вводите только название класса и точку .box.     <div class="box"></div> если нужен какой-то другой тег с классом, то соответственно ...
... скачаны с сайта flaticon. первая радиокнопка помечена, как checked (выбрана). <div class="rating">     <input type="radio" name="star" id="star1" checked="">     <label ...
... разметке и в js коде. добавляем класс multiple-items ко flex-контейнеру. <div class="wedding multiple-items"></div> копируем js код с базовыми настройками, который идет ...
... (дословно: получить элемент по идентификатору). // html код <div class="container">     <h1 id="heading">урок по javascript #1</h1>     <p ...
... ссылки с текстом read more. <div class="container">     <a href="#">read more</a>     <a href="#">read more</a> </div> для наглядности, временно ...
... качестве анимационного эффекта при наведении на кнопку. <div class="button">hover effect</div> .button {     color: #fff;     background-color: ...
... video с элементами управления controls) <section class="smart_tv">     <div class="player">         <img src="smart-tv.png" alt="">         <video ...
... потом их прятать? без них никак не обойтись, но об этом чуть позже. <div class="container">     <p>you have a dog?</p>     <label>         <input ...
... создадим контейнер mobile-nav для пунктов меню с ссылками на разделы сайта. <div id="mobile-nav" class="mobile-nav">     <ul class="mobile-nav__list">         <li ...
...     <img src="img/airline.png" alt="airline" class="airline">     <div class="bg"></div> </section> css стили по умолчанию для всех элементов родителем ...
... кнопке. <button class="btn" type="button">     показать элемент </button> <div class="content hidden"> товарищи! постоянное информационно-пропагандистское ...
... href="/assets/styles.css">   </head>   <body>    <h1>список дел</h1>    <div id="todo-table">     <form>      <input type="text" name="item" placeholder="добавьте ...
... плагина на странице: <div>   <img class="zoom" src="images/image_1.jpg" alt="" style="width: 300px;" />   <img class="zoom" src="images/image_2.jpg" alt="" style="width: 300px;" /> </div> <script type="text/javascript"> ...
... контейнер imgbx две фотографии. <div class="imgbx">     <img src="img1.png">     <img src="img2.png"> </div> девушка на фоне поставим ...
... встречаемый. создадим html-форму: <form name="name" action="index.php" method="post">   <div>     <input type="text" name="user[name]" />     <br />     <input ...
... --> <h1 class="animated fadeindown">how it works</h1> <!--блок #item --> <div id="item" class="animated pulse">...</div> <!--кнопка --> <button class="animated fadeinup">learn more</button> ...
...     <link rel="stylesheet" type="text/css" href="./style">   </head>   <body>     <div style="text-align: center; top: 50%; left: 50%; position: absolute; transform: translate(-50%, - 50%);"> ...
... и маленький <section class="form-section">     <div class="form"> // форма     </div> </section> на макете фон секции затемнён, применим ...
... выводится через css с помощью свойства background: <div style="background: url('image.jpg') no-repeat; width: 100px; height: 100px;"></div> данный способ спасёт уже от всех, кто не знаком ...
... полей input и тега select. вот что должно получиться в итоге: html код <div class="box">     <h2>input search form</h2>     <form>         <input ...
... метки с полем типа checkbox, наименования пункта списка и пустой тег span. <div class="list">   <h2>to do list</h2>   <ul>     <li>       <label> ...
... indicator</title>   <script src="spin.min.js"></script> </head> <body>   <div id="loading"></div>   <script>    var opts = {     lines: 13, // число линий для ...
... рабочем коде никаких рамок не будет. // html <div class="loader">     <span>loading</span> </div> // css @import url("https://fonts.googleapis.com/css?family=poppins:100,200,300,400,500,600,700,800,900"); ...
...     <h2>summer<br><span>sales</span></h2>     <div class="summer"></div> </section> //css * {     margin: 0;     padding: ...
... разметки: <div>     <a class="button_anime" href="#">заказать работу       <img src="settings.png" alt="">     </a> </div> в css ...
... нажать на "получить код". после этого вы получите примерно следующее: <div align="center" style="max-height:250px; overflow:auto;">   <a href="http://radiopotok.ru/" id="rp_link">онлайн ...
...     <meta http-equiv="x-ua-compatible" content="ie=edge">     <title>js router</title> </head> <body>     <div id="links">         <a href="/">gallery</a>         <a href="/article/234019/kiazim">article #234019</a> ...
... как мы это делали в css, но вместо значений подставляем переменные. less div {     padding: 0;     font-family: roboto, sans-serif;     color: ...
... записаны инструкции для браузера, что конкретно нужно делать. <div class="container">     <h3>счетчик символов</h3>     <textarea ...
... скрипты 2. вставляем в html файл между тегами div и ul строчку кода <input id="menucss" type="checkbox"> 3. заменяем тег div c классом .menuburger на label <label class="menuburger" ...
... код в виджете:  <div id="customform" style="display:none;"> /* скрыть форму */  [contact-form-7 id="823" title="обратная связь"] /* шорткод */  </div> где даем id произвольное ...
... разметка для управления таблицей, мы обернули её в блок с классом container. <div class="container">   <table>     <thead>     <tr> ...
... <div>     <label>         email:         <input type="email" name="email" value="email">     </label> </div> ...
... линию с нулевой шириной и стилизуем ее. <nav>     <div id="marker"></div>     ... </nav> nav #marker {     position: absolute;     left: ...
... < 1) $start = 1;     } ?>   <!-- дальше идёт вывод pagination -->   <div id="pagination">     <span>страницы: </span>     <?php if ($active ...
... будет применяться к тегу <i>. дочерний селектор div > span {..} тег span является ребенком, а div – родителем. значение стиля всегда применяется ...
... теней. html код каждый тег span - это отдельная клавиша у клавиатуры. <div>     <span><i>c</i></span>     <span><i>s</i></span> ...
... происходит вычисление математического действия и вывод результата. <div class="container">   <form class="calculator"name="calc">     <input class="value" ...
... давайте разберём простой пример использования функции $() в jquery: <div id="block">блок</div> <script type="text/javascript">   $("#block").hide();   //аналог: jquery("#block").hide(); ...
...     cleartimeout(this.timerhandle); }; используется так: // div блок let el = element.classlist.contains("div"); // внутрений текст "00:00:00" или "00:00" ...
... <option value="3">элемент 3</option>     </select>   </noscript>   <div class="select">     <p data-value="1" onclick="select(this)" class="active">элемент 1</p> ...
... применяется к id, который указан в адресной строке браузера. <div id="h1">заголовок раздела</div> h1:target {     color: red;     font-weight: 500; ...
... 10px 15px rgba (235, 230, 230, 0.5); пример тени для блока // html разметка <div class="block"></div> // css код .block {     width: 250px;     height: 150px; ...
... href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> ... </head> <div class="navigation">   <ul>     <li>       <a ...
... создание html-разметки сделать кнопку можно разными способами: через тег button, div или a. я предпочитаю сделать это сразу через ссылку a, поскольку кнопка ...
... тегов.    [ 'a', 'b', 'br', 'code', 'div', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6','i', 'img', 'li', 'ul', 'ol', 'mark', 'p', 'pre', ...
... данная возможность бывает полезна. если у вас, к примеру, в html есть блоки div с каким-то содержимым, то вы можете свернуть те, которые вам мешают. для ...
... соответствующих арифметических операций сложение - add вычитание - sub деление - div умножение - mult очистить - clear точка - dot равно - equal при таком ...
...   // создание информационного окна   const infobox = document.createelement('div');   infobox.textcontent = `наведен элемент с тегом: ${tagname}`; ...
... не имеют детей. $("p:empty"); :parent – выберет элементы, имеющие детей. $("div").filter(":parent"); :has – выбирает все заголовки с курсивным начертанием. ...
... solid;   border-width: 10px 5px 0 5px;   height: 0;   width: 0; } далее к обычному блоку div можно применить класс triangle, в результате данный блок станет стрелкой ...
... добавим ещё css стилей для красоты body {     font-family: tahoma; } div {     background: #f2eaea;     margin: 0 auto;     max-width: ...
... столкнуться. в мою задачу входило сделать всплывающее окно с помощью блока div, и оно должно быть, разумеется, поверх всего контента. я поставил нужный ...
... только тегом body, а широко применяется в оформлении сайта, например для: div, li, p, table, header, footer. рассмотрим пример: <!doctype html> <html> <head> <style> ...
... оборачиваем тегом blockquote, вместо него можно использовать теги <p> или </div>. <blockquote>     .. </blockquote> при стилизации тега blockquote, ...
... post запросы а вот так можно отправить post запрос: post('https://appdividend.com/api/v1/users', {user: 'krunal'})   .then(data => console.log(data))      // обрабатываем результат вызова response.json() ...
... reset, все они примерно одинаковые. можете использовать вот такой: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, ...
...    const tagname = prompt('введите тег для удаления всплывающих окон:', 'div');    if (tagname) {      removepopupbytag(tagname);    } else { ...
... progress = tqdm(response.iter_content(buffer_size), f"загрузка {filename}", total=file_size, unit="b", unit_scale=true, unit_divisor=1024) with open(filename, "wb") as f:     for data in progress.iterable: ...
... атрибуты основного шрифта заранее в тег body (предок). то есть, все теги (p, div), что находятся внутри body, являются его потомками, они так же унаследуют ...
... свойства и числа: column-count: 3; просто задаем любому блочному элементу (p, div) с текстом - класс с заданным числом колонок. в результате текст автоматически ...
...     height, width, layers = frame.shape     video = cv2.videowriter(video_name, cv2.videowriter_fourcc(*'divx'), fps, (width, height))     for image in images:         img_path = os.path.join(image_folder, image) ...
...   <a href="#"><i class="fas fa-fw fa-map-marker"></i> контакты</a> </nav></div> </body> что означают эти классы? <i class="fas fa-fw fa-home"></i> ...
... document в $(document).height(), мы можем использовать такие элементы как section, article или div, которые содержат контент**,** для вычисления более точной позиции индикатора ...
... горизонтального индикатора чтения. но вместо использования традиционных элементов div/span и сложной, запутанной математики работы индикатора, мы будем использовать ...
... использую дефолтную тему twenty seventeen. вставьте код перед закрывающим тегом div с классом entry-content. визуально, на сайте, вы увидите такие же списки, ...
...   ); } всё, что нам теперь осталось, это добавить svg в документ и блок div c id равным тому, что записан в нашем файле myimage.js в конструкторе raphael первым ...
... soup = beautifulsoup(response.text, 'html.parser') # извлечение нужной информации temperature = soup.find('div', class_='temperature').text print(f'temperature: {temperature}') с помощью этого ...
... происходить в файле стилей. одна ссылка и два span, решили обойтись даже без div-а. сначала стилизуем гиперссылку, из которой и будет состоять наша кнопка. ...
много реалистичные пузырьков разных размеров, с разной скоростью поднимаются вверх, лопаясь на ходу. как такое возможно сделать на javascript? перед ...
здравствуйте! в цикле статей по созданию космической аркады, с python и pygame, мы достигли того что на игровом поле отображается космический корабль ...
весь эффект с фокусом строится на манипуляциях с фильтром blur. когда пользователь открывает страницу, то видит размытый фон и четкий заголовок. ...
в сегодняшней статье мы рассмотрим как выбрать данные из несвязанных таблиц с sql и оператором join. для чего это нужно. прежде всего, скажем, что ...
4) позиционирование инпута и текста .list ul label{     position: relative; / * относительное позиционирование * /     display: flex; / * отображать ...
здравствуйте. сегодня мы создадим простой проект синтезатора на windowsforms и c#. прежде всего нам понадобятся звуки нот в формате wav. перейдите ...
язык python имеет множество графических библиотек. одной из них является tkinter. и в сегодняшней статье мы рассмотрим как создать раскрывающийся ...
мы продолжаем создание игры про "космические приключения" с python и pygame. очень важной частью этой игры является возможность уничтожения вашего ...
в сегодняшней статье мы попробуем создать боковое меню с изменяющимися данными, при помощи c# и фреймворка windowsforms. для данного примера нам понадобится ...
здравствуйте. сегодня мы создадим простое оконное приложение, для замены строк в файле, с помощью c#, winforms и модуля regex. для проекта понадобится ...
в сегодняшней статье мы рассмотрим создание скрипта для сворачивания всех окон на экране вашего компьютера. нам понадобится python и библиотека ...
продолжаем предыдущую статью, в которой рассказывалось как загрузить файл на сервер в expressjs. в данной статье мы рассмотрим как загрузить сразу ...
доброго времени суток! сегодня мы рассмотрим с вами как можно создать простейший веб-сервер в c#. для создания данного сервера мы будем использовать ...
здравствуйте. как известно, разработка web приложений это динамичный процесс, который требует постоянных доработок. в результате добавления ...
регистрация доменовдомен ru - 99 рубдомен com - 350 рубзарегистрируй себе домен!имя: зона: rusucomnetorginfobiznamemobitv2domains.ruесли вы читаете эти строки, значит, ...
в сегодняшней статье мы рассмотрим способ получения списка статей, из определенной категории нашего сайта. вот что нас интересует: данный ...
технология распознавания символов с изображения в редактируемый текст достаточно непростая задача. для подобных целей используется технология ...
опция сохранения на компьютере распространена повсюду. бывает что создавая приложение необходимо, чтобы оно обладало данной функцией. создание ...
в спокойном состоянии кнопка выглядит обычно, в стиле плоского дизайна. однако при наведении на нее мыши, происходит переворачивание с 3d-эффектом. ...
на всей странице будет происходить плавное движение вверх разноцветных квадратиков разного размера. подготовка фона для анимации создадим ...
пользователь водит мышкой по экрану и автоматически стирается верхний слой. под верхним слоем находится фоновая картинка. немного движений ...
рассмотрим на примере анимации текста, как можно использовать css функцию attr. создание, позиционирование и стилизация текста data-text представляет ...
до сих пор мы создавали только консольные приложения. но программисты на c# широко используют формы для создания пользовательских интерфейсов. ...
django - это python веб-фреймворк для бекенда, который позволяет быстро создавать безопасные сайты и приложения. фреймворк имеет набор готовых компонентов, ...
управление таймером играет важную роль в разработке программ как на стороне клиента, так и на стороне сервера, а также в службах windows. с помощью ...
больше не нужно ломать голову и писать много строчек кода для визуализации капель дождя, падающих на окно. замечательный скрипт на js rainyday.js представляет ...
для создания текста по кругу, необходимо разбить текст на символы и применить к каждому символу свойство transform. создание и стилизация текста ...
для создания анимации падающих звезд нам потребуется картинка зведного неба и сами звезды, созданные средствами html и css. html-разметка и звездное ...
чтобы пользователю было веселее переходить по ссылкам, веб-разработчики придумывают креативные hover-эффекты. зачастую хватает одного css, без ...
модуль numpy и python позволяют создавать массивы произвольной длины и заполнять их некоторыми значениями. так как изображение можно представить ...
пропишем внутри ссылок data*-атрибуты с названиями ссылок. это нужно для передачи этих названий в функцию attr для получения hover-эффекта. <ul> ...
в сегодняшней статье мы создадим простой калькулятор способный выполнять сложение, вычитание, умножение, а также деление. и все это мы реализуем ...
организация файлов на компьютере может быть утомительной задачей, особенно когда это делается вручную. некоторые папки (например, папка "загрузки") ...
как легко и оригинально оживить текст, не создавая никакой анимации? об этом вы узнаете на этом уроке. эффект красиво смотрится только на крупном ...
продолжим создание индикатора для меню навигации. здесь находится первая часть урока. стилизация и hover-эффект меню при наведении мыши, иконка ...
состояние у переключателя включено|выключено, можно усилить с помощью css кастомизации и смайлика. создание нативного чекбокса сначала создадим ...
для создания эффекта многослойного текста, нам потребуется атрибут data-text, два псевдоэлемента, прозрачный цвет и свойство text-stroke. html разметка ...
выводить текст на консоли в разных цветах довольно удобно и практично, от создания причудливых сценариев сканирования до выделения различных ...
все начинающие изучать css-свойства, уже наверняка слышали про свойство float, с помощью которого текст обтекает картинку справа или слева от нее. ...
изображение есть набор данных, закодированных в числовой последовательности. извлекая числа, затем можно проводить с ними различные операции. ...
думаю, что многие из вас видели в интернете изображения, заполненные текстом. заполнить текстом можно любую фигуру. на этом уроке мы покроем ...
наше popup окно необходимо снабдить крестиком, кликнув по которому, пользователь избавится от надоедливой рекламы. .close{     position: ...
написание кода вручную, конечно же необходимое умение для программиста. то справедливо для начального этапа изучения языка, чтобы набить руку. ...
приблизительно год назад вышла новая версия языка программирования php8. его можно смело назвать - языком номер один в веб-программировании на ...
как известно, людям всегда больше нравится интерпретировать картинки, чем текст. это подтверждается биологическим фактом, что 90% фактов, поступающих ...
мне нравиться использовать шрифтовые иконки из библиотеки fontawesome, потому что их легко кастомизировать под любую цветовую гамму сайта. html разметка ...
круговая диаграмма позволяет наглядно продемонстрировать доли разных значений в конкретном примере. имея форму пирога, она как нельзя лучше ...
на этом уроке мы научимся к меню wordpress добавлять шрифтовые иконки. согласитесь со мной, что иконки не только украшают сайт, но и делают его более ...
как вы поняли из прошлой статьи про диапазоны дат, что в нативном javascript неудобно работать с форматами дат. поэтому и была разработана библиотека ...
с введением css-преобразований элементы стало возможно сдвигать, поворачивать, наклонять, сжимать и растягивать. веб-дизайнеры наконец-то смогли ...
пока вы сидели в одиночестве, вылавливая на фриланс-биржах, подходящие для себя заказы, офисные веб-разработчики, уже на полную катушку, использовали ...
официальный сайт: textolite.ru textolite представляет собой простую систему управления статичным сайтом с бесплатной и платной расширенной версией. ...
в статье "бриф на разработку сайта" вы узнали что такое бриф и зачем надо анкетировать заказчика. вам крупно повезет, если у заказчика существует ...
шаблон wordpress, как и другие cms, состоит не из одного файла index.php, а из нескольких файлов. типичная блоговая структура, собирается из нескольких ...
в статье работа с библиотекой jquery ui, мы подробно на примере виджета tooltip, разобрали, как подключить библиотеку, зачем она вообще нужна. сегодня, ...
все базы данных делятся на два типа, с хранением данных в таблицах (mysql) и с хранением данных, в массивах (формат bson). mongodb – документо-ориентированная ...
услуга по оптимизации скорости загрузки сайтов – весьма востребована на фриланс-биржах. вы спросите: "почему так много не оптимизированных ...
нас, веб-разработчиков, строгий google, уже давно убедил, что изображения на сайте, надо оптимизировать – уменьшать их вес. красный или оранжевый ...
если вам тяжело дается освоение разных языков программирования, верстки, то не отчаивайтесь, посмотрите в сторону заработка на собственном ...
бывает, что заказчики часто просят, сделать дополнительную навигацию на wordpress и вывести её, в указанном на скриншоте, месте (красными стрелочками). ...
это будет не просто очередная статья в стиле "копирайтеров-теоретиков" на тему, что такое "бесплатный конструктор сайтов mobirise". прежде, чем приступить ...
немного предыстории. всем известный, adobe photoshop, изначально был задуман для обработки фотографий. но поскольку на тот момент не было других инструментов ...
миниатюра записи – это прикрепленная превью картинка, к анонсу записи в wordpress. в полной записи, этой картинки может и не быть или у неё будут ...
в статье "конструктор mobirise для верстальщика" была подробно раскрыта тема, чем полезен конструктор mobirise верстальщику. в этой статье, я прокомментирую ...
статья "бриф на разработку сайта" - ответила на вопрос, что такое бриф и кому он нужен. данная статья будет практическим руководством, как создать ...
на github pages можно бесплатно разместить статичный html сайт, состоящий из html/css/js файлов, к которому можно подключать различные библиотеки – одним ...
на прошлом уроке была сделана верстка секции по psd макету. сейчас наш сайт хорошо смотрится на больших и средних мониторах. но что произойдет, ...
на прошлом уроке была сделана html разметка для дальнейшей верстки psd макета. как и ожидалось все блоки и секции встали друг под друга - это и есть ...
в этой статье вы узнаете историю возникновения и использования псевдоэлементов after и before в css. рассмотрим несколько примеров, где они активно ...
серия этих уроков ориентирована на абсолютных новичков, чтобы максимально подробно продемонстрировать, как происходит верстка сайта по psd ...
на фриланс биржах, можно часто увидеть заголовки с заданиями от заказчиков: "нужно ускорить загрузку сайта на wordpress". думаю, что эта тема будет ...
сегодня мы рассмотрим редко используемые начинающими верстальщиками, относительные единицы измерения в css3, такие как, em, rem, vh, vw, vmin, vmax. в основном ...
идея создания собственного интернет-магазина, наполненного чужими товарами (своих у меня нет), уже давно не давала мне покоя. я постепенно шел ...
babel преобразует новый синтаксис es6 в совместимый синтаксис со всеми браузерами es5. благодаря компилятору babel, программисты прямо сейчас могут ...
в базовых настройках wordpress в верхнем левом углу шапки сайта, выводится название сайта в виде текста. представьте, что вы взяли на фриланс-бирже ...
у посетителя сайта, должна быть возможность, быстро вернуться наверх, если он дошел до конца страницы. обычно в правом нижнем углу браузера, ...
localstorage - это локальное хранилище данных прямо в браузере клиента. иногда нужно между перезагрузками страниц, сохранять пользовательские настройки, ...
использование всплывающих подсказок на html страницах, прекрасная возможность дать пользователю уточняющую информацию, в удобном для него виде ...
в эпоху процветания интернет-магазинов, как никогда востребованы разработчики, способные реализовать запросы владельцев магазинов. львиная ...
большинство блоггеров или авторов, ведущие свои сайты на wordpress никогда не касаются вкладки в панели управления: "пользователи". по большому счету ...
как с пользой можно применить эффект печатающегося текста на сайтах? первое, что приходит в голову - для фиксирования внимания посетителей на ...
прототип - это js объект, от которого другие объекты наследуют его свойства и методы. по умолчанию, у каждого объекта есть свой прототип и если ...
у языка javascript существует несколько методов для перебора массива, один из которых мы сейчас рассмотрим. речь идет о методе foreach, который может ...
на этом уроке, мы создадим красивый эффект тени при наведении, на чистом css. подобный эффект можно реализовать на любом блочном элементе. в нашем ...
в первой части, мы учились получать и изменять значение атрибута на jquery. во второй части, напишем программу на jquery - при клике по цветной кнопке, ...
сегодня мы научимся получать значения из формы на jquery, вводимые пользователем. рассмотрим на примере простого калькулятора. у него будет два ...
рассказать о том, как работает ключевое слово this, частый вопрос на собеседовании на позицию веб-разработчика. начнем, как всегда с теории, а чуть ...
главнейшим инструментом для заработка в интернет-маркетинге является e-mail рассылка. совершенно не важно, продаете ли вы собственные товары ...
зачем обязательно надо делать картинки адаптивными? к сожалению, то счастливое время, когда можно было вставить картинку на веб-сайт и указать ...
на прошлом уроке мы научились вешать обработчик события на одну кнопку в js. однако методы, хорошо работающие с единичными объектами, совершенно ...
на этом уроке мы подготовимся к верстке сайта по psd макету, используя только сетку (grid system) от фреймворка bootstrap 4. научившись такому методу верстки, ...
object (объект) - это более сложный тип данных в js. хочу напомнить, что все остальные типы данных, являются примитивными, так как могут содержать ...
приветствую вас друзья! на этом уроке вы узнаете как создать всплывающую форму подписки для сбора базы подписчиков с последующей бесплатной ...
у браузеров есть замечательная опция - возможность взаимодействия с пользователем, через диалоговые (модальные) окна на js. достигается это с ...
словарь является типом данных (dist) в python и представляет собой неупорядоченную коллекцию, состоящую из пар "ключ-значение". словари в python очень ...
не один язык программирования не может обойтись без переменных и python здесь не исключение. переменная в программировании – это именованная ...
возможно, что после прочтения статьи python – как первый язык программирования, вам захочется познакомиться поближе с питоном (народное название). ...
на этом уроке мы поговорим о числовом типе данных в javascript. в языке javascript как целые числа, так и числа с плавающей точкой относятся к одному типу ...
база данных в программировании – это хранилище разного рода данных в упорядоченном виде. если провести простую аналогию из жизни, то базу данных ...
на этом уроке мы сделаем меню с красивым эффектом при наведении с использованием псевдоэлементов - :after и :before. что такое псевдоэлементы, мы очень ...
сегодня мы поговорим о том, что такое якорь в html, как это работает, да так, чтобы действие произошло плавно. якорь – это знак решетки, который ...
на предыдущем уроке вы узнали какие seo плагины рекомендуется установить на любой wordpress сайт. на этом уроке вы узнаете как защитить ваш сайт и ...
на сайтах кнопки alert (оповещение), используются для взаимодействия с пользователем. смысловая составляющая alert кнопок передается в основном ...
проверка выбранной ниши по охвату аудитории информационный сайт зарабатывает на пользователях, которые кликают по контекстной рекламе. нам ...
по умолчанию маркером списка ul, служит простая черная точка. я знаю, что многие начинающие верстальщики, используют маркированные списки для ...
на этом уроке вы узнаете, что такое utm-метки, как установить их на сайте и как настроить получение данных из utm-меток на ваш e-mail. что такое utm-метки? ...
сегодня вы узнаете как сделать чекбокс на html и добавить ему css стилей для лучшей совместимости с дизайном сайта. демонстрация чекбокс на ...
на прошлом уроке мы узнали, что такое utm-метки и настроили get-запросы меток в скрытых полях формы. на этом уроке вы узнаете, как получить данные ...
как сделать массовый импорт товаров в интернет-магазин, работающий на плагине wordpress – woocommerce? совсем недавно этого нельзя было сделать бесплатно, ...
сервис яндекс.деньги позволяет любому физическому лицу (для юрлиц и ип есть яндекс.касса), разместить на сайте форму оплаты, даже владельцам ...
разработчики клиентских сайтов на wordpress, часто сталкиваются с необходимостью восстанавливать сайт, после очередного обновления какого-нибудь ...
тем, кто знает, что такое обратный звонок на сайте, предлагаю не читать, а перейти сразу к следующей главе. для остальных постараюсь объяснить, ...
лучше всего начать изучение структуру файлов темы wordpress на примере стартовой темы underscore. обычно разработку под wordpress начинают с этой базовой ...
изображения являются важнейшей частью любого сайта. являются ли они маркетинговыми баннерами, изображениями продуктов или логотипов, невозможно ...
семантическое ядро – это список ключевых слов, по которым будут заходить пользователи на ваш сайт из поисковых систем. сначала собирают семантическое ...
на этом уроке вы узнаете, как перенести свой сайт на wordpress с одного хостинга на другой или с локального сервера на реальный хостинг. для этой ...
как правило, владельцы сайтов для обратной связи с клиентами размещают на видном месте номер телефона и контактную форму. если с телефоном все ...
несмотря на то, что платных или бесплатных wordpress тем, создано уже огромное количество, редко кто использует их на своих сайтах так, как есть. даже ...
на прошлом уроке мы создали новый тип записи post type book более подходящий для продажи книг, а на этом уроке научимся создавать для него таксономию ...
на этом уроке мы научимся применять анимированные градиенты, используя javascript библиотеку – granim.js. вы увидите, как просто работать с этой замечательной ...
на этом уроке мы разберем основные правила css анимации на веб-странице, которые можно применить к любому элементу, а не только к тексту. просто ...
из этой статьи вы узнаете как сделать сайдбар на wordpress. сайдбаром мы называем правую или левую колонку сайта, на которой размещены виджеты. виджеты ...
на этом уроке мы научимся отправлять форму без перезагрузки страницы, используя метод ajax, библиотеки jquery. как вообще происходит классический ...
на этом уроке мы научимся устанавливать на сайт видео фон во всю ширину экрана. обычно такие видео фоны служат вместо статичного фона в верхней ...
на прошлом уроке вы научились создавать свой собственный сайдбар, а на этом уроке вы узнаете как создать свой виджет на wordpress. виджет - это модуль, ...
проверка на сезонность и перспективность нам надо исключить, что выбранная ниша не имеет сезонности и нисходящего тренда. поскольку, это наш ...
на прошлом уроке мы создали схему структуры сайта, на котором будет 6 категорий, одна из категорий будет состоять из двух подкатегорий. все категории ...
на этом уроке мы сделаем всплывающую подсказку при наведении на иконку на чистом css. точно такой же принцип можно применить к картинке. перейдите ...
прежде чем начинать изучение java, нужно установить две программы: java developer kit (jdk) – это комплект для разработчика, включающий в себя компилятор, ...
на прошлом уроке, мы привязали к кнопке гамбургер выезжающее меню при клике по ней. посмотрите демонстрационный пример прошлого урока, как ...
на прошлом уроке, мы создали анимацию для кнопки гамбургер, без привязки к меню. на этом уроке привяжем к нашей кнопке адаптивное меню. на мобильных ...
какие кнопки обычно встречаются на сайте? я разделили бы их на два вида: кнопки внутри формы и кнопки-ссылки. и те и другие необходимо уметь верстать. ...
на этом уроке я покажу вам как реализовать такой hover эффект, как плавное подчеркивание ссылки при наведении. подчеркивающая линия будет появляться ...
в первой и второй части урока, мы заново создали шапку сайта, но этого не достаточно. при уменьшении ширины экрана до 1000 пикселей, элементы сайта ...
моему другу на собеседовании в одну it компанию, дали следующее задание: "как при помощи jquery отфильтровать данные из списка по первым буквам в ...
вертикальное меню на css - это список ссылок, ведущих на разные страницы сайта. неплохо смотрится, когда список ссылок вместо простых маркеров, ...
циклы в программировании – это повторяющиеся одинаковые действия. приведу пример из реальной жизни: "производственная машина на конвейере ...
все представленные ниже операции на java пишутся внутри конструкции. данная конструкция автоматически генерируется netbeans-ом, при создании нового ...
в любом языке программирования переменная играет одинаковую роль и java здесь не исключение. переменная это ссылка на определенную ячейку в оперативной ...
для тех кто решил всерьёз заняться программированием, важно определиться для какой платформы писать приложения. хотя кроссплатформенная разработка ...
у нас есть схема структуры сайта с ключевыми словами, которые будут вставляться в статью, давая четкий сигнал поисковым машинам, на какой запрос ...
в этой статье мы разберем основы ajax запросов. научимся настраивать и отправлять запрос, а также получать ответ от сервера. классическая модель ...
метод attr() получает или устанавливает значение атрибута элемента на странице. если элемент не имеет такого атрибута, то возвращается значение ...
xml – расширенный язык разметки, описывающий какие-либо данные при помощи свободных тегов. это значит, что автор документа, придумывает названия ...
на этом уроке, мы научимся добавлять элементу, по которому кликнул пользователь, класс, чтобы изменить его внешний вид, применяя стили, добавленного ...
для верстальщика псевдоэлементы и псевдоклассы – незаменимые помощники и я вам это сейчас докажу на примере фрагмента psd макета. дизайнеры ...
продолжаем делать выезжающее боковое меню по клику, в первой части урока была сделана html-разметка, стилизованы все селекторы, теперь осталось ...
для лучшего понимания, что такое массивы, сделаем вид, что их не существует, обойдемся пока без них. однако для проведения эксперимента, надо ...
начнем наше знакомство с циклом for в javascript, сразу с примеров и только в конце статьи пробежимся немного по теории. представьте себе, что вы, ...
примеры условных операторов if-else (если-иначе), нам не надо специально придумывать, они приходят из жизни. то, как мы себя ведем или какой делаем ...
библиотека jquery ui (user interface) представляет собой набор шаблонных элементов для создания пользовательского интерфейса и является частью библиотеки ...
объявление переменных для того, чтобы объявить в javascript переменную, пишут так: var name; где name – осмысленное название переменной, написанное ...
приветствую вас друзья! на этом уроке мы научимся обращаться к базе данных wordpress-а и выводить на сайте нужную нам информацию, в нужном месте и ...
независимо от того делаете ли вы сайт на wordpress для себя или на заказ, базового функционала этой популярной cms будет явно недостаточно. перед нами ...
на чистом css можно создавать интересные и оригинальные "спецэффекты", один из которых мы сейчас подробно разберем. у нас есть список пунктов ...
как преобразовать обычный список в массив, используя программу vscode и регулярные выражения? предположим вам нужно занести в базу данных сайта ...
например, по какой-то причине вам нужно перенаправить посетителей с одного сайта на другой. только сделать это без мгновенного редиректа в лоб, ...
на предыдущих уроках по javascript, мы научились получать и изменять элементы на страницах. но зачем это нужно, если можно сразу создать страницу ...
чтобы создать графический интерфейс ваших окон в pyqt, вы можете выбрать два основных пути: можно использовать qt designer или вручную написать графический ...
google docs - это бесплатная альтернатива microsoft office, вполне удовлетворяющая потребности среднестатистического пользователя. google документы замечательны ...
на предыдущем уроке мы сверстали секцию с портфолио на css grid для десктопа. осталось сделать верстку адаптивной для различных мобильных устройств ...
распределение ширины сетки на фракции необязательно должно происходить в равных долях. если поставить вместо единицы цифру два, то мы удвоим ...
флаги в регулярных выражениях уточняют каким образом нужно искать, если это важно. в противном случае, флаги не обязательно добавлять к регулярному ...
термин квантификаторы в регулярных выражениях звучит пугающе, но по сути это специальные символы, задающие количество повторений. они призваны ...
продолжаем знакомиться с символьными классами у регулярных выражений. символьный класс - слово: \w - символ слова символьный класс «\w» ...
принципы использования регулярных выражений в разных языках программирования более-менее одинаковые. на этом уроке мы посмотрим, как регулярные ...
регулярные выражения - это способ поиска совпадений шаблона с текстом для дальнейших манипуляций. наверняка многие из вас уже составляли простейшие ...
вы когда-нибудь задумывались, что происходит за кадром, когда вы открываете браузер и вводите адрес сайта url (унифицированный ресурсный указатель), ...
итальянский ученый леонардо пизанский вывел закономерную последовательность чисел, при которой каждое стоящее в ряду число, является результатом ...
логические операторы используются вместе с ключевыми словами: for, if, while, do while и могут принимать только одно из двух значение true/false. всего в javascript ...
в первой части урока мы нарисовали сам слайдер с использованием html и css, во второй части создадим кнопки prev / next и напишем javascript код для управления ...
данная статья является логическим продолжением статьи «как уменьшить размер изображения без photoshop». доступность больших и качественных ...
прежде чем использовать и публиковать изображения на веб-сайте, сначала их необходимо подготовить. подготовка включает в себя уменьшение веса ...
сегодня вы узнаете о том, как настроить автоматическое резервное копирование сайта на wordpress. этот способ достаточно надежен и не зависит от ...
добавить иконки соцсетей на wordpress сайт можно с помощью обычного виджета text. находим в кастомайзере виджет text и добавляем его в первую колонку ...
шорткод woocommerce - это короткий код для вывода товаров, страниц и категорий. при запуске короткий код развернется в полноценный код. шорткоды woocommerce ...
я хочу вывести иконки социальных сетей в верхнем правом углу шапки сайта с помощью хуков. поскольку верхняя область у меня уже занята ссылками, ...
тема storefront специально разработана под плагин woocommerce и рекомендована к использованию под интернет-магазин самими авторами плагина. на чем основаны ...
все устройства в интернете имеют свой уникальный адрес, который представляет из себя простой набор цифр. это можно сравнить с номером телефона. ...
мир в целом и интернет в частности, состоят из данных. в основе всех приложений лежат данные: социальные сети хранят данные о пользователях и ...
продолжаем разбирать настройки плагина yoast seo, здесь первая часть статьи. отображение в поисковой выдаче / медиа когда вы загружаете медиафайл, ...
в canvas можно нарисовать квадратичную кривую и кривую безье. скоро вы узнаете, что отличает эти кривые друг от друга, прочитав статью до конца. ...
все, кто хоть немного взаимодействуют с компьютером, неизбежно сталкиваются с однотипными задачами: скачивание видеороликов с youtube, переименование ...
компонентный фреймворк svelte.js используется для создания интерфейсов без перезагрузки страницы и этим он очень похож на vue.js и react.js. но у него ...
svg текст как работать с svg текстом? текст выводится внутри парного элемента text с указанием координат его отрисовки. управление внешний видом ...
создание svg круга окружность рисуется при помощи svg элемента circle. атрибуты cx и cy указывают на x и y координаты центра круга. атрибут r равен радиусу ...
продолжаем совершенствовать игру asteroids c python и pygame. и на текущий момент, на игровом поле отображается один космический корабль, которым можно ...
создание анимации достаточно увлекательное занятие. и python как нельзя лучше подходит для этого. фреймворк pygame уже содержит встроенные методы ...
в предыдущей статье по python и pygame мы завершили создание логики для космического корабля. но корабль все еще один в пустом пространстве. пора добавить ...
на этом уроке нарисуем пчелу с помощью окружностей и анимируем ее так, чтобы она летала. создание анимации в javascript состоит из повторяющегося ...
замечательно то, что на canvas можно не только рисовать, но и анимировать объекты. для этого у javascript есть полный набор инструментов. вы узнаете, ...
в предыдущей статье мы добавили новые свойства к игровому объекту. в результате чего, наш космический корабль двигается и вращается! однако, ...
сегодня мы научимся рисовать дуги и окружности. сделать это можно с помощью метода arc, который рисует дугу из центра в заданной точке с координатами ...
в предыдущей статье мы начали создание проекта игры asteroids. для этого был создан базовый класс игры с конструктором и основными методами игры. ...
продолжаем покорять космические просторы с python и pygame.в прошлой статье мы придали кораблю возможность управления с помощью клавиш. в сегодняшней ...
на этом уроке мы будем учиться рисовать линии, используя тег canvas и язык javascript. на предыдущем уроке мы рисовали геометрические фигуры. для начала ...
в прошлых статьях по созданию игры с python и pygame мы добились отображения корабля на фоне изображения космического пространства. но что можно ...
в предыдущих статьях про python и pygame мы создали и отобразили игровой объект в виде космического корабля. в сегодняшней статье мы создадим для ...
тег canvas создает область на html странице, внутри которой можно рисовать разные фигуры и анимировать их при помощи javascript. создание области для ...
в предыдущей статье мы создали и отобразили красивое игровое поле с помощью pygame и python. и на данный момент наша программа отображает фоновое ...
структурой данных называется способ организации или хранения данных для эффективного с ними взаимодействия. в программировании мы все время ...
оператор join используется для объединения строк из нескольких таблиц в одну общую таблицу, на основе связанного столбца между ними. для таблиц ...
в предыдущей статье мы реализовали проект pygame, в результате чего на экран выводится окно с игровым полем, которое вы можете закрыть, нажав клавишу. ...
используя ключевой слово where и другие операторы, мы можем задавать условия для фильтрации строк. в фильтрах можно использовать следующие операторы: ...
агрегатные функции когда нам нужно получить сумму, максимальное, минимальное или среднее значение хранящихся в базе данных чисел, то мы используем ...
в плагине woocommerce фильтрация товаров основана на атрибутах. атрибут - это разновидность товара по цвету, размеру, стилю, назначению. у разных товаров ...
на этом уроке разберем настройки популярного yoast seo плагина (версия 15.4) для использования в онлайн-магазинах, работающих на основе woocommerce плагина. ...
как начинающие, так и опытные верстальщики не могли не заметить, что вместе с новыми возможностями в css3 технологиях, объем самого css-кода, существенно ...
на этом уроке мы познакомимся с функцией mail (), на примере создания формы обратной связи на php с последующей отправкой полученных данных на почту. ...
set (множество) - это объект, в котором могут хранится только уникальные значения любого типа данных (примитивы и другие типы объектов). создание ...
materialize - это css фреймворк для создания сайтов, основанный на принципах material design. если сказать проще, то это набор инструментов для верстки и готовые ...
при написании javascript кода, новички неизбежно допускают ошибки и это нормально. плагин jshint как раз позволяет вовремя увидеть все допускаемые ...
регулярные выражения нужны для поиска по тексту, для замены в тексте или для проверки на совпадение с неким шаблоном. это когда вы регистрируйтесь ...
сегодня мы поговорим о сервисе icomoon, который позволяет создавать шрифтовые иконки для различных проектов. что же это за шрифты и в чем их преимущества? ...
на этом уроке я покажу, как буквально за считанные минуты можно бесплатно сделать гифку из видео с помощью онлайн-сервиса giphy. работать с данным ...
когда мы имеем дело с большими вложенными списками, было бы хорошо сделать их как можно компактнее. javascript отлично справится с поставленной задачей. ...
на этом уроке я покажу как установить и настроить статистику яндекс метрики на вашем wordpress сайте. наиболее простой и предпочтительный способ ...
из этой статьи вы узнаете о 10 полезных онлайн-сервисах для веб-разработчиков, которые существенно упрощают работу с определенными рутинными ...
в этом уроке мы научимся с вами делать горизонтальное анимированное выпадающее меню на css3, при наведении курсором на его категории, будет меняться ...
дорогие друзья! сегодня мы поговорим о html теге code. при написании конкретно этой статьи или любых других обучающих материалов, периодически необходимо ...
map - это новая структура данных добавленная в es2015. объект map похож на js-объект, в том плане что он также состоит из пар ключ значение. карта map очень ...
в статье про формы, тема полей ввода (input) умышленно осталась не затронутой, поскольку она обширная и заслуживает отдельного внимания. элемент ...
пожалуй уже не один современный сайт не может обойтись без отправки данных пользователя на сервер. это может быть заявка на обратный звонок, ...
сегодня трудно себе представить современный сайт, при верстке которого не использовался бы элемент "float". для профессионала-верстальщика или ...
первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. через команду npm, мы в дальнейшем установим и сам ...
для популярного редактора vs code существует огромное количество плагинов для разных задач. цель данной статьи - составить чек лист самых нужных ...
по умолчанию все браузеры ищут фавикон в корне сайта, но ничего не случиться, если мы поместим фавикон в папку с картинками и укажем пути в хедере ...
в интернете мы то и дело ищем какую-нибудь информацию, чаще всего это текст и поэтому не случайно всех больше html тегов предусмотрено именно для ...
бывалые вебмастера до сих пор с содроганием вспоминают времена, когда целые сайты верстались на таблицах. это вам не email-рассылку сверстать, ...
эта статья является продолжением предыдущей статьи на тему использования свойства float. почему мы такое пристальное внимание уделяем этому ...
на прошлом уроке мы создавали html структуру для макета с блок постами, а на этом уроке расставим посты в соответствии с макетом, максимально используя ...
css переменные призваны уменьшить дублирование кода в таблице стилей, улучшить его читаемость и придать больше гибкости. css переменные позволяют ...
стрелочные функции появились начиная с es6 и очень сильно изменили качество написания кода. так чем же они хороши? главная причина появления ...
robin image optimizer плагин robin image optimizer один из немногих подобных плагинов, кто бесплатно оптимизирует (уменьшает вес) картинки на wordpress сайте. даже ...
на сегодняшний день, можно очень простым способом изменить внешний вид всем надоевшей серой полосы прокрутки. и для этого не нужно подключать ...
использование похожих и сопутствующих товаров в любом интернет магазине - это известный маркетинговый прием с целью выручить побольше денег. ...
с помощью плагина woocommerce можно продавать 6 типов товаров: простой товар сгруппированный товар внешний / партнерский товар вариативный ...
инкапсуляция - это скрытие реализации какой-либо задачи в javascript коде не из вредности, а с целью защиты части кода от пользователя или программиста. ...
данная статья научит вас, как подключать стили, шрифты и скрипты к сайту. дело в том, что верстальщик отлично знает, что такие вещи подключаются ...
доброго времени суток! перед тем как начать программировать на c#, вам необходимо установить интегрированную среду разработки visual studio community. ...
для тестовых запросов, есть такой сервис jsonplaceholder. он имитирует фейковый сайт с базами данных, чтобы нам с вами было на чем потренироваться. отсюда ...
из этой статьи вы узнаете, как создать клон объекта, то есть его точную копию. для примера создадим объект person, который нам нужно клонировать. ...
новички много раз уже слышали, что прежде чем загрузить изображения на сайт, то нужно их как следует сжать. поскольку не оптимизированная графика ...
существует три способа удаления дубликатов из массива. в данной статье рассмотрим каждый из них и выясним наиболее подходящий. первый способ ...
на этом уроке, мы сделаем таймер обратного отсчета на javascript, используя уже готовую верстку на html и css. если на странице вашего сайта или лендинга ...
что вообще должно происходить с этими кнопками и карточками товаров? при клике пользователя по черной кнопке, на сайте должны остаться только ...
из этого урока вы узнаете об одном из самых популярных алгоритмов сортировки массивов – быстрая сортировка (quick sort).как работает алгоритм быстрой ...
у вас на руках есть готовый дизайн для футболки. что с ним делать дальше? как получить готовый продукт в свой интернет-магазин? для начала нужно ...
чтобы сделать свою версию этого дизайна, на первых порах вам не нужен photoshop и дизайнерские навыки. простые вещи можно сделать легко и быстро, ...
интригующее название «заработок на продаже товара, которого у вас нет нет» никакая не мошенническая схема, а вполне реальный бизнес. который ...
конструктор яндекс карт независимо от этого куда вы в дальнейшем будете вставлять яндекс карту, первый шаг всегда начинается с конструктора ...
что такое a/b тестирование сайта a/b тестирование - это сравнение двух страниц с разным дизайном, но в одинаковых условиях, чтобы выяснить какая ...
что такое копирайтинг? копирайтинг - это умение написания текста, не ради выражения чувств или собственного мнения. а способность подбирать ...
в css grid можно позиционировать отдельно взятую ячейку (grid item), как по оси x, так и по оси y. поэтому, все рассматриваемые css свойства будут относиться ...
плагин eslint - это лучший помощник для отлавливания ошибок в процессе написания javascript кода. предупреждая нас о них прямо на лету в редакторе кода. ...
перед нами стоит задача создать и вывести на страницу список книг из массива, хранящегося в базе данных на сервере. на практике это значит, что ...
javascript является объектно-ориентированным языком (ооп) и главную роль в нем играет объект. он может в себе содержать методы, свойства, а также любой ...
метод sort часто используется для сортировки массивов в js, но необходимо знать о некоторых нюансах при работе с данным методом. все дело в том, ...
класс в js - это расширяемый шаблон кода, заготовка для создания объекта. классы в js предназначены для упрощения создания объектов и организации ...