<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поиск: div

Что искали: div

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

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