Уроки и статьи
Подписка
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт
Моя группа
Опрос
Какая тема Вас интересует больше?
Бесплатный курс
Программирование на Python для начинающих
Бесплатный курс по Python даст Вам всю необходимую базу для начала программирования на языке Python. В курсе Вас ждёт множество уроков (больше 4-х часов видео), исходников и упражнений.
Чтобы получить Видеокурс,
заполните форму
Бесплатный онлайн-семинар
Как стать высокооплачиваемым Unreal-разработчиком: пошаговая инструкция
После семинара:
- Вы узнаете, что нужно делать, чтобы устроиться на работу Unreal-разработчиком.
- Вы узнаете, что нужно изучить, чтобы стать Unreal-разработчиком.
- Вы получите PDF-файл с чек-листом с пошаговым планом.
- Вы узнаете, как ускорить весь процесс в 3-4 раза.
Умные цитаты
Тот, который передвигает горы, сначала убирает маленькие камешки.
Конфуций
Поиск: div
Что искали: div
Всего найдено: 905 записей
- 1. создание dom элементов через javascript
- JavaScript/JavaScript Основы
... color: black;
text-align: center;
}
<div class="text">пример создания элемента через <strong>javascript</strong>.</div>
создание элемента через ...
- 2. как устроена сетка bootstrap
- CSS/CSS Основы
... значениями
классический пример сетки с двумя колонками.
<div class="container">
<div class="row">
<div class="col-sm-6">
первая ...
- 3. адаптивная верстка макета (bootstrap 4)
- CSS/CSS Основы
... пользовательский класс services.
схематичная разметка 1-го уровня
<div class="container">
<div class="row">
<div class="col-12 col-md-4">
колонка ...
- 4. пример использования css функций var() и calc()
- CSS/CSS Основы
... переменная i с её уникальным значением.
<section>
<div class="loading">
<div class="blocks" style="--i:1;"></div>
<div class="blocks" style="--i:2;"></div> ...
- 5. bootstrap 4. flex-свойства сетки.
- CSS/CSS Основы
... разместит, как надо. давайте посмотрим несколько примеров:
<div class="row" style="background: lightblue">
<div class="col-md">col-md</div>
<div class="col-md">col-md</div>
...
- 6. 3 основных способа верстки сайтов. часть #1
- CSS/CSS3
... следующий ряд. такое поведение естественное для блоков.
// html
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div> ...
- 7. красиво оформленная секция с услугами
- CSS/CSS Основы
... понять по иконке.
html разметка + позиционирование в центре
<div class="container">
<div class="servicebox">
<div class="icon" style="--i:#4eb7ff;">
<ion-icon ...
- 8. верстка сайта по psd макету (часть 2)
- HTML/HTML 5
... текстом и кнопкой. блок и секция чередуются друг с другом.
<div class="block_violet">
<div class="block_white">
<div class="photo">
<img ...
- 9. верстка по бэм методологии
- HTML/HTML 5
... необходимости, можно легко скопировать участок кода вместе с css:
<div class="stat">..элементы..</div>
затем вставить в другое место на странице или сайте ...
- 10. как остановить проигрывание видео при закрытии модального окна в bootstrap?
- JavaScript/JavaScript Основы
... <div class="modal fade" id="video_modal" tabindex="-1" aria-labelledby="videointerview" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered"> ...
- 11. верстка формы обратной связи используя bootstrap
- PHP/PHP Основы
... всю ширину браузера, обертываем ее в контейнер:
<div class="container">
...
</div>
используя класс col-md-4 с помощью grid system (сеточной ...
- 12. карточка блог поста на css
- CSS/CSS3
... служить flex-контейнером, а блоки с классом column - его детьми.
<div class="row">
<div class="column">
<div class="card">карточка превью-поста ...
- 13. дизайн и верстка страницы contact us. часть #1
- HTML/HTML Основы
... социальных сетей
карта
шапка + контактная форма
<div class="title">
<h2>contact us</h2>
</div>
<div class="box">
<div class="contact ...
- 14. css grid. практические примеры #4
- CSS/CSS Основы
... grid сетки можно обратится через псевдокласс nth-child.
<div class="container">
<div class="item">item-1</div>
<div class="item">item-2</div> ...
- 15. адаптивная верстка на flex (часть 1)
- CSS/CSS Основы
... того, чтобы в дальнейшем задавать для него свои стили.
<div class="container">
<div class="posts">
<div class="posts__element posts__element--big">
<img ...
- 16. верстка по сетке bootstrap (часть 2)
- CSS/CSS Основы
... колонки, по шесть столбиков в каждой.
<!-- карусель начало -->
<div class="container-fluid">
<div class="row justify-content-center bg-item">
<div id="carouselexamplecontrols" class="carousel slide" ...
- 17. как впечатлить заказчика своим портфолио? создаём skill-bar.
- JavaScript/jQuery
... 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> ...
- 18. свойство perspective в css
- CSS/CSS Основы
... разметка:
<div class="parent perspective">
<h1>использование свойства перспективы для родителя </h1>
<div class="child"></div> ...
- 19. управление размерами flex-элементов
- CSS/CSS3
... коде, так как оно задается по умолчанию.
html структура
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div ...
- 20. коллекция css компонентов
- CSS/CSS Основы
... свойство flex-basis.
<!-- общие правила поведения для всех карточек -->
<div style="
display: flex;
flex-wrap: wrap;
margin-left: -8px; /* отступ от левого края */
margin-right: -8px; ...
- 21. 3 способа выравнивания блоков по ширине
- CSS/CSS Основы
... свойства: display: flex и justify-content: center.
// html разметка
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div> ...
- 22. bootstrap 4. система сеток.
- CSS/CSS Основы
... давайте рассмотрим некоторые примеры:
<style>
.row div {padding:20px 10px; border: 1px solid;}
</style>
<div class="container">
<div class="row" style="background: lightblue">
...
- 23. вертикальный аккордеон на чистом css
- CSS/CSS3
... diplay: table-cell. внутри блока div размещены: label с элементами форм input, типа checkbox.
все секции аккордеона закрыты (checkbox)
<div>
<label class="accordion"> ...
- 24. создаем вкладки на js (часть 1)
- JavaScript/JavaScript Скрипты
... соответственно должен показаться контент второго блока и.т.д.
<div class="content">
<div class="info">
<div class="header">
<div ...
- 25. парсинг сайта вакансии на python
- Python/Основы Python
... salary = bs.select_one(
'body > div.page-container > div > div > div > div > article > section:nth-child(1) > div ' ...
- 26. bootstrap 4. компонент cards.
- CSS/CSS Основы
... приведу нужный код, а затем мы разберем, что там происходит.
<div class="container text-muted">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card"> ...
- 27. как добавить новость на сайт c помощью php. часть 1
- PHP/PHP Основы
... <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container py-4 px-3">
<div class="container">
<h2 class="mb-3">последние новости</h2> ...
- 28. смс авторизация на сайте с помощью google firebase
- JavaScript/JavaScript Основы
... </head>
<body>
<div class="container-fluid d-flex flex-column" style="min-height: 100vh">
<div class="row">
<div class="col-md-12 p-0"> ...
- 29. css grid layout #1 (базовая сетка)
- CSS/CSS Основы
... заготовку, состоящую из обертки wrapper с 12 ячейками внутри.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div ...
- 30. выпадающее меню выбора с использованием javascript
- JavaScript/JavaScript Скрипты
... разметку через тег ion-icon.
<div class="dropdown">
<input type="text" class="text2" readonly placeholder="dropdown menu">
<div class="option">
<div><ion-icon ...
- 31. создание перспективы в css
- CSS/CSS3
... иллюстрации сказанного создадим простую фигуру:
html разметка:
<div class="scene">
<div class="panel"></div>
</div>
css код:
.scene {
width: 200px; ...
- 32. верстка портфолио на flexbox (часть 2)
- CSS/CSS3
... каждом portfolio_item имеется фотография portfolio_image.
html разметка
<div class="portfolio">
<div class="portfolio_col">
<div class="portfolio_item">
<img ...
- 33. создание сетки c tilewind css
- CSS/CSS Основы
... <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="**container** mx-auto">
<div class="grid grid-cols-3 gap-4">
<div class="bg-gray-200 p-4">tile 1</div> ...
- 34. ошибки новичков при верстке сайтов #1
- CSS/CSS Основы
... делятся на два типа — блочные и строчные. рассмотрим на примере тегов div (блочный) и span (строчный) принципиальную разницу между ними. поместим ...
... классом loader и четыре блока.
<section>
<div class="loader">
<div></div>
<div></div> ...
- 36. пример адаптивной верстки на bootstrap
- CSS/CSS Основы
... строка и соответственно 2 колонки.
<section class="app">
<div class="container">
<div class="app__content">
<div class="row">
<div ...
- 37. адаптивная контактная форма
- CSS/CSS3
... form создадим розовый блок с классом container.
<div class="container">
<form action="#">
</form>
</div>
внутри тега форм создадим пять рядов ...
- 38. css grid. практические примеры #1
- CSS/CSS Основы
... невозможности расположить блок по осям x и y одновременно.
<div class="container">
<div class="item">item-1</div>
<div class="item">item-2</div> ...
... расположен фиолетовый блок-ребенок.
// html разметка
<div class="wrap">
<div class="block"></div>
</div>
// css код родительского блока ...
- 40. закруглённые углы через css
- CSS/CSS Основы
... отвечает за свой угол блока. далее напишите такой html-код:
<div class="roundborder">
<div>
<div>
<div>
...
- 41. верстка сайта с нуля. меню навигации. часть 1.
- HTML/HTML 5
... содержимое шапки пишем внутри парного тега header.
<header>
<div class="wrap">
<div>
<div>
<a href="#"><img src="logo.png" alt=""/></a>
</div> ...
- 42. как работать со стилями в javascript.
- JavaScript/JavaScript Основы
... создадим два самых обычных div блока, но для одного зададим стили через атрибут style, а для другого через тег style.
<style>
div {
width: 150px;
height: 150px; ...
- 43. пишем информер погоды на react
- JavaScript/JavaScript Основы
... <title>информер погоды на react</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html> ...
- 44. пример верстки фотогалереи на css grid #1
- CSS/CSS Основы
... создадим саму секцию-портфолио с вложенными тегами div, а каждую картинку положим в отдельный тег div в качестве фона. рекомендуется стили касающиеся ...
- 45. js swipe api: что это и как его использовать
- JavaScript/JavaScript Основы
... }
</style>
</head>
<body>
<div id="swipearea">swipe here</div>
<script>
const swipearea = document.getelementbyid('swipearea'); ...
- 46. верстка адаптивной шапки на bootstrap
- CSS/CSS Основы
... одну строку и занимают определенное количество колонок.
<div class="container">
<div class="row">
<div class="col-lg-2">номер телефона</div> ...
- 47. функции 3d-преобразования в css
- CSS/CSS3
... тегами body вставить нижеуказанный html.
html разметка:
<div class="scene">
<div class="panel panel--translate-neg-z">translatez(-200px)</div>
</div> ...
- 48. фильтр категорий товаров на javascript (часть 2)
- JavaScript/JavaScript Основы
... для фильтрации.
<main class="content">
<div class="container">
<div class="card clothing">clothing</div>
<div ...
- 49. эффект переворачивающейся карточки на css
- CSS/CSS Основы
... <link rel="stylesheet" href="card.css">
</head>
<body>
<div class="container">
<div class="work-card">
<div class="work-card__inner"> ...
- 50. плагин emmet для sublime text.
- Софт/Софт для создания сайтов
... плагином emmet.
введите
div
а теперь нажмите клавишу tab. в результате этих несложных действий мы получим открывающий и закрывающий тег div, а курсор будет ...
- 51. работа с выборкой элементов на jquery
- JavaScript/jQuery
... jquery.
давайте разберём для начала следующий пример
<div id="block"><span>блок</span></div>
<script type="text/javascript">
var element = $("#block span").clone(); // клонируем ...
- 52. пример адаптивной верстки на flexbox (#2)
- CSS/CSS Основы
... блок с текстом. новым блокам зададим свои классы.
<div class="advantages_col">
<div class="advantages_image"><img src="image_01.svg" alt=""></div>
<div ...
- 53. добавление и удаление элементов на jquery
- JavaScript/jQuery
... 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='#'>ссылка внутри ...
- 54. флекс контейнер и элементы флекса (верстальщику)
- HTML/HTML 5
... разметку, опираясь на схему.
<section class="expert">
<div class="expert__icon"></div>
<h2 class="expert__title">расскажите о своём опыте</h2> ...
- 55. нарисовать стрелку на css
- CSS/CSS Основы
... анимацию.
создадим в html разметке блок и стилизуем его.
// html
<div class="arrow"></div>
сделаем общую основу для стрелок (вверх, вниз, вправо и влево), ...
- 56. создание теста для сайта на javascript
- JavaScript/JavaScript Основы
... создаст структуру html разметки. для каждого объекта массива создается тег div, внутри которого будет параграф p, поле для ввода (input) и дата-атрибут ...
- 57. красивое оформление html/css кода
- HTML/HTML Основы
... левого края редактора кода. тег div является вложенным элементом относительно тега section.
<section>
<div>
</div>
</section> ...
- 58. мобильный сенсорный слайдер swiper
- JavaScript/JavaScript Основы
... <!-- общий контейнер -->
<div class="swiper-container">
<!-- оболочка для слайдера -->
<div class="swiper-wrapper">
<!-- ...
- 59. bootstrap 4. модальное окно
- CSS/CSS Основы
... javascript. в данном уроке мы рассмотрим только первый случай.
<div class="container">
<div class="row mt-3">
<div class="col-12">
<button class="btn ...
- 60. фигуры с hover-эффектом из сериала "игра в кальмара"
- CSS/CSS Основы
... карточки закрашивается черным цветом в мелкую сеточку.
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div ...
- 61. разница между class и id на примере тега div
- CSS/CSS Основы
... бы такой нужный и важный тег <div>. посмотрите код любого сайта, который найдете в интернете и увидите, что тег <div> чаще других тегов встречается ...
- 62. семантическая разметка html5: понятное руководство с примерами
- HTML/HTML Основы
... href="#content">перейти к содержимому</a>
<header class="site-header">
<div class="logo">coffeetime</div>
<nav aria-label="основная навигация">
<ul>
<li><a ...
- 63. верстка формы обратной связи. часть 5
- HTML/HTML 5
... форма обратной связи помещена в теге div с классом part_2_of_3 и занимает она две трети от ширины родителя.
<div class="con part_2_of_3">
<div class="cont-form">
<form ...
- 64. слайдер slick.
- JavaScript/jQuery
... jquery, т.к. слайдер использует эту библиотеку для своей работы.
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
...
- 65. верстка по сетке bootstrap (часть 3)
- CSS/CSS Основы
... позиционирования.
html разметка
<section class="icons">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 wrap-icons">
<div ...
- 66. красивая форма с индикатором заполнения.
- JavaScript/JavaScript Скрипты
... 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 ...
- 67. 3 основных способа верстки сайтов. часть #2
- CSS/CSS3
... элементов, не обращая внимания на пустые ячейки.
<div class="grid-wrap">
<div class="grid-item">title</div>
<div class="grid-item">image</div> ...
- 68. как сделать тень на css
- CSS/CSS Основы
... вас должны быть, а далее надо написать следующий html-код:
<div class="shadow-block">
<div class="sh-top"></div>
<div class="sh-rt"></div>
<div class="sh-sl"> ...
- 69. пишем расширение для браузера chrome для поиска по истории посещенных страниц
- JavaScript/JavaScript Скрипты
... <div id="extension">
<button id="openhistorybtn">open history</button>
</div>
<script src="popup.js"></script> ...
- 70. анимированная кнопка на чистом css
- CSS/CSS3
... создадим квадрат с пустыми блоками и ссылкой button внутри.
<div class="square">
<div></div>
<div></div>
<div></div> ...
- 71. круговой индикатор выполнения с html и css. часть 4
- CSS/CSS Основы
... добавление к html разметке нового блока div. добавим процентное число в индикатор выполнения.
<body>
<div class="circle-wrap">
<div class="circle"> ...
- 72. парсинг сайта вакансии на python. часть 2. отображение вакансий
- Python/Основы Python
... }
</style>
</head>
<body>
<div id="root"></div>
<script>
// карточка вакансии ...
- 73. модальное окно на bootstrap. стилизация
- CSS/CSS3
... называнием id у кнопки.
<div class="modal fade" id="examplemodal" tabindex="-1" role="dialog" aria-labelledby="examplemodallabel" aria-hidden="true">
<div class="modal-dialog" role="document">
...
- 74. метод queryselector в javascript
- JavaScript/JavaScript Основы
... методов queryselector и queryselectorall
посмотрите на следующий html:
<div id="main">
<div class="pic-container">
<img class="img-src" src="smiley.png" ...
- 75. как сделать div со 100% height
- CSS/CSS Основы
при блочной вёрстке часто требуется сделать у блока div высоту 100%. простым указанием height=100% в div не получится добиться желаемого результата, поэтому ...
- 76. выборка элементов в jquery
- JavaScript/jQuery
... управление элементами. например, может быть такая задача: выбрать все div с определённым классом и увеличить в них шрифт. увеличение шрифта - это ...
- 77. слайдер изображений на jquery без плагинов
- JavaScript/JavaScript Основы
... этой статье я сейчас приведу.
для начала разберём html-код:
<div id="container">
<div id="slider">
<h3>заголовок слайдера</h3>
...
- 78. полупрозрачный дизайн для бизнес карты
- CSS/CSS Основы
... готовые иконки телефона и конверта из библиотеки ionicons.
<div class="card">
<div class="content">
<div class="imgbx">
<img ...
- 79. ошибки новичков при верстке сайтов #2
- CSS/CSS Основы
... избегайте прописывать стили непосредственно в html тегах.
<div style="font-size: large;"></div>
в каких случаях можно применять инлайновые стили?
...
- 80. как сделать чашку с блюдцем на css
- CSS/CSS Основы
... фигуры. это мы сейчас и узнаем.
рисуем чашку
//html теги
<div class="container">
<div class="cup">
<div class="top">
<div ...
- 81. структура блочной вёрстки
- HTML/HTML Основы
... <link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">шапка сайта</div>
<div id="content">
<div id="left">левые блоки</div> ...
- 82. поворот карточки с картинкой в css
- CSS/CSS3
... карточки
html разметка
создадим div с классом wrapper, который обернёт всю карточку и займёт все пространство страницы. внутри div-а обёртки будет находится ...
- 83. микроразметка сайта schema.org
- HTML/HTML Основы
... обязательный атрибут itemscope и тип схемы разметки itemtype.
<div itemscope itemtype="https://schema.org/person"></div>
далее прописываются отдельные свойство схемы, ...
- 84. как сделать выпадающий список с красивым эффектом на css и jquery.
- JavaScript/jQuery
... приступим к созданию
в .html файле пропишем следующую структуру
<div class="drop">
<div class="option active placeholder" data-value="placeholder">
choose wisely
</div> ...
- 85. bootstrap 4. что такое jumbotrons.
- CSS/CSS Основы
... такое как баннер. давайте теперь узнаем, как написать jumbotrons.
<div class="container">
<div class="jumbotron"></div>
</div>
как видите, создать базовый jumbotron ...
- 86. как сделать спойлер на сайте
- JavaScript/JavaScript Основы
... классом list-header, а блоки с контентом - классом list-content.
<div class="list-group">
<div class="list-group-item list-header" data-name="spoiler-title">
заголовок ...
- 87. генератор паролей на javascript
- JavaScript/JavaScript Основы
... <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> ...
- 88. получить и изменить значение атрибута на jquery
- JavaScript/jQuery
... изображение. к установленным атрибутам, вернемся чуть позже.
<div class="imagewrap">
<div class="imageplace">
<img src="jquery_data_white.jpg" alt="футболка"> ...
- 89. настройки стрелок у slick слайдера (часть 3)
- JavaScript/jQuery
... для слайдера, внутри которого 6 слайдов с картинками.
<div class="slider">
<div class="slider__item">
<img src="img/slides/01.jpg" ...
- 90. как изменить шапку сайта (часть 2
- CSS/CSS3
... и языковое меню.
продолжим html разметку
в div с классом menu, лежат ссылки на страницы сайта, а в div с классом lang-menu, ссылки на разные языковые версии. ...
- 91. как добавить темную тему на сайт в bootstrap 5?
- JavaScript/JavaScript Основы
...
<div class="container mt-5">
<h1>cмены темы</h1>
<div class="form-check form-switch"> ...
- 92. верстка сайта с нуля. верстка портфолио. часть 3
- HTML/HTML 5
... контейнер.
<div class="container-well">
<h2>портфолио></h2>
<p>много сплю и ем, но я гарантирую, что вы полюбите меня таким, какой я есть.</p>
</div>
...
- 93. как сделать прелоадер на чистом css3.
- CSS/CSS3
... и рассмотрим в этой статье.
для начала создадим разметку
<div class="pre-loader">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div> ...
- 94. пример стилизации slick слайдера (часть 1)
- JavaScript/jQuery
...
// html разметка
<section class="wrap">
<div class="wedding">
<div class="wedding__item"><img src="wedding_01.jpg" alt=""></div>
<div ...
- 95. выпадающий мультиселект на html, css и javascript
- HTML/HTML Основы
... box-sizing: border-box;
}
</style>
</head>
<body>
<div class="accordion">
<div class="section">
<div class="section-header" onclick="togglesection('section1')">выбор типа 1</div> ...
- 96. трансформация сложенных карточек на css
- CSS/CSS Основы
... переменной (j) и указываем значение переменной (цифру).
<div class="container">
<div class="card" style="--i:-1">
<div class="content" style="--j:1">
<h2>card ...
- 97. иконки соц. сетей для сайта
- CSS/CSS3
... стилизовать под свой дизайн
сделаем html разметку
создадим контейнер div с классом box, внутри которого поместим пять пунктов списка ul. в каждый ...
- 98. верстаем круглые кнопки на css3.
- CSS/CSS3
... buttons</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</body> ...
- 99. скрывающееся левостороннее меню на bootsrap 5
- HTML/HTML Основы
... </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"> ...
- 100. как сделать блоки со слайдер эффектом на чистом css3.
- CSS/CSS3
... эффектом</title>
<link rel='stylesheet' href='css/style.css'>
</head>
<body>
<div id="page-wrap">
<h1>блоки со слайдер эффектом</h1>
<p>используются ...
- 101. верстка psd макета по bootstrap 4 сетке. часть 2.
- CSS/CSS Основы
...
переходим на сайт https://getbootstrap.com/ в раздел grid. мы определили у блока div классы "col-lg-3" "col-md-6", где col – колонка,lg и mg – большой и средний экран у ...
- 102. креативный эффект при наведении на изображения. часть 2
- CSS/CSS Основы
... его описание.
добавление в html-разметку контента
<div class="container">
<div class="clip clip1">
<div class="content"> ...
- 103. параметры по умолчанию в javascript. часть 2
- JavaScript/JavaScript Основы
... неопределенных значений
следующая функция creatediv() создает в теле документа (body) новый
элемент div с определенным стилем высоты, ширины и границы. ...
- 104. шина событий (eventbus) в javascipt
- JavaScript/JavaScript Основы
... </style>
</head>
<body>
<div id="app">
<div class="row">
<div class="column block block_a"> ...
- 105. как верстать сайт без макета
- HTML/HTML 5
... по макету.
<header class="header">
<div class="container-fluid">
<div class="row">
<div class="col-md-6"> ...
- 106. как сделать вкладки на чистом css
- CSS/CSS Основы
... собой. далее создадим три блока с содержимым табов tab__box.
<div class="wrap">
<div class="tabs">
<nav class="tabs__items">
<a ...
- 107. структура вёрстки для двухколоночного сайта
- HTML/HTML Основы
... вёрстки для двухколоночного сайта.
для начала html-код:
<div id="header">шапка сайта</div>
<div id="content">
<div id="left">левая колонка</div>
...
- 108. создание простого серверного приложения на python с использованием flask
- Python/Основы Python
... /* 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 --> ...
- 109. параллакс эффект. плагин simple parallax scrolling.
- JavaScript/jQuery
... data-image-src="/image.jpg", к которой хотите применить эффект.
<div class="parallax-window" data-parallax="scroll" data-image-src="/images/image.jpg"></div>
скопируем набор стилей и добавим в наш ...
- 110. скрывающееся меню сайта на html и css
- HTML/HTML 5
... </style>
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="profile"> ...
- 111. красивые табы на jquery.
- JavaScript/jQuery
... </head>
в самом же документе нужно создать структуру следующего вида:
<div id="tabs">
<ul>
<li><a href="#tabs-1" title="">первый таб</a></li> ...
- 112. круговой индикатор выполнения с html и css. часть 2
- CSS/CSS Основы
... <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="circle-wrap">
<div class="circle">
</div>
</div>
</body> ...
- 113. анимированный неоновый текст на css
- CSS/CSS Основы
... текст.
создание и стилизация текста
<div class="box">
...
<h2>neon text</h2>
</div>
@import url('https://fonts.googleapis.com/css2?family=monseratt:wght@600;700&display=swap'); ...
- 114. css позиционирование блоков
- CSS/CSS3
... перекрывает желтый, так как он в коде прописан последним.
<div class="block-yellow">исходная позиция
<div class="block-relative">относительная позиция- relative</div>
</div> ...
- 115. круговой индикатор выполнения с html и css. часть 3
- CSS/CSS3
... использовал 270 градусов.
добавим код в html:
<body>
<div class="circle-wrap">
<div class="circle">
<div class="mask half">
<div class="fill"></div> ...
- 116. верстка по сетке bootstrap (часть 4)
- CSS/CSS Основы
... прописав класс justify-content-center.
html код
<section class="cart">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-6">
<div ...
- 117. как разместить блок по центру в bootstrap 4
- CSS/CSS Основы
...
<div class="container-fluid d-flex h-100 justify-content-center align-items-center p-0">
<div class="row bg-white shadow-sm"> ...
- 118. обработка события click на css
- CSS/CSS Основы
... легко обработается через css.
для начала самый обычный html-код:
<div class="tabs">
<div class="content">содержимое 1</div>
<div>вкладка 1</div>
</div> ...
- 119. captcha и генератор случайных чисел на js
- JavaScript/JavaScript Основы
... контейнер с классом captcha, до кнопки «отправить».
<div class="captcha">
...
</div>
2. внутри контейнера создадим два блока для первой ...
- 120. автоматически загружаемый popup после загрузки страницы (часть #1)
- JavaScript/JavaScript Основы
... созданные классы, чтобы наш popup выглядел более привлекательно.
<div class="popup">
<div class="contentbox">
<div class="close"></div>
<div ...
- 121. анимированный фон с parallax эффектом
- JavaScript/JavaScript Основы
... изображения планеты создадим свой div с классом item . добавим data-depth с разными значениями скорости для движения планет.
<div class="space" id="space">
<div ...
- 122. изображения внутри треугольников
- CSS/CSS Основы
... container, куда поместим четыре блока div с изображениями. один блок с классом card - это будущий треугольник.
<div class="container">
<div class="card"> ...
- 123. извлечение данных из html формы с помощью javascript
- JavaScript/JavaScript Основы
... обязательно находится внутри тега form.
<form action="#" method="#" id="form">
<div>
<label>
имя:
<input ...
- 124. как прокрутить скролл у div до низа
- JavaScript/JavaScript Основы
... скролла вниз у div, для того чтобы пользователь сразу увидел новое сообщение в чате. сообщения чата, как вы уже догадались, находились в div. большинство ...
- 125. двухколоночная вёрстка с одинаковой высотой колонок
- CSS/CSS Основы
... для некоторых дизайнов это не подойдёт, и придётся мучаться с height: 100% у div, что всегда весьма проблемно, тем более, что можно сразу сделать двухколоночную ...
- 126. верстка формы входа (часть 2)
- CSS/CSS3
... бэм.
шаг 3.
под ссылкой – блок с аватаркой.
<div class="form__avatar">
<img src="img/avatar.png" alt="avatar">
</div>
.form__avatar {
width: 97px;
height: ...
- 127. перебор массивов циклом for.. of
- JavaScript/JavaScript Основы
... перебор dom элементов
сначала получим три div по имени тега, в консоль выведется html коллекция.
// html разметка
<div>1</div>
<div>2</div>
<div>3</div> ...
- 128. как получить элемент в js
- JavaScript/JavaScript Основы
... элемент по классу
задача 2: получить содержимое тега div по классу.
для наглядности, мы создали один div с классом any и второй обычный блок.
<div class="any">блок ...
- 129. манипуляции с элементами в js
- JavaScript/JavaScript Основы
... красный квадрат. как изменить css свойства у элемента через js?
<div class="red"></div>
.red {
width: 150px;
height: 150px;
background-color: ...
... #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
}
<div class="card">
текст карточки
<span class="card__badge">new</span>
</div>
совет: если вы планируете «приклеить» ...
- 131. верстка прозрачной формы входа
- HTML/HTML 5
... <form>
<div>
<input type="text" name="" required="">
<label>логин</label>
</div>
<div> ...
- 132. иконка гамбургер-меню на css+js
- CSS/CSS3
... три блока div с разными классами. контейнер нужен для отображения символа указателя, когда пользователь наводит указатель мыши на div блоки. первый ...
- 133. верстка по сетке bootstrap (часть 1)
- CSS/CSS Основы
... justify-content-end – выравнивает меню по центру на горизонтали
<div class="top-menu">
<div class="container-fluid">
<div class="row">
<div class="logo-wrap ...
- 134. модальное окно на css + js
- JavaScript/JavaScript Основы
... подсказывает пользователю, что сначала следует заняться окном.
<div id="mymodal" class="modal"> </div>
содержимое модального окна, состоящее из хедера, тела ...
- 135. социальная сеть на php: вывод домашней страницы.
- PHP/PHP Основы
... integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container">
@yield('content')
</div>
</body>
</html>
теперь вернемся в файл home.blade.php, ...
- 136. получение элементов по селектору в js
- JavaScript/JavaScript Основы
... примеров.
мы получим список (псевдомассив) всех элементов div с классами example_1 и example_2.
<div class="simple_one"></div>
<div class="example_1"></div>
<div class="simple_two"></div> ...
- 137. простой слайдер на javascript
- JavaScript/JavaScript Основы
... </style>
</head>
<body>
<div class="container mt-5">
<div id="customcarousel" class="carousel">
...
- 138. высота и ширина блока в css
- CSS/CSS Основы
... по высоте и ширине.
рассмотрим на примере блока div, сделаем html разметку.
<body>
<div></div>
</body>
поведение блоков по высоте ...
- 139. валидация формы на jquery
- JavaScript/jQuery
... integrity="sha384-wskhasgfghywdcbwn70/dfybj47jz9qbsmid/irn3ewghxqfzcsftd1lzcfmhktb" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-4">
<h2>валидация ...
- 140. маска ввода телефона на jquery
- JavaScript/jQuery
... margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<form action="" ...
- 141. генератор изображений с текстом на javascript
- JavaScript/JavaScript Скрипты
... <div class="container">
<h3 class="h3 my-4">генератор картинок</h3>
<div class="row"> ...
- 142. как сделать видео на сайте адаптивным
- HTML/HTML 5
... картинки, в таком случае, браузер покажет в плейере первый кадр видео.
<div class="movie-wrap">
<video class="movie" src="video/travaho.mp4" width="640" height="480" controls ...
- 143. пишем приложение на react
- JavaScript/JavaScript Основы
... { 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> ...
- 144. валидация формы на javascript
- JavaScript/JavaScript Основы
... <title>валидация формы</title>
</head>
<body>
<div class="container">
<form id="form" class="form"> ...
- 145. трёхмерный мир на чистом css
- CSS/CSS3
... translatez(-3em);
}
</style>
</head>
<body>
<div class="scene">
<div class="frontwall"></div>
<div class="leftwall"></div> ...
- 146. зависимый выпадающий список в react
- JavaScript/JavaScript Основы
... <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-tx8t27ecre3e/ihu7zmqxvncday5uikz4rekgixemed4m0jlfidpvg6uqki2xxr2" crossorigin="anonymous">
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html> ...
- 147. clearfix на css
- CSS/CSS Основы
... давайте разберём такой пример:
<div id="article">
<img src="img.jpg" alt="" style="float: left;" />
<p>текст статьи</p>
</div>
<div>подвал сайта</div>
...
- 148. пример верстки формы на css grid #4
- CSS/CSS Основы
... форма.
<section class="form_section">
<div class="container">
<form class="grid">
<div><input type="text" name="mailing" placeholder="mailing"></div> ...
- 149. создание движка на mvc. выводим страницы. часть 2.
- PHP/PHP Основы
... <title>test</title>
<link rel="stylesheet" href="public/css/default.css">
</head>
<body>
<div id="header">
header
</div>
<div id="content"></div>
смотрите! у нас подключается файл ...
- 150. пример адаптивной верстки на flexbox (#1)
- CSS/CSS Основы
... класс удаляете из html и css кода.
<section>
<div class="container bg_pink">container</div>
</section>
зададим для контейнера максимальную ширину ...
- 151. создание qr-кода на javascript
- JavaScript/JavaScript Основы
...
<div id="app">
<h1 class="p-3">генератор qrcode</h1>
<div class="text">
<form> ...
- 152. эффект раскрытия обложки при наведении курсора
- CSS/CSS Основы
... (карточки): имя человека, должность и иконки на социальные сети.
<div class="card">
<div class="imgbox">
<img src="img1.jpg">
<img src="img2.jpg"> ...
- 153. анимация появления текста на css
- CSS/CSS Основы
... абсолютно одинаковыми по форме, но разными по содержанию.
<div class="container">
<div class="text">приходи в школу</div>
<div class="text">учись ...
- 154. css-эффекты. градиентная рамка у блока
- CSS/CSS Основы
... в конце урока станет понятно, зачем он был нужен.
<div class="container">
<div class="box">
<span></span>
<div ...
- 155. как сделать выпадающий блок на чистом css?
- CSS/CSS Основы
... <h1>программирование на javascript с нуля до гуру 2.0</h1>
<div class="toggler">
<input type="checkbox" id="toggler__checkbox-id-1" class="toggler__checkbox"> ...
- 156. css grid. практические примеры #3
- CSS/CSS Основы
... сетке, обратимся к нему через псевдокласс nth-child(1).
<div class="container">
<div class="item">item-1</div>
<div class="item">item-2</div> ...
... </style>
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="menu-btn"> ...
- 158. дизайн карточки на чистом css
- CSS/CSS Основы
... integrity="sha512-5a8nwdmowrsz20fdsjczguidubr8lipyu+wymtzp1lmy9g6oc7hlzv156xqnsgnuztymefftcsfh/tnje/+xbg==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<div class="card">
<div class="circle">
<div class="imgbx">
<img ...
- 159. анимированный footer у веб-сайта (продолжение)
- CSS/CSS Основы
... добавим в html-код четыре волны с разными идентификаторами.
<div class="waves">
<div class="wave" id="wave1"></div>
<div class="wave" id="wave2"></div> ...
- 160. красивый hover эффект для блока
- CSS/CSS Основы
... content с информацией и точно такой же иконкой (блок icon).
<div class="container">
<div class="box">
<div class="imgbx">
<img ...
- 161. адаптивное мобильное меню для сайта (часть 1)
- JavaScript/JavaScript Основы
... возникло ситуации, когда белые буквы стоят на белом фоне.
<div class="header">..</div>
.header {
font-family: tahoma, sans-serif;
position: ...
- 162. необычный эффект при наведении на карточку
- CSS/CSS Основы
... карточек, а замена лиц будет происходить с помощью css-свойств.
<div class="container">
<div class="card">
<div class="face face1">
<div ...
- 163. пример простого слайдера на javascript (#1)
- JavaScript/JavaScript Основы
... всю конструкцию в центре страницы.
// html разметка
<div class="container">
...
</div>
// css стили
.container {
max-width: 1000px;
margin: ...
- 164. html шаблон для портфолио
- HTML/HTML 5
... единственный, если работ в портфолио больше, то ряды можно добавить.
<div class="row">…</div>
внутри ряда идут четыре столбцы, где один столбец – одна ...
- 165. рисуем капли воды с помощью css
- CSS/CSS Основы
... через блочный тег div. пропишем три блока с классом drop. каждый из таких блоков в будущем станет каплей.
/ * html разметка * /
<div class="drops">
<div ...
- 166. верстка сайта с нуля. трехколоночный макет. часть 4
- HTML/HTML 5
... "забит" div-ами. разбираться в таком коде было крайне тяжело, приходилось ставить много комментариев. в современной блочной верстке применять тег div ...
- 167. работа с data атрибутами в html/css/js
- JavaScript/JavaScript Основы
... может быть любой, слова должны разделяться через дефис.
<div data-is-active-color="red"></div>
пример стилизации элементов с data атрибутом
мы можем ...
- 168. как вывести текст в javascript
- JavaScript/JavaScript Основы
... в javascript.
<div id="text_out">
<p id="text_change">заменить текст</p>
<hr>
<button onclick="text_out()" class="btn btn-danger">заменить текст</button>
</div>
заменить ...
- 169. адаптивная верстка на flex css
- CSS/CSS3
... нижнем блоке родителя (section) находятся в свою очередь ещё три блока ребенка (div id="item"). в каждом блоке ребенке есть картинка, подзаголовок, текстовый ...
- 170. ошибки новичков при верстке сайтов #4
- CSS/CSS Основы
... тоже будет полупрозрачным. что не есть хорошо.
// html
<div>
<div class="black">
<h1>
свойство ...
- 171. как сохранить данные из html contenteditable на сервере в php?
- PHP/PHP Основы
... мы рассмотрим с вами один из способов отправки на сервер содержимого
div блока с атрибутом contenteditable.
contenteditable - это атрибут, который будучи применный ...
- 172. как расположить картинку внутри силуэта
- CSS/CSS Основы
... высота ограничивают размеры вставляемых изображений.
<div class="container">
<div class="imgbx">
<img src="turtle.jpg">
...
- 173. блок с функцией "read more" на javascript
- JavaScript/JavaScript Основы
... контейнера поместим блок card с иконкой, текстом и ссылкой more.
<div class="container">
<div class="card">
<div class="icon">
<img ...
- 174. позиционирование текста на картинке в css
- CSS/CSS3
... управлять ими, прописывая свойства в дивах.
<div class="container">
<img src="vegetables.png" alt="vegetables">
<div class="left">лук</div>
<div class="center">картошка</div> ...
- 175. регулярные выражения в python: модуль re простыми словами с примерами
- Python/Основы Python
... print(m.group("name"), m.group("domain"))
# test.user mail.com
# test2 mail.ru
# жадность vs ленивость
html = "<div>one</div><div>two</div>"
print(re.findall(r"<div>.*</div>", html)) # жадно: один большой ...
- 176. всплывающее popup окно после нажатия на кнопку
- JavaScript/JavaScript Основы
... параграф с текстом
поле для ввода email
кнопка подписки
<div id="popup">
<div class="content">
<img src="email.png">
<h2>join ...
- 177. креативный дизайн блока на css
- CSS/CSS Основы
... возьмем из готовой библиотеки iconicons, указав ее название.
<div class="container">
<div class="card">
<div class="icon">
<ion-icon ...
- 178. как сделать вкладки в html
- JavaScript/JavaScript Основы
... кнопке отработает эта функция, первым аргументом события будет - event.
<div class="tab">
<button class="tablinks" onclick="opencity(event, 'москва')">москва</button> ...
- 179. эффект многослойности при наведении на карточку
- CSS/CSS Основы
... которого поместим карточку с изображением и текстом.
<div class="box">
<div class="card">
<div class="imgbx">
<img ...
- 180. анимация светящегося куба (3d эффект)
- CSS/CSS Основы
... основание куба (пятая сторона) не будет показываться вообще.
<div class="cube">
<div class="top"></div>
<div>
<span ...
- 181. креативная css анимация масштабирования
- CSS/CSS Основы
... невидимого фронта. в финальном коде никаких рамок не будет.
<div class="container">
<div class="box">
<div class="circle"></div> ...
- 182. css свойство filter grayscale на практике
- CSS/CSS3
... .holder с фотографиями с классом img-1.
html код целиком:
<div id="img-wrap">
<div class="holder">
<img src="photo_01.jpg" ...
- 183. креативный эффект при наведении на изображения. часть 1
- CSS/CSS Основы
... пустых блока, которые в дальнейшем заполним картинками.
<div class="container">
<div class="clip clip1"></div>
<div class="clip clip2"></div> ...
- 184. css свойство position: sticky
- CSS/CSS3
... пользователь докрутил.
// схематичная html разметка
<div class="sticky-first">
sticky position #1
</div>
<div>
<h3>
несколько ...
- 185. перемещение placeholder над полем ввода при фокусе
- CSS/CSS Основы
... но с типом "submit".
<div class="container">
<h2>premium subscription</h2>
<form>
<div class="inputbox">
<<input ...
- 186. оптимизация потока документа в веб-разработке
- HTML/HTML Основы
... left: 100px;
}
</style>
</head>
<body>
<div class="absolutely-positioned">
этот блок абсолютно позиционирован и находится вне потока документа. ...
- 187. верстка таблицы (scss + flexbox)
- CSS/CSS Основы
... в общем flex-контейнере advantage.
<div class="advantage">
<table class="advantage-table"></table>
<div class="advantage-users">список пользователей</div> ...
- 188. свойство transform-origin на примере
- CSS/CSS Основы
... расположенных в тегах p.
<section class="section">
<div class="sticker">
<div class="sticker_move">
<div class="title">pizza ingredients</div> ...
- 189. анимация рамки на css
- CSS/CSS Основы
... span. каждый span соответствует одной стороне квадрата.
<div class="container">
<div class="bg-img">
<div class="box">
<span></span> ...
- 190. три эффекта наведения на кнопку
- CSS/CSS Основы
... выравнивания их по центру. один блок - одна кнопка.
<div class="wrapper">
<div class="buttonleft"><span>left</span></div>
<div class="buttonoverlay"><span>center</span></div> ...
- 191. простой таймер обратного отсчета на javascript
- JavaScript/JavaScript Основы
... </head>
<body>
<div>регистрация на мероприятие будет закрыта через <span class="time">00:00:20</span> сек.</div>
<div>регистрация на мероприятие будет закрыта через <span class="time">00:00:12</span> сек.</div> ...
- 192. создаем выпадающее боковое меню на html, css и javascript
- JavaScript/JavaScript Основы
... .submenu-item {}
</style>
</head>
<body>
<div class="container">
<aside class="sidebar-menu" id="sidebarmenu"> ...
- 193. верстка формы + скрипт выбора даты
- CSS/CSS3
... пользователь
html структура
<div class="booking_form">
<h2>забронировать визит</h2>
<form action="#">
<div class="input_contact">
<input ...
- 194. реализация бесконечной прокрутки на javascript
- JavaScript/JavaScript Основы
... <body>
<div id="infinite-scroll">
<div>
<script>
for( let i = 0; i < 100; i++ ) ...
- 195. html5 формы и валидация: практическое руководство с примерами
- HTML/HTML 5
... action='/signup' method='post' novalidate>
<fieldset>
<legend>регистрация</legend>
<div class='field'>
<label for='email'>email</label>
<input id='email' name='email' type='email' ...
- 196. пример верстки простой секции на css grid #3
- CSS/CSS Основы
... колонке brand-right - фотография.
<section class="section-brand">
<div class="container">
<div class="brand-left">
<h2>о бренде</h2> ...
- 197. модальное окно на js
- JavaScript/JavaScript Основы
... class="more">отправить заявку</button>
<!--модальное окно-->
<div class="modal">
<div class="modal-header">
<span class="close">×</span> ...
- 198. html5 data-атрибуты (data-*): практическое руководство с примерами
- HTML/HTML 5
... использовать для стилизации состояний и небольших подсказок.
<div class="tab" data-state="active">профиль</div>
<div class="tab" data-state="inactive">настройки</div>
.tab[data-state="active"] ...
- 199. css эффекты при наведении на картинку
- CSS/CSS3
... под текстом – синий. у тега a, вместо решетки поставьте url.
<div class="row">
<div class="column">
<figure class="imghvr-slide-up">
<img ...
- 200. выравнивание по центру блока внутри блока
- CSS/CSS3
... будут только стили.
способ первый
<div class="block">
<img class="icon first" src="support.png" alt="">
</div>
положение изображения автоматически ...
- 201. как создать аккордеон на js
- JavaScript/JavaScript Основы
... угодно. в нашем случае там находится параграф с текстом.
<div class="accordion">
<div class="contentbx">
<div class="label">list one</div>
<div ...
- 202. компонент "пользователь пишет сообщение" на чистом css
- CSS/CSS Основы
... </style>
</head>
<body>
<div class="bubble">
<div class="point"></div>
<div class="point"></div> ...
- 203. css box-sizing и блочная модель: как работает border-box на практике
- CSS/CSS Основы
... }
.border-box { box-sizing: border-box; background: #d8f7e1; }
<div class="demo content-box">content-box: фактическая ширина 344px (300 + 20 + 20 + 2 + 2)</div>
<div class="demo border-box">border-box: фактическая ...
... структура
<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 ...
- 205. bootstrap 4. утилиты и типография.
- CSS/CSS Основы
... сделаем его голубого цвета, а текст – белого:
<div class="jumbotron jumbotron-fluid bg-info text-white" style="background: #aaa;">
<div class="container">
<h1>добро пожаловать ...
- 206. что такое гибкая сетка в адаптивной верстке?
- HTML/HTML 5
... начала мы должны сделать хоть и элементарную, но html разметку.
<div id="page">
<div class="blog section">
<div class="main"></div>
<div class="sidebar"></div> ...
- 207. как сделать 404 страницу
- HTML/HTML 5
... слой <body> – сама картинка, средний в теге <div> – полупрозрачный блок затемнения и верхний <div> – текст. наша задача задать нужное позиционирование ...
- 208. возникновение события при изменении checkbox на javascript
- JavaScript/JavaScript Скрипты
... <body> и </body>):
<div>
<input type = 'checkbox' id = 'cb1' onchange = 'showorhide("cb1", "cat1");'/>показать содержимое категории 1
<br />
<div id = 'cat1' style = 'display: ...
- 209. изменение размеров div на javascript
- JavaScript/JavaScript Основы
мы с вами когда-то разбирали перемещение div на javascript, а сегодня мы разберём изменение размеров div на javascript, которое так же может быть очень удобно ...
- 210. как прижать футер к нижней грани страницы(позиционирование).
- CSS/CSS Основы
... нижней грани страницы.
итак, сначала рассмотрим разметку.
<div class="wrapper">
<div class="header">
<p>это верхняя часть страницы</p>
...
- 211. всплывающее окно. pop-up на jquery.
- JavaScript/jQuery
... <div class="content">
<button class="show_popup blue_btn" rel="popup1">отправить письмо</button>
</div>
...
- 212. скрипт галереи + слайд-шоу на javascript
- JavaScript/JavaScript Скрипты
... delay);
}
</script>
код html (вставлять между тегами <body> и </body>):
<div>
<p style = 'text-align: center;'>
<img id='bigimgslide' src='images/javascript/space_1.jpg' ...
- 213. как сделать аккордион на чистом css3.
- CSS/CSS3
... <body>
<div class="container">
<ul class="accordion">
<li>
<a href="#first" class="accordion-header">первый</a>
<div class="accordion-content" ...
- 214. гамбургер меню на css или js? часть 1
- JavaScript/jQuery
... код в html:
<nav>
<div class="wrapper">
<!-- меню гамбургер, при клике, развернутся пункты меню -->
<div class="menuburger">меню</div> ...
- 215. красивые и эффектные слайдеры на jquery.
- JavaScript/jQuery
... вашего контейнера.
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;"> ...
- 216. как прижать футер к низу страницы(табличный способ).
- CSS/CSS Основы
... страницы, и высота его сможет быть динамичной.
html верстка:
<div class="wrapper">
<div class="header">
this is the header
</div>
<div class="content"> ...
- 217. как установить иконки загрузки на чистом css.
- CSS/CSS3
... loaders.min.css
вставьте подходящее число div'ов в этот элемент
создайте элемент и добавьте класс анимации(например, <div class="loader-inner ball-pulse"></div>
...
- 218. изогнутая тень с помощью псевдоэлементов
- CSS/CSS Основы
... мы создали обертку wrap для блока с тенью curved shadow.
<div class="wrap curved">
<div class="shadow">
<div>curved shadow</div> ...
- 219. показ сайта на различных девайсах
- CSS/CSS3
... применения графики. для этого создадим div с классом smartphone (изображающий сам смартфон), внутри которого поместим другой div с классом content (изображающий ...
- 220. пример @keyframes css анимации
- CSS/CSS Основы
... невидимый
лоадер, в виде полукруга
мячик - просто круг
<div class="container">
<div class="loader">
<div class="ball"></div> ...
- 221. как сделать текст в html (топ 10 запросов)
- HTML/HTML 5
... прилипает к левому краю. свойство text-align, внутри тега div, выравнивает текст по центру.
<div>поставьте меня в центр</div> // html
div {
text-align: ...
- 222. пример бэм верстки на flexbox
- HTML/HTML 5
... фона и размеры у всего блока.
<section class="info">
<div class="info__icon"></div>
<h2 class="info__title">личная информация</h2>
<div ...
- 223. таймер обратного отсчета flipclock
- JavaScript/jQuery
... html код
зададим html структуру. создадим div с классом clock, где будут находиться сам счётчик. под ним зададим div с классом message, в этом блоке будет выводиться ...
- 224. примеры теней на css.
- CSS/CSS3
... shadow</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="shadow"></div>
</body>
</html>
а теперь перейдем к css
body {
background: #ccc; ...
- 225. эффект печатающегося текста на сайте
- JavaScript/jQuery
... мы создадим два div-а, в одном из них с классом .box мы поместим растянутый на всю ширину и высоту страницы фон-картинку. а в другом div-е с классом .top-text, ...
- 226. как сделать титры на сайте с помощью jquery.
- JavaScript/jQuery
... </head>
<body>
<a href="#creditos" name="creditos">ссылка</a>
<div id="titles">
<div id="credits">
<div id="the-end">petpaw.co</div>
<br ...
- 227. что такое less?
- CSS/CSS Основы
... href="style.less">
<script src="less.js"></script>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li><a href="#">главная</a></li> ...
- 228. как сделать таблицу адаптивной
- CSS/CSS3
... таблицу адаптивной.
демонстрация адаптивной таблицы.
html разметка
<div>
<table>
<tr>
<th>имя</th>
<th>фамилия</th>
<th>баллы</th> ...
- 229. анимированный текст по кругу на javascript
- JavaScript/JavaScript Основы
... html-разметка состоит из круга, логотипа дизайнера и текста.
<div class="circle">
<div class="logo"></div>
<div class="text">
<p>kristen ...
- 230. эффект увеличивающегося изображения при клике на css и javascript
- JavaScript/JavaScript Основы
... <!-- изображения нужно добавлять в этот блок -->
<div class="images">
<img src="https://myrusakov.ru/images/ue5-cover.png" alt="image" onclick="displaymodal(this);"> ...
- 231. верстка портфолио на flexbox (часть 1)
- CSS/CSS3
... margin: 0;
padding: 0;
}
секция с описанием
html код
<div class="container">
<div class="section_header">
<h3>what we do</h3>
<h2>some ...
- 232. необычный эффект наведения для дизайна веб-сайтов
- CSS/CSS Основы
... чтобы изображения встали в ряд, а не друг под другом.
<div class="container">
<div class="box">
<img src="img1.png">
</div> ...
- 233. валидация формы на js
- JavaScript/JavaScript Основы
... ними мы и будем работать. добавим каждому полю name со своим значением.
<div class="input_contact">
<input type="text" placeholder="имя" name="first_name">
<input ...
- 234. меню аккордеон на js
- JavaScript/JavaScript Основы
... текстом.
<button class="accordion">вопрос 1</button>
<div class="panel">
<p>ответ на вопрос 1...</p>
</div>
<button class="accordion">вопрос 2</button>
<div class="panel"> ...
- 235. как сделать всплывающую форму
- JavaScript/JavaScript Основы
... сделать всплывающее окно с любым кодом, поскольку сначала мы прописываем тег div, который может служить контейнером и для любых других элементов, а не ...
- 236. как сделать купон на css
- CSS/CSS3
... отдельный, чтобы раскрасить его в другой цвет.
<div class="coupon">
<img src="coupon.jpg" alt="coupon">
<div class="box">
<h2>скидка -20%</h2> ...
- 237. отмена повторной отправки формы
- PHP/PHP Основы
... method="post">
<div>
<input type="text" name="x" />
<br />
<input type="submit" value="возвести в квадрат" name="sqr" />
</div>
</form> ...
- 238. как сделать прогресс бар
- JavaScript/JavaScript Основы
... видно, что индикатор загрузки представляет собой зеленый блок div внутри серого div-а. зеленая полоска постепенно должна закрыть собой серую. запускается ...
- 239. верстаем карточку с эффектом раскрывающейся шторки при наведении на css
- CSS/CSS Основы
... </style>
</head>
<body>
<div class="container">
<div class="content">
<h1>заголовок</h1> ...
- 240. пользовательский чекбокс на javascript
- JavaScript/JavaScript Основы
... не отображается на странице без написания css-кода.
<div class="checkbox">
<div class="inner">
<div class="toggle"></div> ...
- 241. стилизация radio на css
- CSS/CSS3
... связку input+label в div с классом radio, то же самое сделаем для второй связки. присвоим так же классы input и label, для их дальнейшей стилизации.
<div class="radio"> ...
- 242. выравнивание элементов в html
- HTML/HTML Основы
... создаются с помощью тега <div>. то есть всё, что необходимо поместить в определённый контейнер помещается внутри тега <div>. а уже у этого тега ...
- 243. частичная отмена float в css
- CSS/CSS Основы
... покажу её решение.
итак, давайте разберём вот такой код:
<div id="left">левые блоки</div>
<div id="right">
<img src="images/img.jpg" alt="" />
<p>текст ...
- 244. анимации модальных окон на javascript.
- JavaScript/JavaScript Скрипты
... <div id="animatedmodal">
<!-- это важно! чтобы закрыть модальное окно, имя класса должно совпадать с именем, данным в id
class="close-animatedmodal" -->
<div ...
- 245. как можно прочитать и получить данные из xml-файла в javascript?
- JavaScript/JavaScript Основы
... </table>
</template>
<div class="container">
<div class="jumbotron mt-3" style="text-align: center;">
<h1 id="headertitle">список задач</h1> ...
- 246. создание движка на mvc. заканчиваем работу с чатом.
- PHP/PHP Основы
...
$.post(url, data, function(o) {
$("#listinserts").append('<div>' + o.text + '<a href="#" class="del" rel="'+ o.id +'">x</a></div>');
}, 'json');
добавьте также ссылку ...
- 247. модальное окно на чистом css
- CSS/CSS Основы
... #openclosecheckbox:checked~#content {
display: block;
}
</style>
<body>
<div class="simple-modal">
<label class="simple-modal__label btn btn-primary" for="openclosecheckbox">показать картинку</label> ...
- 248. вывод диапазона дат в javascript
- JavaScript/JavaScript Основы
... браузер и предназначен для вывода текущей даты.
<div>
<input type="date" id="startdate">
</div>
<div>
<input type="date" id="enddate">
</div> ...
- 249. стилизация радиокнопок на css
- CSS/CSS3
... радиокнопка становится выбранной, необязательно целиться в сам кругляш.
<div class="form-group">
<label>
<input type="radio"> ...
- 250. css фреймворк materialize (navbar)
- CSS/CSS Основы
... active в тег li, чтобы обозначить текущую страницу.
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo"><img src="logo.png" alt=""</a> ...
- 251. адаптивная навигация на html и css
- HTML/HTML 5
... <!-- логотип сайта -->
<div class="brand-title">мой сайт</div>
<!-- кнопака - гамбургер меню --> ...
- 252. 3 способа вертикального выравнивания блока по центру
- CSS/CSS3
... отношению к браузеру, который и будет выступать его родителем.
<div class="block"></div>
html,
body {
width: 100%;
height: 100%;
}
.block ...
- 253. угловая лента на css
- CSS/CSS Основы
... позиционирование блока с ленточкой относительно окна браузера.
<div class="wrap">
<div class="box">
<div class="ribbon">
best ...
- 254. css grid свойство align-items
- CSS/CSS Основы
... увидеть на codepen. ниже я приведу код одной такой ячейки.
<div class="container">
<div class="box top-left">
<div class="item">top ...
- 255. как сменить фон при наведении на ссылку меню
- JavaScript/JavaScript Основы
... имеем дело с динамической сменой фона с помощью javascript.
<div class="navigation">
<div class="navarea">
<ul>
<li><a ...
- 256. верстка прозрачной логин формы
- CSS/CSS Основы
... разобраться.
html код
<div class="box">
<h2>login</h2>
<form>
<div class="inputbox">
<input ...
- 257. как правильно использовать теги div, section и article.
- HTML/HTML 5
... как правильно использовать теги div, section и article в html5.
помимо всем известного и очень часто используемого тега div, в html5 появились новые, семантические ...
- 258. callback функция в js
- JavaScript/JavaScript Основы
... черного цвета, необходимо все три перекрасить в розовый цвет.
<div class="box">элемент 1</div>
<div class="box">элемент 2</div>
<div class="box">элемент 3</div> ...
- 259. как сделать фон в css
- CSS/CSS Основы
... вида фона, добавляя к селектору bg_example разные css свойства.
<div class="bg_example"></div> // html разметка
// css код
.bg_example{
width: 400px;
height: 300px;
}
это ...
- 260. css3 трансформации.
- CSS/CSS3
... <title>transforms</title>
<meta charset="utf-8">
</head>
<body>
<div class="block">css3 трансформации</div>
</body>
</html>
и зададим первоначальные стили
...
- 261. карусель на чистом js
- JavaScript/JavaScript Основы
... вставим сами картинки и две кнопки – вперед / назад.
<div id="gallery">
<div class="photos">
<img src="img/woman.jpg"> ...
- 262. показ случайной цитаты в javascript
- JavaScript/JavaScript Скрипты
... <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="random-phrase">
<div id="phrase"></div>
<div id="author"></div> ...
- 263. движение фоновой картинки внутри рамки
- CSS/CSS Основы
... дорого, хоть и сделана на чистом css.
html разметка
<div class="planet planetearth">
<div class="container">
<div class="earth"></div> ...
- 264. как сделать интро в стиле "звёздных войн".
- CSS/CSS Основы
... href="/path/to/starwarsintro.css">
<!-- поместите в body, где вы хотите, чтобы было интро -->
<div class="star-wars-intro">
<!-- синий интро текст -->
<p class="intro-text">
...
- 265. валидация номера телефона на js
- JavaScript/JavaScript Основы
... красной рамкой.
html форма
<div class="form">
<form>
<h2 class="form__title">валидация номера телефона</h2>
<div class="form__input">
<input ...
- 266. приложение для просмотра погоды на vuejs
- JavaScript/JavaScript Основы
... для приложения. например, компонент с именем weatherapp.vue.
<template>
<div>
<h1>погода на улице</h1>
<input v-model="city" @input="fetchweather" placeholder="введите название города" /> ...
- 267. расширяемое поле для поиска на javascript
- JavaScript/JavaScript Основы
... поискового поля
создадим кастомное поисковое поле, используя только теги div.
<div class="search">
<div class="icon"></div>
<div class="input"> ...
- 268. анимированная кнопка обратного звонка
- CSS/CSS3
... звонка:
демо
пример формы в модальном окне:
html код:
<div class="pulse">
</div>
иконка с сайта font awesome
для начала необходимо подключить ...
- 269. создаем видеоплеер c html и javascript
- JavaScript/JavaScript Основы
... }
</style>
</head>
<body>
<div id="videocontainer">
<h2>мой видео плеер</h2> ...
- 270. material design: современный подход к дизайну интерфейсов
- HTML/HTML 5
... принципов material design рассмотрим пример карточки с информацией:
<div class="card">
<div class="card-header">
<h3>заголовок карточки</h3> ...
- 271. как создать custom template на wordpress
- Софт/Софт для создания сайтов
...
а после названия страницы, создадим форму контактов.
<div>
<form>
<div>
<label>ваше сообщение</label>
<input ...
- 272. селекторы css
- CSS/CSS Основы
... запутанно, не спорю, но давайте разберёмся на примере<div><h2>заголовок в контейнере</h2></div>элемент, в данном случае - это текст "заголовок ...
- 273. использование getboundingclientrect в javascript
- JavaScript/JavaScript Основы
... </head>
<body>
<div id="myelement" style="width: 200px; height: 100px; background-color: lightblue;"></div>
<script>
const element = document.getelementbyid('myelement'); ...
- 274. полупрозрачный текст на фоне в css
- CSS/CSS3
... начнем с html разметки:
<body>
<div>
<h1>полупрозрачный текст на фоне</h1>
</div>
</body>
заголовок h1 мы поместили ...
- 275. виды css селекторов
- CSS/CSS Основы
... элемента мы увидим одинаково оформленный текст.
// html разметка
<div>универсальный</div>
<h3>css</h3>
<p>селектор</p>
// css стили
* {
font-size: ...
- 276. верстка сайта с нуля. верстка портфолио. часть 2
- HTML/HTML 5
... поместим блок div с заголовком, текстом и кнопкой.
вставляем код целиком в наш html документ, после тега .
<section class="mops_bg">
<div class="wrap">
<div ...
- 277. зачем нужен псевдокласс target в css3.
- CSS/CSS3
... посмотрим сразу на пример.
к примеру, у нас есть такой html код:
<div id="id1">какой-то текст</div>
теперь мы можем сослаться на данный элемент из строки ...
- 278. исключения в python: понятное руководство по try/except/else/finally с примерами
- Python/Основы Python
... число')
можно группировать несколько типов:
try:
result = 10 / int('0')
except (zerodivisionerror, valueerror) as e:
print('ошибка вычислений:', e)
блоки else и finally
else выполняется, ...
- 279. три способа создать html элемент в javascript
- JavaScript/JavaScript Скрипты
... метода createelement().
в js файле прописываем код:
<!--
создадим html-элемент div в javascript, вызвав метод createelement() для объекта документа . ...
- 280. css прозрачность (opacity vs rgba)
- CSS/CSS3
... существенный недостаток, текст не так хорошо выделяется.
<div>
<div class="blue">
<h1>
прозрачность ...
- 281. как сделать карточку товара на css
- CSS/CSS3
... браузера. сама карточка – это тег div с классом card. разумеется, что в данном примере мы могли бы и не присваивать класс тегу div, ведь он у нас один на странице. ...
- 282. как получить селектор в jquery
- JavaScript/jQuery
... вложенные селекторы
выбрать все параграфы, вложенные в тег "div".
$(document).ready(function () {
$("div p").css("color", "red");
});
html-код
<div>
<p>вложенный ...
- 283. обработчик и объект событий в js
- JavaScript/JavaScript Основы
... 'red';
});
узнаем координаты мыши при клике по блоку.
<div>узнать координаты</div>
<script>
let div = document.queryselector('div');
div.addeventlistener('click', ...
- 284. свойство appearance в css.
- CSS/CSS Основы
... любого элемента похожим на стандартный вид.
рассмотрим пример.
<div>это блок div</div>
теперь применим такие стили
div {
appearance: button;
}
теперь ...
- 285. примеры анимации блока и картинки в css
- CSS/CSS3
... анимация составляется для конкретного элемента, например для блока div.
<div class="square"></div>
теперь нарисуем квадрат, привяжем к нему название ...
- 286. перетаскиваемый div на javascript
- JavaScript/JavaScript Основы
... делается перетаскиваемый div на javascript.
давайте не будем лить воду, а сразу рассмотрим прокомментированный код:
<div id="block" style="border: 1px solid #000; cursor: ...
- 287. прозрачная панель навигации в css
- CSS/CSS3
... codepen.
html-код прозрачной панели навигации
в тег nav мы поместим блок div с логотипом компании и список ul с ссылками, которые являются пунктами ...
- 288. работа с библиотекой jquery
- JavaScript/jQuery
... структуру для выборки элементов.
<header>
<div>
<h3 class="brand">привет, мир!</h3>
</div>
</header>
<main>
<p>следуйте ...
- 289. как сделать фиксированное меню
- CSS/CSS3
... наше меню.
<div class="nav">
<a href="#home">главная</a>
<a href="#news">новости</a>
<a href="#contact">контакт</a>
</div>
создадим ...
- 290. эффект увеличения картинки.
- CSS/CSS Основы
... которую мы умножаем на саму себя, чтобы сгенерировать правильное число div.grid-item, которое ведет себя как контроллер, который сдвигает картинку, ...
- 291. плавный переход в css - transition на примерах
- CSS/CSS3
... css. кнопка</h2>
<div>
<a class="button" href="#">заказать работу</a>
</div>
.button {
background-color: ...
- 292. 5 нововведений в css4.
- CSS/CSS Основы
... перечислять внутри него не один, а сразу несколько тегов:
:not(p, h1, div) // то же самое, что и :not(p):not(h1):not(div)
2. :has()
это очень интересный селектор, открывающий ...
- 293. переменные в css
- CSS/CSS Основы
... color: var(--color);
width: var(--width);
}
div {
background-color: var(--bgcolor);
color: var(--color);
...
- 294. аватар внутри круга на css
- CSS/CSS Основы
...
<div class="box">
<div class="circle">
<img src="img1.png">
</div>
<img src="img1.png">
</div> ...
- 295. семантические теги
- HTML/HTML 5
... правильная верстка. правильная верстка может быть построена на тегах div и при этом быть валидной, не кривой и хорошо адаптироваться. семантические ...
- 296. верстка макета на sass
- CSS/CSS Основы
... <section class="section service--wrapper">
<div class="container">
контент
</div>
</section>
.container{
max-width:960px; ...
- 297. анимация для меню с индикатором. часть #1
- JavaScript/JavaScript Основы
... вставим код с иконками между тегами div. а перед закрывающим тегом body вставляем две ссылки из данной библиотеки.
<div class="navigation">
<ul>
<li ...
- 298. дочерние селекторы в css
- CSS/CSS Основы
... давайте приведу небольшой пример. пусть у нас есть такой html-код:
<div class="container">
<div>
<p>первый абзац</p>
</div>
<p>второй ...
- 299. плагин для табов для frontend разработчика
- JavaScript/jQuery
... дефолтного, но тогда не забудьте изменить это название и в jquery коде.
<div id="tab-container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a ...
- 300. css анимация секции с эффектом волны
- CSS/CSS Основы
... внутри (теги span) и контентную часть с заголовком.
<section>
<div class="wave">
<span></span>
<span></span> ...
- 301. выноски в стиле комиксов
- CSS/CSS Основы
... классы (thought и speech).
<div class="bubble thought">выноска в стиле комиксов для иллюстрации мыслей персонажа, напоминающая «пузырёк».</div>
<div class="bubble speech">выноска ...
- 302. css эффект пикселизации изображения
- CSS/CSS Основы
... и сохраним под новым именем female_pixel.jpg.
<div class="box">
<img src="female.jpg">
</div>
<div class="box pixel">
<img src="female_pixel.jpg"> ...
- 303. как сделать интерактивное сравнение двух фотографий на jquery.
- JavaScript/jQuery
... создадим контейнер с двумя фотографиями
<div id="container1">
<img src="sample-before.png">
<img src="sample-after.png">
</div>
когда картинки будут загружены, ...
- 304. выезжающее боковое меню. часть 1.
- CSS/CSS3
... бургер-иконку, копируем код и вставляем между тегами span,.
<div class="wrapper">
<div class="menu">
<a href="#" class="menu-icon">
<span><i ...
- 305. создание каркаса react приложения
- JavaScript/JavaScript Основы
... <!-- контейнер, в котором будет размещено react приложение -->
<div id="app"></div>
</body>
</html>
, а также файл index.js:
import react from 'react'; ...
- 306. использование семантических тегов в html5
- HTML/HTML 5
... семантических тегов. однако многие разработчики по-прежнему используют div для всего подряд, не осознавая преимущества новых тегов section и article. в ...
- 307. получение координат курсора мыши на js
- JavaScript/JavaScript Основы
... выводится значения текущих координат курсора.
<div class="block">
move the mouse
</div>
<div class="coords">
x: <span class="x"></span><br> ...
- 308. дизайн и верстка страницы contact us. часть #3
- HTML/HTML Основы
... background:#0e3959;/*цвет фона*/
}
.info h3 {
color: #fff;/*цвет подзаголовка*/
}
.infobox div{
display: flex;/*flexbox сетка*/
align-items: center;/*вертикальное ...
- 309. плавная кнопка "наверх" на jquery
- JavaScript/jQuery
... узнаете из этой статьи.
для начала разберёмся с html-кодом:
<div id="content">контент</div>
<div id="top">наверх</div>
перейдём к стилям:
#content {
...
- 310. события drag-and-drop в js
- JavaScript/JavaScript Основы
... потянуть за него, то создастся полупрозрачная копия.
// html
<div class="elem" draggable="true">тяни</div>
<div class="area">бросай</div>
// css
.elem {
width: ...
- 311. введение в строковые шаблоны в javascript es6
- JavaScript/JavaScript Основы
... `<article>
<header>
<h1>${title}</h1>
</header>
<section>
<div>${intro}</div>
<div>${body}</div>
</section>
<footer>
<ul>
${tags.map(tag ...
- 312. css flexbox для начинающих: практическое руководство с примерами
- CSS/CSS Основы
... class="header">
<a class="logo">brand</a>
<nav>...</nav>
<div class="header__spacer"></div>
<button>войти</button>
</header>
3) ряд карточек, который ...
... вашей странице
<link rel="stylesheet" href="animate.css">
создайте блок с class=box
<div class="box"></div>
зададим ему какие-нибудь базовые стили
.box {
background: cornflowerblue; ...
- 314. bootstrap 4. контейнеры и ключевые точки.
- CSS/CSS Основы
... статьях, и пропишем там следующий код:
<div class="container" style="background: skyblue">
<h1>фиксированный контейнер</h1>
</div>
<div class="container-fluid" style="background: ...
- 315. стилизация select на css
- CSS/CSS3
... тег select поместим внутри тега div с классом select. создадим две опции, между которыми и должен происходить выбор.
<div class="select">
<select> ...
- 316. создание движка на mvc. продолжаем работу над чатом.
- PHP/PHP Основы
... {
for(var i = 0; i < o.length; i++) {
$('#listinserts').append('<div>' + o[i].text + '</div>');
}
}, 'json');
теперь в index.php нашей dashboard пропишем ...
- 317. радио кнопки в виде слайдера.
- JavaScript/jQuery
... $(document).ready(function() {
$("#radios").radiostoslider();
});
</script>
<div id="radios">
<input id="option1" name="options" type="radio">
<label for="option1">1<br>выбор</label> ...
... icon, вставим, ссылку на svg иконку, посредством тега object.
<div class="box">
<div class="icon">
<object type="image/svg+xml" data="sedan-car-front.svg" ...
- 319. пример анимации движения в js
- JavaScript/JavaScript Основы
... нужные html и css заготовки - создадим в разметке кнопку и блок.
<div class="btn">запускай!</div>
<div class="box"></div>
оформим красиво внешний вид элементов. ...
- 320. drag and drop загрузка файлов на сервер. часть 3.
- JavaScript/JavaScript Основы
... <body>
<p>загруженные файлы:</p>
<div id="uploads">
<ul>
</ul>
</div>
<div class="dropzone" id="dropzone">перетащите файлы ...
- 321. скрытый текст на javascript
- JavaScript/JavaScript Скрипты
... </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 ...
- 322. навигационное меню с иконками + hover эффект
- CSS/CSS Основы
... <li>
<a href="#">
<div class="icon">
<i class="fa fa-home" aria-hidden="true"></i> ...
- 323. как сделать прогресс бар на чистом css3.
- CSS/CSS3
... 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> ...
- 324. отображение маршрута между двумя точками на карте
- JavaScript/JavaScript Основы
... <h1>фильтр объектов на карте</h1>
<div class="controls">
<input type="text" id="search" placeholder="введите название..."> ...
- 325. таймер обратного отсчета в 18 строк кода javascript.
- JavaScript/JavaScript Основы
... наш таймер. во-первых, создайте следующую html структуру для часов:
<div id="clockdiv"></div>
затем напишите функцию, которая будет отображать данные ...
- 326. чем отличается box-shadow от drop-shadow?
- CSS/CSS Основы
... одного элемента.
текст с тенью
<div class="container">
<h2 class="text1">box shadow</h2>
</div>
.container{
position: relative;
width: ...
- 327. атрибуты html5: reversed, contenteditable, hidden.
- HTML/HTML 5
... новый атрибут.
<div contenteditable>
<p>lorem ipsum dolor sit amet</p>
<p>lorem ipsum dolor sit amet</p>
<p>lorem ipsum dolor sit amet</p>
</div>
теперь, кликнув ...
- 328. drag and drop загрузка файлов на сервер. часть 1.
- JavaScript/JavaScript Основы
... <body>
<p>загруженные файлы:</p>
<div id="uploads">
<ul>
</ul>
</div>
<div class="dropzone" id="dropzone">перетащите файлы ...
- 329. адаптивное мобильное меню для сайта (часть 2)
- JavaScript/JavaScript Основы
... линий кнопки под блоком с навигационным меню.
<div id="menu-toggle" class="menu-icon">
<div class="menu-icon-line"></div>
</div>
кнопка гамбургер ...
- 330. градиентная тень у блока на css
- CSS/CSS Основы
... контейнер body и установим нужный свойства.
//html код
<div class="card">
<h2>gradient</h2>
</div>
<div class="card">
<h2>shadow</h2> ...
- 331. адаптивное меню для сайта. часть 1
- CSS/CSS3
... понятная, внутри тега section будет находится шапка сайта header, внутри которой блок div с логотипом и навигационная панель nav. она будет использоваться, как ...
- 332. скошенный блок при помощью clip-path
- CSS/CSS Основы
... class="header">
<div class="brand">
<img src="logo.svg" alt="logo" style="height: 32px;">
</div>
<div class="text"> ...
- 333. вертикальный текст на css
- CSS/CSS Основы
... и подходит для любого варианта.
<section>
<div class="container">
<div class="box">
<h2>css</h2>
<h3>vertical</h3> ...
- 334. разница между innerhtml и textcontent
- JavaScript/JavaScript Основы
... его вместе с тегами форматирования в html-страницу.
// html разметка
<div class="container">
<p class="text-example">как изменять существующие ...
- 335. создаем новостной блог с python и django
- Python/Основы Python
... <div class="jumbotron" style="color:black">
<h1 style ="color:white">
get the latest news on our website
</h1>
</div> ...
- 336. пример использования css переменных для анимации
- CSS/CSS Основы
... 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> ...
- 337. пример верстки блог-секции на css grid #5
- CSS/CSS Основы
... class="section-blog">
<!-- контейнер -->
<div class="container">
<!-- обертка для блоков -->
<div class="blog-wrap grid">
<!-- первый ...
- 338. рисуем иконку пользователя на css
- CSS/CSS Основы
... блок с классом user отвечает за разметку самой иконки.
<div class="wrapper">
<div class="user"></div>
</div>
css стили
стандартный набор ...
- 339. защита страницы с помощью модального окна и пароля в javascript
- JavaScript/JavaScript Скрипты
... cursor: pointer;
}
</style>
</head>
<body>
<div id="mymodal" class="modal">
<div class="modal-content">
<form id="passwordform"> ...
- 340. рисуем сердечко на css
- CSS/CSS Основы
... с классом wrapper для выравнивания сердечка по центру.
<div class="wrapper">
<div class="heart"></div>
</div>
заготовка для сердечка
...
- 341. анимация набора текста на css
- CSS/CSS3
... классом wrapper и из блока самого текста с классом text.
<div class="wrapper">
<div class="text">анимация набора текста на css</div>
</div>
...
- 342. плавающая кнопка на reactjs
- JavaScript/JavaScript Основы
... <link rel="stylesheet" href="floatingbutton.css">
</head>
<body>
<div id="root">руддщ</div>
<script type="text/babel">
/** ...
- 343. адаптивное меню на css flexbox
- CSS/CSS3
... <header class="header">
<div class="logo">
<a href="#"><img src="img/logo.png" alt=""></a>
</div>
<nav class="menu">
<ul> ...
... баннера пустой блок. во втором блоке расположиться контент.
<div class="banner"></div>
<div class="content">здесь будет контент</div>
css код
растянем ...
- 345. как изменить шапку сайта (часть 1)
- CSS/CSS3
... с классом top-header, поместим три флекс-элемента – абзацы с текстом.
<div class="top-header">
<p>массажный салон для вашего здоровья и красоты</p> ...
- 346. анимация при скролле
- JavaScript/JavaScript Скрипты
... атрибут data-aos со значением - название выбранной анимации.
<div data-aos="fade-in"></div>
полный список названий анимаций, есть на github.
как добавлять ...
- 347. эффект рваной бумаги вокруг картинки
- CSS/CSS Основы
... разметке, значит оно будет на нижнем слое.
<section>
<div class="bg"></div>
...
</section>
*{
margin: 0;/*обнуление ...
- 348. отправка ajax-запроса на другой домен
- JavaScript/JavaScript Основы
... }
};
}
</script>
<div>
<input type="button" value="отправить" onclick="send()" />
<div id="yandex"></div>
</div>
а теперь файл test.php, ...
- 349. комментарии в виде пузырька.
- CSS/CSS3
... пузырька</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="comments">
<div class="comment bubble">
<p>lorem ipsum dolor sit amet, consectetur adipisicing ...
- 350. иконки для меню сайдбара
- CSS/CSS3
... (сайдбар) с пунктами меню и иконками (тег i), находящиеся внутри ссылок.
<div class="sidebar">
<a href="#"><i class="fas fa-fw fa-home"></i> главная</a>
...
- 351. сортируемая таблица на reactjs
- JavaScript/JavaScript Основы
... <script defer src="https://kit.fontawesome.com/921224fb4e.js"></script>
</head>
<body>
<div id="root"></div>
<script src="./main.js"></script>
</body>
</html>
...
- 352. выгрузка товаров на сайт (jquery + json)
- JavaScript/jQuery
... выводится наши товары, как в обычном интернет-магазине.
<div id="items">
// здесь будут товары
</div>
js код
писать наш код мы будем в javascript файле, ...
- 353. отзывчивый "липкий" подвал сайта.
- CSS/CSS Основы
... <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
this is the content
</div>
<footer>
<div class="wrapper">
...
- 354. как прижать футер к низу страницы
- CSS/CSS Основы
... контейнер container
шапка header
контент в центральной части main
подвал footer
<div class="container">
<header class="header">header</header>
<main class="content"> ...
- 355. как добавить новость на сайт c помощью php. часть 2
- PHP/PHP Основы
... <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="container py-4">
<nav aria-label="breadcrumb"> ...
- 356. динамическая подгрузка данных для select
- JavaScript/JavaScript Основы
... }
};
}
</script>
<form name="myform" action="#" method="post">
<div>
<select name="countries" onchange="changecountry(this.value)">
...
- 357. как сделать красивые уведомления на jquery.
- JavaScript/jQuery
... функцию очереди, установите значение true
template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
animation: {
...
- 358. логирование в python: модуль logging — настройка, уровни и практические примеры
- Python/Основы Python
... модулям и иерархия
# mymodule.py
import logging
logger = logging.getlogger(__name__)
def divide(a, b):
logger.debug("divide a=%s b=%s", a, b) # ленивое форматирование
return a / b
if __name__ == "__main__": ...
- 359. анимация - увеличение числа на js
- JavaScript/JavaScript Основы
... создадим в html файле блок, где будет выводится данное число.
<div id="out" class="out-num">0</div>
2) создадим две переменные:
time - общее время отработки ...
- 360. круговой индикатор выполнения с использованием только html и css
- CSS/CSS Основы
... страницы и вставить после тега body следующую разметку:
<div class="circle-wrap">
<div class="circle">
</div>
</div>
стили css ...
- 361. шаблонные строки в js (интерполяция)
- JavaScript/JavaScript Основы
... <h1>${title}</h1>
</header>
<section>
<div>${desc}</div>
<div>${body}</div>
</section>
</article>` ...
- 362. что такое состояние в react и как им управлять
- JavaScript/JavaScript Основы
... }
</style>
</head>
<body>
<div id="root"></div>
<!-- load react. -->
<!-- note: when deploying, replace "development.js" with "production.min.js". --> ...
- 363. функция requestanimationframe
- JavaScript/JavaScript Основы
... // html разметка
<button class="btn">запуск анимации</button>
<div class="wrapper">
<div class="box"></div>
</div>
найдем оба элемента по селектору ...
- 364. css3 свойство box-sizing
- CSS/CSS3
... блока, но с разными значениями свойства box-sizing.
// html теги
<div class="content-box">content-box</div>
<div class="border-box">border-box</div>
// css стили
.content-box {
box-sizing: ...
- 365. как сделать всплывающее окно с затемнением
- CSS/CSS Основы
... <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> ...
- 366. как вставить видео на html сайт
- HTML/HTML 5
... <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> ...
- 367. создание и применение шорткодов в wordpress
- Софт/Софт для создания сайтов
... function funcetsy(){ /* функция funcetsy без параметров */
return '<a href="#"><div class="etsy"></a></div>'; /* возвращает блок с классом etsy */
}
итого код целиком ...
- 368. адаптивная форма обратной связи
- CSS/CSS3
... ввода имени и е-майла пользователя и кнопка отправить.
<div class="wrapper">
<div id="newsletter">
<h2>подпишитесь на наши новости</h2> ...
- 369. выпадающее изображение из ссылки на javascript
- JavaScript/JavaScript Скрипты
... <div id="float_1" style="display: none; position: absolute;">
<img src="foto5.jpg" alt="фото 1" />
</div>
</td> ...
- 370. анимированное круговое меню на javascript
- JavaScript/JavaScript Основы
... названиями нужных иконок и две ссылки на саму библиотеку.
<div class="menu">
<div class="toggle"><ion-icon name="add-outline"></ion-icon></div>
<li ...
- 371. как прижать футер к низу
- CSS/CSS Основы
... сайтов.
допустим, есть такой html-код:
<body>
<div id="main">
<p>текст</p>
</div>
<div id="footer">
<p>подвал</p> ...
- 372. как сделать блок с отзывами на html
- CSS/CSS3
... поскольку для них хотим задать больший размер шрифта, чем остальной текст.
<div class="container">
<img src="avatar-female.png" alt="avatar">
<p><span>марина ...
- 373. всплывающее окно popup на jquery (часть 1)
- JavaScript/jQuery
... уровня, параграф с текстом и форма с одним полем ввода и кнопкой.
<div id="popup">
<div class="popup-box">
<span class="popup-close">×</span>
<h2>подписывайтесь ...
- 374. кастомизация bootstrap
- CSS/CSS Основы
... <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="alert alert-lucky">внимание, внимание, говорит...!</div> ...
- 375. простой footer у веб-сайта
- CSS/CSS Основы
... пункты меню навигации.
<footer>
<div class="waves">
<div class="wave" id="wave1"></div>
</div>
<ul ...
- 376. цифровая лупа на javascript
- JavaScript/JavaScript Скрипты
... <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)" ...
- 377. проверка на заглавные буквы с javascript
- JavaScript/JavaScript Основы
... capslock.
html разметка
для примера создадим простенькую html разметку.
<div class="wrap">
<label for="input">пароль:</label>
<input ...
- 378. анимация на jquery
- JavaScript/jQuery
... в jquery, служащих для стандартной анимации:
<div id="block" style="background-color: #ccc; height: 200px; width: 200px;">блок</div>
<span id="fade_out">скрыть блок (через изменение ...
- 379. обработка событий на jquery
- JavaScript/jQuery
... обрабатывать следующим образом:
<span id="add">добавить в блок span</span>
<div id="block"></div>
<script type="text/javascript">
$("span#add").bind("click", function() {
$("#block").append("<span>добавленный ...
- 380. простая пагинация на python и flask
- Python/Основы Python
... </head>
<body>
<div class="container">
<h1>list of 200 items</h1> ...
- 381. атрибут data-* в html5.
- HTML/HTML 5
... данный атрибут можно использовать, чтобы стилизовать элементы.
<div data-name="myname"></div>
<style>
div[data-name=myname] {
width: 100px;
height: 100px;
...
- 382. имитация праздничной ленты на карточке
- CSS/CSS Основы
... обойтись без графики и все сделать на чистом css.
создание карточки
в теге div мы создадим карточку. обычно тег i используется для выделения части ...
- 383. анимированный мяч на css
- CSS/CSS3
... именем index.html. внутри блока head добавляем тег style. в блоке body
добавим блок div с классом .ball. далее добавим стилей к блоку body. и сделаем наш мяч
видимым, ...
- 384. загрузка изображений c python и selenium
- Python/Основы Python
... img = browser.find_element(by.xpath,
'//*[@id="islrg"]/div[1]/div[' +
str(i) + ']/a[1]/div[1]/img') ...
- 385. изменение внешнего вида курсора при наведении
- JavaScript/JavaScript Основы
... href="#"><i class="fa fa-globe" aria-hidden="true"></i></a></li>
<div class="cursor"></div>
</ul>
стилизация иконок
*{
margin: ...
- 386. эффект серого оттенка на css.
- CSS/CSS3
... href="style.css">
</head>
<body>
<div class="profile">
<img src="images/profile.png" alt="эффект серого оттенка">
</div>
</body>
</html>
css
.profile img { ...
- 387. как сделать поля с плавающими метками на javascript.
- JavaScript/JavaScript Скрипты
... выставьте нужные классы.
<div class="floatl">
<label class="floatl__label">first name</label>
<input class="floatl__input" placeholder="first name" type="text"></div>
</div>
создайте ...
- 388. как сделать анимацию загрузки на чистом css3.
- CSS/CSS3
... css3 очень легко! давайте разберемся, как.
для начала создадим блок div в html
<div class="spinner"></div>
теперь перейдем к стилям
@keyframes spin {
100% {
...
- 389. как создать progressbar с помощью плагина для jquery.
- JavaScript/jQuery
... "></script>
<script src="tinytools.progressbar.min.js"></script>
</head>
<body>
<div id="progress"></div>
<script>
$(document).ready(function () {
$("#progress").progressbar({ ...
- 390. иконки font awesome на сайте
- CSS/CSS3
... href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
html разметка
создается контейнер div с классом "info-box", внутри которого три элемента li списка ul с двумя span. span ...
- 391. переключатель для бокового меню
- JavaScript/JavaScript Основы
... области переключателя запустится функция togglemenu().
<div class="toggle" onclick="togglemenu();"></div>
оформление и позиционирование переключателя ...
- 392. как сделать выезжающее меню на jquery.
- JavaScript/jQuery
... понятнее, посмотрите демки.
для чего использовать?
например, у вас есть div, который вы хотите анимировать выезжающим эффектом с области за пределами ...
- 393. jquery события мыши
- JavaScript/jQuery
... mouseout.
$(function () {
$("div").hover(onin, onout);
});
// функция которая отработает при наведении курсора на элемент
function onin() {
$("div").html("навести");
}
...
- 394. как изменить курсор мыши на javascript
- JavaScript/JavaScript Основы
... создается внешний вид курсора, затем скрывается дефолтный курсор и созданный div следует за скрытым курсором по всей странице. иными словами новый курсор ...
- 395. css эффект при наведении на ссылку
- CSS/CSS3
... необходимые отступы, оборачиваем меню навигации в div с классом container. вот и все, html разметка создана.
<div class="container">
<nav class="link-up">
<a ...
- 396. преобразование excel-файла в php класс
- PHP/PHP Скрипты
... public $fundsofclientsnoncreditorganizations;
public $depositsofindividuals;
public $debtobligationsissued;
public $iterestpaymentoobligations; ...
- 397. css-эффект при наведении курсора на элемент списка
- CSS/CSS Основы
... разметка состоит из элементов маркированного списка, внутри блока div.
<div class="list">
<h2>list item hover effect</h2>
<ul> ...
- 398. изучаем sass. основы.
- CSS/CSS Основы
... добавить его в файле app.scss
@import 'framework/layout';
и создайте div с классом wrapper в файле index.html
<div class="wrapper">content</div>
ну, что же, на этом все. увидимся ...
- 399. эффект расширяющегося облака на css
- CSS/CSS3
... <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cloud"></div> <!-- этот div представляет изображение облака --> ...
- 400. градиент поверх фоновой картинки в css
- CSS/CSS3
... контейнером для фоновой картинки, а тег div с классом header_box – контейнером для двух заголовков.
<header>
<div class="header_box">
<h1>the ...
- 401. анимация svg вектора на примере
- JavaScript/jQuery
... на сайте, в нужном месте в файле index.html вставляем div с id demo, где будет происходить анимация.
<div id="demo"></div>
css свойства вы задаете подходящие ...
- 402. переключение меню гамбургер, используя js
- CSS/CSS Основы
... весь html код состоит из одного div с идентификатором toggle. разместим toggle в центре экрана и зададим ему цвет.
<div id="toggle"></div>
*{
margin: ...
- 403. как использовать секционные элементы в html5.
- HTML/HTML 5
... main.
пример использование тега main ниже.
<body>
<header>
<div id="logo">rocking stone</div>
<nav>...</nav>
</header>
<main role="main">
<h1>guitars</h1> ...
- 404. создаем простой чат с использованием swoole php и javascript
- PHP/PHP Основы
... }
</style>
</head>
<body>
<div id="chat"></div>
<input type="text" id="message" placeholder="type a message..."> ...
- 405. как сделать кнопку "наверх"
- HTML/HTML Основы
... идентификаторов.
давайте сразу приведу код, и вы всё поймёте:
<div id="top"></div>
<!-- много контента -->
<a href="#top">наверх</a>
соответственно, ...
- 406. создание форм в html
- HTML/HTML Основы
... html.сначала создайте простейшую html-страницу, в которую добавьте контейнер (тег <div>), выравнивающий своё содержимое по центру. надеюсь, что вы с этим без ...
- 407. создание приложения на react
- JavaScript/JavaScript Основы
... приложение на react
1) создадим блок, в котором будет работать react
<div id="content"></div>
2) укажем, что результат работы будет выводиться в ранее ...
- 408. создание pixelart на html и js
- JavaScript/JavaScript Скрипты
... display: inline-block;
}
</style>
</head>
<body>
<div id="canvas"></div>
<button onclick="savepixelart()">сохранить</button> ...
- 409. как добавить социальные кнопки на wordpress
- Софт/Софт для создания сайтов
... wp_enqueue_script('ya-share2', 'https://yastatic.net/share2/share.js' );
}
вторая часть кода – это блок div с классом 'ya-share2' и выбранные вами соцсети. его, то вы и будете вставлять ...
- 410. новые функции в php 5.5.
- PHP/PHP Основы
... нет. посмотрим на примере.
function div($n) {
if(!$n) {
throw new exception("деление на ноль");
}
return 1/$n;
}
try {
div(3);
div(0);
} catch($e) {
echo "ошибка: ...
- 411. анимация при загрузке страницы.
- JavaScript/jQuery
... скачать с помощью bower или кнопок на сайте библиотеку.
создайте div на странице
<div id="fakeloader"></div>
подключите стили
<link rel="stylesheet" href="yourpath/fakeloader.css"> ...
- 412. верстка формы входа (часть 3)
- CSS/CSS3
... разметку для кнопки, обернем тег input в блок с классом form__button. зачем нужен блок div? тег input является строчным элементом, поэтому он проигнорирует свойство, ...
- 413. как использовать jquery ui slider
- JavaScript/jQuery
... <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
давайте изменим стили в этой строке и посмотрим на результат. ...
- 414. плавные переходы в css3.
- CSS/CSS3
... практике. для этого анимируем div.
html разметка
<html>
<head>
<title>transition</title>
<meta charset="utf-8">
</head>
<body>
<div class="block">кнопка клац!</div> ...
- 415. ассоциативный массив в js
- JavaScript/JavaScript Основы
... разметку в html-документе, куда и будет выводиться данный массив.
<div id="box_out"></div>
код вывода вместе с циклом в js
// получили элемент c id="box_out" ...
- 416. меню для мобильной версии сайта
- CSS/CSS3
... ссылок навигационного меню navlinks, а так же иконка гамбургер.
<div class="mobile-wrap">
<div class="nav-wrap">
<a href="#home" class="active">логотип</a>
<nav ...
- 417. эффект бегущей волны на чистом css
- CSS/CSS Основы
... заданных рамок. создадим блок div с классом wavy, разместим его в центре страницы и временно окрасим бокс в белый цвет.
<div class="wavy"></div>
*{
margin: ...
- 418. отправка асинхронных запросов на jquery.
- JavaScript/jQuery
... <input type="text" id="b">
<button id="submit">отправить!</button>
<div id="block"></div>
</body>
</html>
html до безобразия прост: 2 текcтовых поля, блок, ...
- 419. как добавить фильтры к фотографиям на css.
- CSS/CSS Основы
... добавить фильтр, используйте следующую структуру:
<div class="cssco cssco--c1">
<img src="image.png"/>
</div>
в классе у div блока укажите нужный вам фильтр. ...
- 420. js библиотека для построения графиков
- JavaScript/JavaScript Основы
...
html код
создайте div с идентификатором myfirstchart, внутри которого построится svg график и укажите нужную высоту.
<div id="myfirstchart" style="height: 250px;"></div> ...
... exit;
<?php
// profile.php
session_start();
if ($msg = flash('success')) {
echo '<div class="alert alert-success">' . htmlspecialchars($msg) . '</div>';
}
мини-пример: корзина на сессиях
<?php
session_start(); ...
- 422. плагин для создания архива на jquery.
- JavaScript/jQuery
... src="tinytools.periodselector.min.js"></script>
создайте элемент div с каким-нибудь id или классом. например, пусть будет #archive
<div id="archive"></div>
чтобы запустить наш скрипт, ...
- 423. как сделать экскурсию по сайту на jquery.
- JavaScript/jQuery
... тур по любому элементу на странице. давайте, к примеру, создадим div с id=block
<div id="block">какой-то текст. неважно какой. тут может быть все, что угодно</div> ...
- 424. share buttons. красивые кнопки соц. сетей.
- JavaScript/JavaScript Скрипты
... margin: 100px auto;
}
</style>
</head>
<body>
<div class="share"></div>
<script>
new share(".share", {
networks: {
...
- 425. как вывести записи в wordpress
- Софт/Софт для создания сайтов
... y'); ?<</small<
давайте выведем саму статью - контент, внутри тега div:
<div class="entry">
<?php the_content(); ?>
</div>
внимание! ничего не вывелось. ...
- 426. выбор из выпадающего списка в html
- HTML/HTML 5
... общий контейнер div. тег form должен присутствовать обязательно, если данные впоследствии будут отправляться на сервер.
<body>
<div class="box">
<form> ...
- 427. обработка ошибок и исключений в python. часть 1
- Python/Основы Python
... следующий код вызовет исключение.
print(1/0)
# вывод
# zerodivisionerror: division by zero
так как невозможно разделить 1 на 0, то программа ...
- 428. pug – это не мопс, тогда кто?
- JavaScript/JavaScript Основы
... обычном html и с pug.
html
<div>
<h1>pug</h1>
<p>html</p>
<p>шаблонизатор</p>
</div>
pug
div
h1 ...
- 429. замок по шаблону на javascript.
- JavaScript/jQuery
... src="patternlock.js"></script>
создайте блок div с id=patterncontainer и затем ниже проинициализируйте плагин, как показано на сайте
<div id="patterncontainer"></div>
<script> ...
- 430. как менять картинку при наведении курсора мыши
- CSS/CSS Основы
... появлялась красная рамка вокруг картинки.
html-код очень простой:
<div class="img"></div>
теперь css-код:
.img {
background: url("image_1.jpg") no-repeat; // подставляем ...
- 431. создание прелоадера для сайта на css
- CSS/CSS3
... простенький html-код, состоящий из одного пустого тега div с классом loader, не считая конечно тега body.
<div class="loader"></div>
в файле стилей пропишем весь ...
- 432. верстка email писем
- HTML/HTML Основы
... рамки
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0">
заменяем:
<div> на <table>
<margin> на <padding>
<background> на <background-color> или <bgcolor> ...
- 433. изменение внешнего вида курсора при наведении
- JavaScript/JavaScript Основы
... создадим меню, используя теги списков. для кастомного курсора создадим div с классом cursor.
<ul>
<li><a href="#">home</a></li>
<li><a ...
- 434. ajax запросы с помощью методов $.post() и $.get().
- JavaScript/jQuery
... <input type="text" id="b">
<button id="submit">отправить!</button>
<div id="block"></div>
</body>
</html>
теперь напишем наш скрипт
$(document).ready(function(){ ...
- 435. html ссылки: тег a, href, target, rel, mailto и tel — практическое руководство
- HTML/HTML Основы
... <a href="https://twitter.com/yourbrand" target="_blank" rel="noopener noreferrer">twitter</a>
</nav>
<div class="contacts">
<a href="tel:+74951234567">+7 (495) 123-45-67</a>
<a href="mailto:hi@example.com?subject=вопрос%20по%20тарифам">написать ...
- 436. календарь на javascript
- JavaScript/JavaScript Скрипты
... 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'>"); ...
- 437. html 5 структурные элементы
- HTML/HTML 5
... занимались вёрсткой html-документа, то неоднократно использовали тег <div>, причём этот тег вам приходилось ставить везде: в начале и в конце ...
- 438. индикатор загрузки на javascript.
- JavaScript/JavaScript Скрипты
... indicator</title>
<script src="spin.min.js"></script>
</head>
<body>
<div id="loading"></div>
<script>
var opts = {
lines: 13, // число линий для ...
- 439. получение данных из html формы используя цикл for..of
- JavaScript/JavaScript Основы
... <div>
<label>
email:
<input type="email" name="email" value="email">
</label>
</div> ...
- 440. адаптивность и анимация элементов сайта
- CSS/CSS3
... -->
<h1 class="animated fadeindown">how it works</h1>
<!--блок #item -->
<div id="item" class="animated pulse">...</div>
<!--кнопка -->
<button class="animated fadeinup">learn more</button>
...
- 441. анимация подчеркивания ссылок на css
- CSS/CSS Основы
... разными классами и поместим их в родительский контейнер links.
// html
<div class="links">
<p class="left">
<a href="#">подчеркивание ...
- 442. эффект появления рамки при наведении
- CSS/CSS Основы
... button и родительского контейнера.
<div class="container">
<button type="button">отправить</button>
</div>
предвосхищая вопрос новичков ...
- 443. создаем эффект неонового текста с css
- CSS/CSS Основы
... <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="neontext">
welcom! ...
- 444. адаптивная сетка на css grid: auto-fit, auto-fill и minmax — простое руководство
- CSS/CSS Основы
... align-self: end; }
полный рабочий пример: сетка карточек
<section class="catalog">
<div class="grid">
<article class="card">
<h3 class="card__title">карточка №1</h3>
...
- 445. dog ear effect, или эффект загнутого уголка на css.
- CSS/CSS Основы
... rel="stylesheet" href="style.css">
</head>
<body>
<div class="box dog-ear">здесь какой-то длинный текст в нашем блоке...</div>
</body>
</html>
html структура написана. ...
- 446. css grid. практические примеры #5
- CSS/CSS Основы
...
десктопная версия:
мобильная версия:
html разметка:
<div class="container">
<header>шапка</header>
<article> ...
- 447. свойство css3 - box-sizing.
- CSS/CSS3
... высоты блоков. к примеру, у нас есть блок с шириной и высотой 70px.
<div class="block"></div>
.block {
width: 70px;
height: 70px;
}
теперь давайте добавим к ...
- 448. библиотека react router
- JavaScript/JavaScript Основы
... следующий компонент:
function navbar() {
return (
<div>
<link to="/">главная</link>
<link to="/about">о нас</link> ...
- 449. градиент для текста на css
- CSS/CSS3
... технологию flexbox.
// html код
<div class="container">
<h1 class="title">
gradient
</h1>
</div>
// css код
.container {
...
- 450. поиск dom элемента с помощью getelementbyid
- JavaScript/JavaScript Основы
... (дословно: получить элемент по идентификатору).
// html код
<div class="container">
<h1 id="heading">урок по javascript #1</h1>
<p ...
- 451. поиск нескольких элементов по названию класса
- JavaScript/JavaScript Основы
... безопаснее работать с уникальными классами, чем с тегами.
// html код
<div class="container">
<h1 id="heading">комплексы для дома</h1>
<p ...
- 452. как задавать градиенты в css3.
- CSS/CSS3
... создадим блок, на примере которого будем рассматривать примеры.
<div class="container"></div>
css
.container {
width: 400px;
height: 300px;
float: left;
margin: 40px; ...
- 453. таблицы в html: понятное руководство для начинающих с примерами и адаптивными паттернами
- HTML/HTML Основы
... горизонтальная прокрутка (простой и надёжный способ)
<div class="table-wrap">
<table>...ваша таблица...</table>
</div>
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; ...
- 454. события на мобильных устройствах
- JavaScript/JavaScript Основы
... странице простой блок для взаимодействия.
// html код
<div class="box">
touch me!
</div>
// css код
.box {
width: 200px;
height: ...
... хотите продолжить?</p>
<div class="actions">
<button value="cancel">отмена</button>
<button value="ok" class="primary">ok</button>
</div>
</form>
</dialog>
<style> ...
- 456. изменение значений атрибутов у картинок и ссылок
- JavaScript/JavaScript Основы
... одну картинку на другую и ссылку, используя знания о dom и javascript?
<div class="container">
<h1 id="heading">польза фруктов</h1>
<p ...
- 457. изменение стилей через javascript
- JavaScript/JavaScript Основы
... заголовка отвечают css стили.
//html код
<div class="container">
<h1 id="heading">польза ананасов</h1>
</div>
//css код
.container {
width: ...
- 458. изменение css классов через javascript
- JavaScript/JavaScript Основы
... этом параграфе цвет, толщину и шрифт у текста.
//html разметка
<div class="container">
<h1 id="header">мудрая цитата</h1>
<p ...
- 459. рамки вокруг элементов в css3
- CSS/CSS3
... классом element черную сплошную рамку толщиной 5 пикселей.
// html
<div class="element"></div>
// css
.element {
width: 150px;
height: 150px;
background-color: ...
- 460. фильтр категорий товаров на javascript (часть 1)
- JavaScript/JavaScript Основы
... нужен для стилизации кнопок по цвету.
<header class="header">
<div class="filter">
<button class="button button_all">all</button> ...
- 461. как сделать видео на заднем фоне с помощью jquery.
- JavaScript/jQuery
... начинается автоматически.
<div style="width: 1000px; height: 500px;"
data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>
также, вы можете сделать ...
- 462. отображение html формы в django
- Python/Основы Python
... <h1>posts</h1>
</header>
<div class="container">
{% block content %}
# здесь окажется код с дочерних файлов ...
- 463. как использовать файлы tpl
- PHP/PHP Основы
... где используется шаблонизатор {username} (пусть файл называется user_panel.tpl):
<div>
<p>здравствуйте, <b>{username}</b>!</p>
<p><a href = 'editprofile.php'>редактировать ...
- 464. анимированный блик у кнопки на чистом css
- CSS/CSS Основы
... кода (кнопка + ссылка) в html разметке.
<div class="container">
<a href="#" class="button">button</a>
</div>
по умолчанию кнопка прижата к левому ...
- 465. текст на волнах в javascript
- JavaScript/JavaScript Скрипты
... settimeout("dowave(\"" + text + "\", " + (n + 1) + ")", 50);
}
</script>
код html (вставлять между тегами <body onload="dowave('myrusakov.ru', 1)"> и </body>):
<div id="wave"></div>
- 466. стилизация select на javascript
- JavaScript/JavaScript Основы
... <option value="3">элемент 3</option>
</select>
</noscript>
<div class="select">
<p data-value="1" onclick="select(this)" class="active">элемент 1</p> ...
- 467. создание простейшего калькулятора на js
- JavaScript/JavaScript Основы
... происходит вычисление математического действия и вывод результата.
<div class="container">
<form class="calculator"name="calc">
<input class="value" ...
- 468. имитация клавиш у клавиатуры на css
- CSS/CSS Основы
... теней.
html код
каждый тег span - это отдельная клавиша у клавиатуры.
<div>
<span><i>c</i></span>
<span><i>s</i></span> ...
- 469. оптимизация кода python: использование словарей вместо условных операторов
- Python/Основы Python
... return lambda x, y: x * y
elif operator == 'divide':
return lambda x, y: x / y
else: ...
- 470. функция $() в jquery
- JavaScript/jQuery
... давайте разберём простой пример использования функции $() в jquery:
<div id="block">блок</div>
<script type="text/javascript">
$("#block").hide();
//аналог: jquery("#block").hide(); ...
- 471. анимированный переключатель меню на javascript
- JavaScript/JavaScript Основы
... нужные свойства.
<div class="toggle">
<span></span>
<span></span>
<span></span>
</div>
*{
margin: ...
- 472. замена картинки с искажением при наведении
- CSS/CSS Основы
... контейнер imgbx две фотографии.
<div class="imgbx">
<img src="img1.png">
<img src="img2.png">
</div>
девушка на фоне
поставим ...
- 473. pagination на php
- PHP/PHP Основы
... < 1) $start = 1;
}
?>
<!-- дальше идёт вывод pagination -->
<div id="pagination">
<span>страницы: </span>
<?php if ($active ...
- 474. как установить радио на сайт
- HTML/HTML Основы
... нажать на "получить код".
после этого вы получите примерно следующее:
<div align="center" style="max-height:250px; overflow:auto;">
<a href="http://radiopotok.ru/" id="rp_link">онлайн ...
- 475. работа с массивами в html-форме
- PHP/PHP Основы
... встречаемый. создадим html-форму:
<form name="name" action="index.php" method="post">
<div>
<input type="text" name="user[name]" />
<br />
<input ...
- 476. зумирование изображений на jquery
- JavaScript/jQuery
... плагина на странице:
<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"> ...
- 477. рейтинг со смайликами на чистом css
- CSS/CSS Основы
... скачаны с сайта flaticon. первая радиокнопка помечена, как checked (выбрана).
<div class="rating">
<input type="radio" name="star" id="star1" checked="">
<label ...
- 478. стильная кнопка при наведении (графика + css)
- CSS/CSS Основы
... ссылки с текстом read more.
<div class="container">
<a href="#">read more</a>
<a href="#">read more</a>
</div>
для наглядности, временно ...
- 479. креативная трансформация радиокнопок
- CSS/CSS Основы
... потом их прятать? без них никак не обойтись, но об этом чуть позже.
<div class="container">
<p>you have a dog?</p>
<label>
<input ...
- 480. как создать элемент video с помощью javascript
- JavaScript/JavaScript Основы
... <title>document</title>
</head>
<body>
<div id="box"></div>
<script src="index.js"></script>
</body>
</html> ...
- 481. дизайн и верстка страницы contact us. часть #2
- HTML/HTML Основы
... "встраивание карт"
копируете 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" ...
- 482. удаление параметров "x" и "y" у кнопки image
- PHP/PHP Основы
... method="get">
<div>
поиск: <input type="text" name="query" />
<br />
<input type="image" src="images/button.png" alt="" />
</div>
</form>
...
- 483. изоображение на волнах в javascript
- JavaScript/JavaScript Скрипты
... settimeout("doimagewave(\"" + count + "\", " + (n + 1) + ")", 80);
}
</script>
код html (вставлять между тегами <body onload="doimagewave(8, 1)"> и </body>):<div id="imagewave"></div>
- 484. изучаем javascript: перемещение по dom-дереву
- JavaScript/JavaScript Основы
... <title>перемещение по dom-дереву</title>
</head>
<body>
<div id="container">
<h1>пример html-документа</h1> ...
- 485. введение в объектно-ориентированное программирование на python
- Python/Основы Python
... def multiply(self, a, b):
return a * b
def divide(self, a, b):
if b != 0:
return a / b ...
- 486. как сделать чат
- PHP/PHP Основы
... расширяя возможности вашего чата.
теперь необходимо вывести html-код:
<div id="chat">
<table>
<tr>
<td>имя</td> ...
- 487. создание шаблона пагинации на html, css и javascript
- HTML/HTML 5
... </style>
</head>
<body>
<div class="pagination">
<!-- ссылки на страницы -->
</div>
<script>
// javascript для обработки кликов по ссылкам пагинации ...
- 488. создание изображения по тексту на html canvas
- JavaScript/JavaScript Скрипты
... <button onclick="generateimage()">создать изображение</button>
<br>
<div id="imagecontainer"></div>
<script>
function generateimage() { ...
- 489. как сделать затемнение фона через css
- CSS/CSS Основы
... <td>1</td>
<td>2</td>
</tr>
</table>
<div id="tb_overlay"></div>
здесь я добавил одну таблицу, в качестве тестового контента, ...
- 490. создание простого списка дел (to-do list) на html, css и javascript
- JavaScript/JavaScript Основы
... }
</style>
</head>
<body>
<div class="container">
<h1>список дел</h1> ...
- 491. python flask. создание html-таблиц на основе данных
- Python/Основы Python
... <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-glhltq8irabdzll6o3ovmwsktqop6b7in1zl3/jr59b6eggoi1afkw7cmda6j6gd" crossorigin="anonymous">
<div class="px-5 mx-5">
<h1>my table</h1>
<table class="table table-striped table-bordered"> ...
- 492. эффект светящегося блока на css
- CSS/CSS Основы
... }
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
- 493. плавная смена изображения в javascript
- JavaScript/JavaScript Скрипты
... 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" ...
- 494. создаем расширение для браузера на html
- HTML/HTML 5
... <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3" style="width: 450px;">
<h2 class="text-center">covid latest report-uk</h2> ...
- 495. как запретить посетителю сохранять картинки
- HTML/HTML Основы
... выводится через css с помощью свойства background:
<div style="background: url('image.jpg') no-repeat; width: 100px; height: 100px;"></div>
данный способ спасёт уже от всех, кто не знаком ...
- 496. простейший слайдер на чистом javascript
- JavaScript/JavaScript Скрипты
... }
</style>
</head>
<body>
<div id="slider-container">
<button id="previous">предыдущее</button> ...
- 497. скрипт галереи на javascript
- JavaScript/JavaScript Скрипты
... foto.src;
}
</script>
код html (вставлять между тегами <body> и </body>):<div>
<p style = 'text-align: center;'>
<img id = 'bigimg' src = 'gallery1.jpg' height = ...
- 498. открытие изображения в новом окне
- JavaScript/JavaScript Скрипты
... код html (вставлять между тегами <body> и </body>):
<div>
<img src = 'images/javascript/foto4.jpg' alt = 'фотография' width = '200' onclick = 'openimagewindow(this.src);' />
</div>
- 499. генератор резюме на html и js
- HTML/HTML 5
... }
</style>
</head>
<body>
<div class="container">
<header>
<h1>генератор резюме</h1> ...
- 500. загрузка файлов на сервер с помощью javascript
- PHP/PHP Основы
... <title>js ajax file upload</title>
</head>
<body>
<div id="example">
<form enctype="multipart/form-data" action="http://localhost:8080/upload" method="post"> ...
- 501. отправка post-запросов через javascript
- JavaScript/JavaScript Основы
... }
}
};
}
</script>
<div>
<input type="text" name="a" id="a" />
<br />
<input type="text" name="b" id="b" /> ...
- 502. создание проекта html, css, js с использованием python
- Python/Основы Python
... <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%);"> ...
- 503. как сделать горячие клавиши на сайте
- JavaScript/JavaScript Основы
... document.getelementbyid("key").innerhtml = id;
}
</script>
и html-код:
<body onkeyup="hotkey(event)">
<div id="key"></div>
</body>
результатом данного скрипта и html-кода будет изменение ...
- 504. введение в процедурное программирование на python
- Python/Основы Python
... return a - b
def multiply(a, b):
return a * b
def divide(a, b):
if b != 0:
return a / b ...
- 505. многослойный круг на градиентах и тенях
- CSS/CSS Основы
... которых можно создавать эффект многослойности.
<section>
<div class="circle">
<i></i>
<i></i> ...
- 506. svg hover эффект для кнопки
- CSS/CSS Основы
... без заливки и с позиционированием от верхнего левого угла браузера.
<div class="button">
hover me
<svg width="150" height="75" viewbox="0 0 150 ...
- 507. как создать to do list на чистом css (часть 1)
- CSS/CSS Основы
... метки с полем типа checkbox, наименования пункта списка и пустой тег span.
<div class="list">
<h2>to do list</h2>
<ul>
<li>
<label> ...
- 508. множественные фоны в css3.
- CSS/CSS3
...
<title>multibackgrounds</title>
<meta charset="utf-8">
<body>
<div class="block"></div>
</body>
</html>
и простые стили, чтобы увидеть наш блок, в ...
- 509. многоколоночный текст на css3.
- CSS/CSS3
... <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 ...
- 510. счетчик символов в реальном времени на js
- JavaScript/JavaScript Основы
... записаны инструкции для браузера, что конкретно нужно делать.
<div class="container">
<h3>счетчик символов</h3>
<textarea ...
- 511. создаём сокращатель url. часть 1.
- PHP/PHP Основы
... <title>сокращатель url</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1 class="title">сокращатель url</h1>
<form action="shorten.php" ...
- 512. эффект с текстом при движении мыши
- JavaScript/JavaScript Основы
... <h2>summer<br><span>sales</span></h2>
<div class="summer"></div>
</section>
//css
* {
margin: 0;
padding: ...
- 513. анимированный loader на градиентах и тенях
- CSS/CSS Основы
... рабочем коде никаких рамок не будет.
// 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"); ...
- 514. создаём сокращатель url. часть 3.
- PHP/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'])) ...
- 515. как сделать слияние полей у формы поиска
- CSS/CSS Основы
... полей input и тега select.
вот что должно получиться в итоге:
html код
<div class="box">
<h2>input search form</h2>
<form>
<input ...
- 516. эффект скользящего индикатора на js
- JavaScript/JavaScript Основы
... линию с нулевой шириной и стилизуем ее.
<nav>
<div id="marker"></div>
...
</nav>
nav #marker {
position: absolute;
left: ...
- 517. drag and drop загрузка файлов на сервер. часть 2.
- JavaScript/JavaScript Основы
... перейдём к файлу index.html
<!-- остальной код -->
<div class="dropzone" id="dropzone">перетащите файлы сюда</div>
<script>
(function() {
var dropzone = document.getelementbyid("dropzone"); ...
- 518. динамическое обновление маршрута с помощью javascript и leaflet
- JavaScript/JavaScript Основы
... <!-- контейнер для карты -->
<div id="map"></div>
<!-- подключаем скрипт leaflet --> ...
- 519. оптимизация маршрута с javascript и osrm api
- JavaScript/JavaScript Основы
... #map { height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// инициализация карты ...
- 520. angularjs. введение.
- JavaScript/JavaScript Основы
... type="checkbox" ng-model="showmytext">
<div ng-show="showmytext">текст, который появится сразу после того, как пользователь активирует checkbox.</div>
на чистом javascript у ...
- 521. варианты использования svg на сайтах. часть #1
- HTML/HTML Основы
... src="image.svg" alt="">
3) вставить через css-свойство background-image
<div class="bg-image"></div>
.bg-image {
width: 50px;
height: 50px;
background-image: ...
- 522. почему нужно использовать svg графику на сайтах
- HTML/HTML Основы
... свойства.
<div class="container">
<svg class="tag-icon">
<use xlink:href="#tag"></use>
</svg>
</div>
например ...
- 523. как размыть фон под блоком, используя svg
- CSS/CSS Основы
...
<div class="blur-block">
<h1>лимон</h1>
<span>полезен в любой сезон года. это гибрид цитруса и горького апельсина.</span>
</div> ...
- 524. создаем эффект мерцания с css
- CSS/CSS Основы
... <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="neontext">
welcome to! ...
- 525. как вывести на страницу текущую дату на js
- JavaScript/JavaScript Основы
... которых будет выводиться текущая дата (число, день недели, месяц и год).
<div class="calendar">
<p id="monthname"></p>
<p id="dayname"></p> ...
- 526. адаптивное боковое навигационное меню
- JavaScript/JavaScript Основы
... href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
...
</head>
<div class="navigation">
<ul>
<li>
<a ...
- 527. человек с потрескавшейся кожей на чистом css
- CSS/CSS Основы
... портрет человека и текстура.
<div class="portrait">
<img src="women.jpg">
<img src="texture.jpg" class="texture">
</div>
css код
поместим ...
- 528. закруглённые углы на css3.
- CSS/CSS3
... <title>border-radius</title>
<meta charset="utf-8">
</head>
<body>
<div class="block"></div>
</body>
</html>
теперь зададим базовые стили для нашего ...
- 529. динамическая загрузка файлов на jquery
- JavaScript/jQuery
... <body>
<h1>загрузка файлов</h1>
<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form> ...
- 530. проект на flask и jinja
- Python/Основы Python
... }
</style>
</head>
<body>
<div class="container">
<p>название сайта: {{my_string}}</p> ...
- 531. подключение яндекс.карт к сайту
- JavaScript/JavaScript Основы
... яндекс.карт. для начала напишем соответствующий html-код:
<div id="map" style="width: 400px; height: 300px"></div>
комментировать тут особо нечего, всё очень просто: ...
- 532. многоуровневое меню на php и mysql
- PHP/PHP Основы
... выводим все дочерние элементы
}
echo "</li>";
}
?>
<div id="menu">
<h2>меню</h2>
<ul>
<?php
...
- 533. как сделать кнопку для плавного прокручивания страницы наверх?
- JavaScript/JavaScript Основы
... <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="content">
<!-- длинный контент страницы --> ...
- 534. скрипт вывода новостей на php
- PHP/PHP Скрипты
... главное, его всегда соблюдать. дальше пишем скрипт вывода новостей на php:
<div id="news">
<?php
$news = file_get_contents("news.txt");
$news = explode("\n", $news);
for ($i ...
- 535. система лайков на php и ajax
- PHP/PHP Основы
... возникнуть не должно. теперь приступим к html-коду:
<div id="like" data-id="<?=$id?>"><?=$likes?></div>
здесь мы просто выводим данные на страницу. самому ...
- 536. тени для текста и блоков.
- CSS/CSS3
... <meta charset="utf-8">
<title>box-shadow</title>
</head>
<body>
<div class="block"></div>
</body>
</html>
и зададим какие-нибудь первоначальные стили ...
- 537. имитация пара над чашкой с горячим чаем
- CSS/CSS Основы
... animation-delay: calc(var(--i) * -0.5s) вместо переменной i, подставятся её значения.
<div class="vapour">
<span style="--i:1;"></span>
<span style="--i:7;"></span> ...
- 538. отображение маршрута между двумя точками на карте
- JavaScript/JavaScript Основы
... <h1>отображение маршрута на карте</h1>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> ...
- 539. валидация email в форме с помощью js
- JavaScript/JavaScript Основы
... прохождении валидации - зеленым.
<form id="form" action="#">
<div class="inputbox">
<input type="text" id="email" placeholder="enter email ...
- 540. уменьшение фоновой картинки при скролле страницы
- JavaScript/JavaScript Основы
... дальнейшем поместим фоновую картинку и секцию с длинным текстом.
<div id="header"></div>
<section>
<h2>background size change into small when scrolling</h2> ...
- 541. использование assert в php
- PHP/PHP Основы
... которые должны выполняться.
пример использования в функции
<?php
function divide($a, $b) {
assert($b != 0, 'делитель не может быть равен нулю'); ...
- 542. применение assert в python
- Python/Основы Python
... условия, которые должны выполняться.
пример использования в функции
def divide(a, b):
assert b != 0, 'делитель не может быть равен нулю' ...
- 543. как отобразить своё местоположение на карте с помощью javascript
- JavaScript/JavaScript Скрипты
... <input type="button" value="показать карту" onclick="showmap()">
<div id="ymapsid" style="width:600px;height:400px; margin-top: 20px;"></div>
</body>
</html>
как это работает? ...
- 544. добавление пользовательских меток и всплывающих окон на карту c javascript и leaflet
- JavaScript/JavaScript Основы
... <h1>карта с пользовательскими метками</h1>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> ...
- 545. анимация на css3.
- CSS/CSS3
... <title>animation</title>
<meta charset="utf-8">
</head>
<body>
<div class="block"></div>
</body>
</html>
теперь напишем стили
@keyframes spin {
0% {
...
- 546. делаем спиннер на html-css
- HTML/HTML Основы
... }
</style>
</head>
<body>
<div class="spinner">
<span class="spinner__animation"></span> ...
- 547. как сделать закругленную шапку сайта
- CSS/CSS Основы
... заголовок.
<section>
<div class="content">
<h2>curved header</h2>
</div>
</section>
css код
на данный ...
- 548. гамбургер меню на css или js? часть 2
- JavaScript/jQuery
... скрипты
2. вставляем в html файл между тегами div и ul строчку кода
<input id="menucss" type="checkbox">
3. заменяем тег div c классом .menuburger на label
<label class="menuburger" ...
- 549. как динамически получать комментарии из базы данных.
- JavaScript/JavaScript Основы
... document.getelementsbytagname('body')[0];
var elem = document.createelement('div');
elem.classname = 'comments';
...
- 550. как сделать треугольники на чистом css.
- CSS/CSS Основы
... <meta charset="utf-8">
<title>test</title>
</head>
<body>
<div class="box"></div>
</body>
</html>
теперь добавим стилей.
.box {
width: 100px;
...
- 551. как использовать псевдоклассы в css
- CSS/CSS3
... применяется к id, который указан в адресной строке браузера.
<div id="h1">заголовок раздела</div>
h1:target {
color: red;
font-weight: 500; ...
- 552. счетчик обратного счета на javascript с возможностью рестарта
- JavaScript/JavaScript Скрипты
... cleartimeout(this.timerhandle);
};
используется так:
// div блок
let el = element.classlist.contains("div");
// внутрений текст "00:00:00" или "00:00" ...
- 553. новинки в php7. часть 5.
- PHP/PHP Основы
... разработчики языка php придумали функцию intdiv().
давайте рассмотрим, как теперь это будет выглядеть:
intdiv(10, 3) = 3
вот и все! казалось бы, мелочь, а ...
- 554. как сделать многоуровневое меню-аккордион на css3.
- CSS/CSS3
... элемента мы можем использовать псевдо-класс :checked и смежный селектор(div + div), чтобы изменить свойство display для ul с none на block.
шаг за шагом: прежде ...
- 555. показать пароль на js
- JavaScript/JavaScript Основы
... обоим присваиваем классы для получения этих элементов через javascript.
<div class="inputs">
<input type="password" class="password">
<label> ...
- 556. flex блоки на примере шапки
- CSS/CSS3
... оберткой.
<header>
<div class="wrap-logo">
<img src="logo.jpg" alt="">
</div>
<nav>
<ul>
<li><a ...
- 557. выравнивание элементов формы на flex
- CSS/CSS3
... сложности у нас будет 4 ряда, в последнем из которых - кнопка (button).
<div class="form__wrapper">
<form>
<ul>
<li class="form__line">
<label ...
- 558. flex-свойства на практике
- CSS/CSS Основы
... всегда на связи</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> ...
- 559. как создать "выскальзывающее" меню на css.
- CSS/CSS3
... содержание
<a href="#" class="nav-toggle"></a>
</nav>
<div class="wrapper">
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit. quod autem beatae, sit ...
- 560. плавная анимация движения на css
- CSS/CSS Основы
... примера создадим фигуру и заставим её двигаться вниз и вправо.
<div class="square"></div> // html
// css
.square {
width: 200px;
height: 200px; ...
... классом, вводите только название класса и точку .box.
<div class="box"></div>
если нужен какой-то другой тег с классом, то соответственно ...
- 562. пример стилизации slick слайдера (часть 2)
- JavaScript/jQuery
... разметке и в js коде. добавляем класс multiple-items ко flex-контейнеру.
<div class="wedding multiple-items"></div>
копируем js код с базовыми настройками, который идет ...
- 563. плавный переход. css свойство transition
- CSS/CSS Основы
... качестве анимационного эффекта при наведении на кнопку.
<div class="button">hover effect</div>
.button {
color: #fff;
background-color: ...
- 564. адаптивная таблица для мобильных устройств
- CSS/CSS3
... разметка
для управления таблицей, мы обернули её в блок с классом container.
<div class="container">
<table>
<thead>
<tr> ...
- 565. вставка видео в видеоплеер (html+css)
- HTML/HTML Основы
... video с элементами управления controls)
<section class="smart_tv">
<div class="player">
<img src="smart-tv.png" alt="">
<video ...
- 566. как выравнять по центру блок переменной ширины.
- CSS/CSS Основы
... <head>
<meta charset="utf-8">
<title>navigation</title>
</head>
<body>
<div class="pagination">
<ul>
<li><a href="#">1</a></li>
...
- 567. адаптивное мобильное меню для сайта (часть 3)
- JavaScript/JavaScript Основы
... создадим контейнер mobile-nav для пунктов меню с ссылками на разделы сайта.
<div id="mobile-nav" class="mobile-nav">
<ul class="mobile-nav__list">
<li ...
- 568. эффект размытия и фокуса на css
- CSS/CSS Основы
... <img src="img/airline.png" alt="airline" class="airline">
<div class="bg"></div>
</section>
css стили
по умолчанию для всех элементов родителем ...
- 569. показать и скрыть элемент на js
- JavaScript/JavaScript Основы
... кнопке.
<button class="btn" type="button">
показать элемент
</button>
<div class="content hidden">
товарищи! постоянное информационно-пропагандистское ...
- 570. как сделать счетчик обратного отсчета на jquery.
- JavaScript/jQuery
... href="css/jquery.classycountdown.min.css" />
создайте блок там, где вы хотите вывести счетчик.
<div class="countdown"></div>
и запустите плагин
$('.countdown').classycountdown({
theme: "flat-colors", ...
- 571. анимированный фон с плагином particlesjs
- JavaScript/JavaScript Основы
... создадим на html странице область для анимированного фона.
<div id="particles" class="particles"></div>
4) стилизуем данный блок по классу particles, задав ему ...
- 572. настройка галереи fancybox 3
- JavaScript/jQuery
... идентификатором.
// html
<div id="hidden-window">
<h2>привет!</h2>
<p>я модальное окно.</p>
</div>
// css
#hidden-window {
display: ...
- 573. как сделать фотографию с вашей веб-камеры на javascript.
- JavaScript/JavaScript Основы
... 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 ...
- 574. парсинг сайтов в python
- Python/Основы Python
... # и получаем нужный div блок с контентом
info = soup.find('div', {'class': 'block_cont'}) ...
- 575. как сделать онлайн-трансляцию вашей веб-камеры на чистом javascript.
- JavaScript/JavaScript Основы
... 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> ...
- 576. вcплывающее окно на чистом css
- CSS/CSS Основы
... формой, которое будет появляться при клике по этой кнопке.
<div class="wrapper">...</div>
ограничим ширину контейнера и расположим его содержимое ...
- 577. блок со скошенным углом на css
- CSS/CSS Основы
... after). сделаем у блока правый верхний угол скошенным.
// html разметка
<div class="block">
<img class="icon" src="image.png" alt="">
<h2>иван ...
- 578. установка тени для блока и текста в css
- CSS/CSS3
... 10px 15px rgba (235, 230, 230, 0.5);
пример тени для блока
// html разметка
<div class="block"></div>
// css код
.block {
width: 250px;
height: 150px; ...
- 579. как обернуть элемент в макет браузера или устройства.
- JavaScript/jQuery
... javascript код должны выглядеть так:
<div class="selector">
<!-- какое-то содержание(блоки, картинки, фреймы...) -->
</div>
$('.selector').devicemock({
type ...
... <html>
<section class="map">
<div class="container">
код карты
</div>
</section>
// css
.map {
padding: ...
- 581. адаптивная шапка сайта (float vs flex)
- CSS/CSS3
... прилипать к логотипу.
<header>
<div class="wrap-logo">
<a href="#logo" class="logo">логотип сайта</a>
</div>
<nav>
<a ...
- 582. примеры свойства transform в css
- CSS/CSS3
... разметки:
<div>
<a class="button_anime" href="#">заказать работу
<img src="settings.png" alt="">
</a>
</div>
в css ...
- 583. метод queryselectorall в javascript
- JavaScript/JavaScript Основы
... непосредственный
элемент img, содержащийся внутри его родительского div , я могу написать
queryselector ("div + img").
а как насчет getelementbyid, getelementsbytagname, getelementsbyclassname? ...
- 584. адаптивное меню для сайта. часть 2
- CSS/CSS3
... поставили в html файл, после закрывающего тега nav.
<div>
<a href="#" class="menu-trigger">меню</a>
</div>
задали ей стили и сразу спрятали.
.menu-trigger ...
- 585. выдвигающаяся форма поиска по клику
- JavaScript/jQuery
... иконку.
<body>
<div class="wrap">
<input type="text" class="input" placeholder="поиск">
<i class="fas fa-search" aria-hidden="true"></i>
</div>
</body>
...
- 586. css селекторы выбирают стиль
- CSS/CSS3
... будет применяться к тегу <i>.
дочерний селектор
div > span {..}
тег span является ребенком, а div – родителем. значение стиля всегда применяется ...
- 587. bxslider - настройки и примеры
- JavaScript/jQuery
... отдельный слайд с картинкой. этот список мы поместили в контейнер bx-slider.
<div class="bx-wrap">
<ul class="bx-slider">
<li><img src="images/stil_01.jpg" title="скандинавский ...
- 588. как сделать мультилендинг
- PHP/PHP Основы
... тега img.
<div>
<img src="img/<?php if (!empty($utm_term)) {
echo $utm_term;
} else { echo 'kettle'; }?>.jpg" alt="">
</div>
в случае ...
- 589. custom post type в wordpress
- Софт/Софт для создания сайтов
... $loop->have_posts() ) : $loop->the_post();
the_title();
echo '<div class="entry-content">';
the_content();
echo '</div>';
endwhile;
?>
аналогичный действия надо ...
- 590. css анимация при прокрутке страницы
- CSS/CSS3
... прописываете wow и название анимации.
было так:
<div id="item" class="animated pulse">
а стало так:
<div id="item" class="wow pulse">
теперь анимация запускается ...
- 591. анимация при скролле на wordpress
- CSS/CSS3
... wow, к любому блочному элементу на сайте.
<div class="wow bounceinup">здесь ваш текст, картинка, видео..</div>
после всех выполненных шагов, анимация ...
- 592. обратная связь на wordpress
- Софт/Софт для создания сайтов
... код в виджете:
<div id="customform" style="display:none;"> /* скрыть форму */
[contact-form-7 id="823" title="обратная связь"] /* шорткод */
</div>
где даем id произвольное ...
- 593. как сделать поиск по сайту на html
- CSS/CSS3
... <a href="#">услуги</a>
<a href="#">контакты</a>
<div class="search-box">
<form action="#">
<input type="text" placeholder="поиск.." ...
- 594. как установить минимальную длину строки в javascript?
- JavaScript/JavaScript Основы
... ниже (для демонстрационных целей я выбрал произвольную дату):
<div id="app"></div>
var app = document.queryselector('#app');
// получение текущей даты
...
- 595. как получить input в javascript (1 часть)
- JavaScript/JavaScript Основы
... у инпутов текстовым, для возможности ввода, как чисел, так и строк.
<div class="form-group">
<h3>умножение чисел</h3>
<label for="inp_1">введите число ...
- 596. сборка javascript модулей с помощью webpack
- JavaScript/JavaScript Основы
... <title>webpack</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
далее нам нужно установить сам webpack ...
- 597. jquery эффекты
- JavaScript/jQuery
... применяемых для создания различных эффектов и стилизуем его.
<div id="test"></div>
#test {
background:#bdfa02;
height:100px;
width:200px; ...
- 598. скрипт, показывающий сколько времени займет чтение статьи
- PHP/PHP Скрипты
... }
}
добавляем где-то в начале статьи следующий код:
<div class = "estimated-time">
<?php $post_content = "..."; // содержимое статьи ?> ...
- 599. как выделить блок текста на css
- CSS/CSS3
... стилями, заменяя exam_01 на соответствующие классы (exam_02, exam_03, exam_04, exam_05).
<div class="exam_01">
красивое оформление важных блоков с текстом привлекает ...
- 600. nodejs. как создать "список дел". часть 3.
- JavaScript/JavaScript Основы
... href="/assets/styles.css">
</head>
<body>
<h1>список дел</h1>
<div id="todo-table">
<form>
<input type="text" name="item" placeholder="добавьте ...
- 601. анимация кнопки меню гамбургер
- JavaScript/jQuery
... полоски, стилизовав теги span.
<div class="gamburger">
<span></span>
<span></span>
<span></span>
</div>
идея в том, что убрав среднюю ...
- 602. как изменить цвет выделенного текста в css.
- CSS/CSS Основы
... }
</style>
</head>
<body>
<div class="content">
это просто текст, который меняет свой стиль при выделении. посмотрите как этот пример ...
- 603. как сделать интерактивный 3d объект на jquery.
- JavaScript/jQuery
... html-структуру и загрузите картинки:
<body>
...
<div id="interactive_3d">
<img src="images/frame_1.png">
</div>
...
</body>
теперь вызовите функцию ...
- 604. как анимировать элементы при прокрутке страницы.
- JavaScript/JavaScript Основы
... добавьте data-scroll атрибут в html-элемент, который вы хотите анимировать.
<div data-scroll></div>
когда вы прокручиваете страницу и элемент становится видимым ...
- 605. верстка формы входа (часть 1)
- CSS/CSS3
... и маленький
<section class="form-section">
<div class="form">
// форма
</div>
</section>
на макете фон секции затемнён, применим ...
- 606. визуализация данных и рисование на javascript.
- JavaScript/JavaScript Основы
... </head>
2) создайте контейнер для диаграммы:
<body>
<div id="container" style="width: 500px; height: 400px;"></div>
</body>
3) создайте диаграмму. поместите тег <script> ...
- 607. 10 полезных sass миксинов.
- CSS/CSS Основы
... смотрите ниже пример использованя миксина без каких-либо аргументов.
div::after {
@include pseudo;
top: -1rem; left: -1rem;
width: 1rem; height: 1rem;
}
отзывчивое ...
- 608. простой роутер на javascript
- JavaScript/JavaScript Основы
... <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> ...
- 609. препроцессор less, начиная с простого
- CSS/CSS Основы
... как мы это делали в css, но вместо значений подставляем переменные.
less
div {
padding: 0;
font-family: roboto, sans-serif;
color: ...
- 610. первая буква логотипа google
- CSS/CSS Основы
... разметке, а можно отобразить его с помощью псевдоэлемента before.
<div class="google_logo"></div>
рисуем синий блок
весь блок строится на бордерах (border). ...
- 611. как сделать 3d модель объекта на javascript.
- JavaScript/JavaScript Основы
... файл или внизу html страницы. далее, создайте структуру следующего вида:
<div id="myturntable" class="turntable">
<ul>
<li data-img-src="images/mypic1.jpg"></li> ...
- 612. функция calc() в css3.
- CSS/CSS3
... умножение
/ - деление
рассмотрим конкретный пример
<div class="alert">this is an alert! be accurate!</div>
теперь добавим немного стилей
.alert {
width: 100%;
...
- 613. делаем красивые графики на javascript с помощью chartist.js.
- JavaScript/JavaScript Скрипты
... необходимые скрипты и стили, подключите их.
сделайте разметку
<div class="ct-chart ct-perfect-fourth"></div>
создайте объект с настройками, проведите линию с этими ...
- 614. заглушка для изображений на сайте
- HTML/HTML Основы
... приложение работает как надо.
пример создания галереи
//html
<div class="gallery">
<a href="#"><img src="https://via.placeholder.com/200x150" alt=""></a> ...
- 615. свойства css3 - box-ordinal-group и box-orient.
- CSS/CSS3
... порядке должны отображаться дочерние блоки на странице.
вот его синтаксис:
#div {
box-ordinal-group: 3;
}
те блоки, у которых число меньше, будут отображаться ...
- 616. верстаем админку на css grid
- HTML/HTML Основы
... <body>
<!-- главный контейнер -->
<div class="container">
<!-- заголовок -->
<header class="dashboard-header"> ...
- 617. как сделать привлекательный чеклист с перелистыванием свайпами.
- JavaScript/JavaScript Скрипты
... модуля.
angular.module('myapp', ['swipeli']);
директива
создайте директиву
<div
swipe-li
class="item"
disabled=""
intent="true"
accept="done(item)"
reject="skip(item)" ...
- 618. ошибки новичков при верстке сайтов #3
- CSS/CSS Основы
... легко можно допустить ошибку и даже ее не заметить.
// html
<div class="box-icon ">..</div>
<h1>документация</h1>
// css
.box-icon {
padding: ...
- 619. как сделать эффект вдавленного текста на css3.
- CSS/CSS3
... <title>вдавленный текст</title>
</head>
<body>
<div class="wrapper">
<p>вдавленный текст</p>
</div>
</body>
</html>
но и css код не сложнее ...
- 620. транслит текста на javascript
- JavaScript/JavaScript Основы
...
<input type="text" id="trtext" value="" />
<div id="result"></div>
<script>
let el = document.queryselector("#trtext"); ...
- 621. сборка react проекта с помошью parcel
- JavaScript/JavaScript Основы
... <title>онлайн магазин</title>
</head>
<body>
<div id="app"></div>
<script src="./main.js"></script>
</body>
</html>
...
- 622. фильтры в jquery
- JavaScript/jQuery
... не имеют детей.
$("p:empty");
:parent – выберет элементы, имеющие детей.
$("div").filter(":parent");
:has – выбирает все заголовки с курсивным начертанием. ...
- 623. как загружать файлы с url-адреса в python
- Python/Основы Python
... 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: ...
- 624. fetch api: get и post запросы
- JavaScript/JavaScript Основы
... post запросы
а вот так можно отправить post запрос:
post('https://appdividend.com/api/v1/users', {user: 'krunal'})
.then(data => console.log(data)) // обрабатываем результат вызова response.json() ...
- 625. как пользоваться advanced custom fields
- Софт/Софт для создания сайтов
... использую дефолтную тему twenty seventeen. вставьте код перед закрывающим тегом div с классом entry-content.
визуально, на сайте, вы увидите такие же списки, ...
... document в $(document).height(), мы можем
использовать такие элементы как section, article или div, которые содержат
контент**,** для вычисления более точной позиции индикатора ...
- 627. приоритет и наследование в сss на практике
- CSS/CSS Основы
... атрибуты основного шрифта заранее в тег body (предок). то есть, все теги (p, div), что находятся внутри body, являются его потомками, они так же унаследуют ...
- 628. стоит ли использовать css reset
- CSS/CSS Основы
... 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, ...
- 629. свойство z-index и плеер youtube
- CSS/CSS Основы
... столкнуться. в мою задачу входило сделать всплывающее окно с помощью блока div, и оно должно быть, разумеется, поверх всего контента. я поставил нужный ...
- 630. объединяем изображения в видеофайл с python и opencv
- Python/Основы Python
... 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) ...
- 631. просмотр html тегов в tkinter
- Python/Основы Python
... тегов.
[ 'a', 'b', 'br', 'code', 'div', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6','i', 'img', 'li', 'ul', 'ol', 'mark', 'p', 'pre', ...
- 632. свойство css background-image в веб-дизайне
- CSS/CSS3
... только тегом body, а широко применяется в оформлении сайта, например для: div, li, p, table, header, footer.
рассмотрим пример:
<!doctype html>
<html>
<head>
<style> ...
- 633. hover эффект для кнопки + псевдокласс :nth-child
- CSS/CSS3
... происходить в файле стилей. одна ссылка и два span, решили обойтись даже без div-а. сначала стилизуем гиперссылку, из которой и будет состоять наша кнопка. ...
- 634. эффект анимированного неонового свечения у кнопки
- CSS/CSS Основы
... создание html-разметки
сделать кнопку можно разными способами: через тег button, div или a. я предпочитаю сделать это сразу через ссылку a, поскольку кнопка ...
- 635. автоматизация задач с помощью python: как оптимизировать повседневную работу
- Python/Основы Python
... soup = beautifulsoup(response.text, 'html.parser')
# извлечение нужной информации
temperature = soup.find('div', class_='temperature').text
print(f'temperature: {temperature}')
с помощью этого ...
- 636. многоколоночный текст (column-count)
- CSS/CSS3
... свойства и числа: column-count: 3;
просто задаем любому блочному элементу (p, div) с текстом - класс с заданным числом колонок. в результате текст автоматически ...
- 637. показать скрытый текст на js
- JavaScript/JavaScript Основы
...
добавим ещё css стилей для красоты
body {
font-family: tahoma;
}
div {
background: #f2eaea;
margin: 0 auto;
max-width: ...
- 638. как нарисовать треугольник на css
- CSS/CSS Основы
... solid;
border-width: 10px 5px 0 5px;
height: 0;
width: 0;
}
далее к обычному блоку div можно применить класс triangle, в результате данный блок станет стрелкой ...
- 639. что такое svg? поддержка старых браузеров.
- HTML/HTML Основы
... );
}
всё, что нам теперь осталось, это добавить svg в документ и блок div c id равным тому, что записан в нашем файле myimage.js в конструкторе raphael первым ...
- 640. удаление всплывающих окон через консоль браузера c javascript
- JavaScript/JavaScript Скрипты
... const tagname = prompt('введите тег для удаления всплывающих окон:', 'div');
if (tagname) {
removepopupbytag(tagname);
} else { ...
- 641. создание интерактивного информационного окна на веб-странице с помощью javascript
- JavaScript/JavaScript Скрипты
... // создание информационного окна
const infobox = document.createelement('div');
infobox.textcontent = `наведен элемент с тегом: ${tagname}`; ...
- 642. красивое оформление статьи на html
- HTML/HTML 5
... оборачиваем тегом blockquote, вместо него можно использовать теги <p> или </div>.
<blockquote>
..
</blockquote>
при стилизации тега blockquote, ...
... горизонтального
индикатора чтения. но вместо использования традиционных элементов div/span и
сложной, запутанной математики работы индикатора, мы будем использовать ...
- 644. калькулятор на c# и winforms. часть 2
- C#/Основы C#
... соответствующих арифметических операций
сложение - add
вычитание - sub
деление - div
умножение - mult
очистить - clear
точка - dot
равно - equal
при таком ...
- 645. самые часто используемые сокращения в текстовом редакторе sublime text 2.
- Софт/Софт для создания сайтов
... данная возможность бывает полезна.
если у вас, к примеру, в html есть блоки div с каким-то содержимым, то вы можете свернуть те, которые вам мешают. для ...
- 646. адаптивное навигационное меню с иконками
- CSS/CSS3
...
<a href="#"><i class="fas fa-fw fa-map-marker"></i> контакты</a>
</nav></div>
</body>
что означают эти классы?
<i class="fas fa-fw fa-home"></i>
...
- 647. псевдоэлемент after и псевдокласс last-child
- CSS/CSS Основы
для верстальщика псевдоэлементы и псевдоклассы – незаменимые помощники и я вам это сейчас докажу на примере фрагмента psd макета.
дизайнеры ...
- 648. создать и вывести массив в js
- JavaScript/JavaScript Основы
для лучшего понимания, что такое массивы, сделаем вид, что их не существует, обойдемся пока без них. однако для проведения эксперимента, надо ...
- 649. свойство «float» на практике
- CSS/CSS3
эта статья является продолжением предыдущей статьи на тему использования свойства float. почему мы такое пристальное внимание уделяем этому ...
- 650. добавление класса по клику в javascript
- JavaScript/JavaScript Основы
на этом уроке, мы научимся добавлять элементу, по которому кликнул пользователь, класс, чтобы изменить его внешний вид, применяя стили, добавленного ...
- 651. регулярные выражения в javascript #3
- JavaScript/JavaScript Основы
термин квантификаторы в регулярных выражениях звучит пугающе, но по сути это специальные символы, задающие количество повторений. они призваны ...
- 652. примеры цикла for в javascript
- JavaScript/JavaScript Основы
начнем наше знакомство с циклом for в javascript, сразу с примеров и только в конце статьи пробежимся немного по теории.
представьте себе, что вы, ...
- 653. программирование на php и mysql с нуля до гуру
- PHP/PHP Основы
приблизительно год назад вышла новая версия языка программирования php8. его можно смело назвать - языком номер один в веб-программировании на ...
- 654. примеры if-else в javascript
- JavaScript/JavaScript Основы
примеры условных операторов if-else (если-иначе), нам не надо специально придумывать, они приходят из жизни. то, как мы себя ведем или какой делаем ...
- 655. 6 лучших генераторов css-кода
- Софт/Софт для создания сайтов
как начинающие, так и опытные верстальщики не могли не заметить, что вместе с новыми возможностями в css3 технологиях, объем самого css-кода, существенно ...
- 656. распознавание текста на изображении с c# и tesseract
- C#/Основы C#
технология распознавания символов с изображения в редактируемый текст достаточно непростая задача. для подобных целей используется технология ...
- 657. как установить и настроить eslint
- JavaScript/JavaScript Основы
плагин eslint - это лучший помощник для отлавливания ошибок в процессе написания javascript кода. предупреждая нас о них прямо на лету в редакторе кода. ...
- 658. как сохранить файл в c# через windows form
- C#/Основы C#
опция сохранения на компьютере распространена повсюду. бывает что создавая приложение необходимо, чтобы оно обладало данной функцией.
создание ...
- 659. программное сворачивание окон с python и pyautogui
- Python/Основы Python
в сегодняшней статье мы рассмотрим создание скрипта для сворачивания всех окон на экране вашего компьютера. нам понадобится python и библиотека ...
- 660. как получить список статей с python и bs4
- Python/Основы Python
в сегодняшней статье мы рассмотрим способ получения списка статей, из определенной категории нашего сайта.
вот что нас интересует:
данный ...
у нас есть схема структуры сайта с ключевыми словами, которые будут вставляться в статью, давая четкий сигнал поисковым машинам, на какой запрос ...
- 662. запрос из множества таблиц в sql
- MySQL/SQL
в сегодняшней статье мы рассмотрим как выбрать данные из несвязанных таблиц с sql и оператором join. для чего это нужно. прежде всего, скажем, что ...
- 663. космические приключения с python и pygame. перемещение астероидов
- Python/Основы Python
здравствуйте! в цикле статей по созданию космической аркады, с python и pygame, мы достигли того что на игровом поле отображается космический корабль ...
на прошлом уроке мы создали схему структуры сайта, на котором будет 6 категорий, одна из категорий будет состоять из двух подкатегорий. все категории ...
- 665. выпадающий список с tkinter и python
- Python/Основы Python
язык python имеет множество графических библиотек. одной из них является tkinter. и в сегодняшней статье мы рассмотрим как создать раскрывающийся ...
- 666. как вывести результат в javascript (2 часть)
- JavaScript/JavaScript Основы
объявление переменных
для того, чтобы объявить в javascript переменную, пишут так:
var name;
где name – осмысленное название переменной, написанное ...
для тех кто решил всерьёз заняться программированием, важно определиться для
какой платформы писать приложения. хотя кроссплатформенная разработка ...
- 668. xml парсер строк
- XML/XML Основы
xml – расширенный язык разметки, описывающий какие-либо данные при помощи свободных тегов. это значит, что автор документа, придумывает названия ...
- 669. основы ооп в javascript
- JavaScript/JavaScript Скрипты
javascript является объектно-ориентированным языком (ооп) и главную роль в нем играет объект. он может в себе содержать методы, свойства, а также любой ...
- 670. mobile first верстка
- JavaScript/jQuery
на прошлом уроке, мы привязали к кнопке гамбургер выезжающее меню при клике по ней. посмотрите демонстрационный пример прошлого урока, как ...
- 671. адаптивное меню гамбургер
- JavaScript/jQuery
на прошлом уроке, мы создали анимацию для кнопки гамбургер, без привязки к меню. на этом уроке привяжем к нашей кнопке адаптивное меню.
на мобильных ...
- 672. создаем калькулятор на c# и winforms
- C#/Основы C#
в сегодняшней статье мы создадим простой калькулятор способный выполнять сложение, вычитание, умножение, а также деление. и все это мы реализуем ...
- 673. клонирование объектов в javascript
- JavaScript/JavaScript Основы
из этой статьи вы узнаете, как создать клон объекта, то есть его точную копию. для примера создадим объект person, который нам нужно клонировать. ...
- 674. верстка кнопок на сайте
- HTML/HTML 5
какие кнопки обычно встречаются на сайте? я разделили бы их на два вида: кнопки внутри формы и кнопки-ссылки. и те и другие необходимо уметь верстать. ...
- 675. проверка загрузки изображений с помощью javascript
- JavaScript/Java Основы
новички много раз уже слышали, что прежде чем загрузить изображения на сайт, то нужно их как следует сжать. поскольку не оптимизированная графика ...
- 676. делаем вместе анимированное выпадающее меню на css3
- CSS/CSS3
в этом уроке мы научимся с вами делать горизонтальное анимированное выпадающее меню на
css3, при наведении курсором на его категории, будет меняться ...
- 677. форма обратной связи на php с отправкой на e-mail
- PHP/PHP Основы
на этом уроке мы познакомимся с функцией mail (), на примере создания формы
обратной связи на php с последующей отправкой полученных данных на почту. ...
- 678. как изменить шапку сайта (часть 3)
- CSS/CSS3
в первой и второй части урока, мы заново создали шапку сайта, но этого не достаточно. при уменьшении ширины экрана до 1000 пикселей, элементы сайта ...
- 679. фильтрация по первым буквам на jquery
- JavaScript/jQuery
моему другу на собеседовании в одну it компанию, дали следующее задание: "как при помощи jquery отфильтровать данные из списка по первым буквам в ...
- 680. зачем нужен html тег code?
- HTML/HTML Основы
дорогие друзья! сегодня мы поговорим о html теге code. при написании конкретно этой статьи или любых других обучающих материалов, периодически необходимо ...
- 681. кнопка-перевертыш с 3d-эффектом
- CSS/CSS Основы
в спокойном состоянии кнопка выглядит обычно, в стиле плоского дизайна. однако при наведении на нее мыши, происходит переворачивание с 3d-эффектом. ...
- 682. как организовать файлы по расширению в python
- Python/Основы Python
организация файлов на компьютере может быть утомительной задачей, особенно когда это делается вручную. некоторые папки (например, папка "загрузки") ...
- 683. анимация для меню с индикатором. часть #2
- JavaScript/JavaScript Основы
продолжим создание индикатора для меню навигации. здесь находится первая часть урока.
стилизация и hover-эффект меню
при наведении мыши, иконка ...
- 684. манипуляции с атрибутами в jquery
- JavaScript/jQuery
метод attr() получает или устанавливает значение атрибута элемента на странице. если элемент не имеет такого атрибута, то возвращается значение ...
- 685. циклы while и for в java
- Java/Java Основы
циклы в программировании – это повторяющиеся одинаковые действия. приведу пример из реальной жизни: "производственная машина на конвейере ...
- 686. креативный кастомный чекбокс на css
- CSS/CSS Основы
состояние у переключателя включено|выключено, можно усилить с помощью css кастомизации и смайлика.
создание нативного чекбокса
сначала создадим ...
- 687. основные операции в java
- Java/Java Основы
все представленные ниже операции на java пишутся внутри конструкции. данная конструкция автоматически генерируется netbeans-ом, при создании нового ...
- 688. типы переменных в java
- Java/Java Основы
в любом языке программирования переменная играет одинаковую роль и java здесь не исключение. переменная это ссылка на определенную ячейку в оперативной ...
- 689. эффект многослойного текста
- CSS/CSS Основы
для создания эффекта многослойного текста, нам потребуется атрибут data-text, два псевдоэлемента, прозрачный цвет и свойство text-stroke.
html разметка ...
- 690. как изменить цвет текста в python
- Python/Основы Python
выводить текст на консоли в разных цветах довольно удобно и практично, от создания причудливых сценариев сканирования до выделения различных ...
- 691. введение и среда разработки для java
- Java/Java Основы
прежде чем начинать изучение java, нужно установить две программы: java developer kit (jdk) – это комплект для разработчика, включающий в себя компилятор, ...
семантическое ядро – это список ключевых слов, по которым будут заходить пользователи на ваш сайт из поисковых систем.
сначала собирают семантическое ...
- 693. cоздание списка из массива на js
- JavaScript/JavaScript Основы
перед нами стоит задача создать и вывести на страницу список книг из массива, хранящегося в базе данных на сервере. на практике это значит, что ...
- 694. 3 способа удаления дубликатов из массива в js
- JavaScript/JavaScript Основы
существует три способа удаления дубликатов из массива. в данной статье рассмотрим каждый из них и выясним наиболее подходящий.
первый способ ...
- 695. как использовать свойство «float» в css
- CSS/CSS3
сегодня трудно себе представить современный сайт, при верстке которого не использовался бы элемент "float". для профессионала-верстальщика или ...
- 696. портрет с текстовым эффектом
- CSS/CSS Основы
думаю, что многие из вас видели в интернете изображения, заполненные текстом. заполнить текстом можно любую фигуру. на этом уроке мы покроем ...
в этой статье мы разберем основы ajax запросов. научимся настраивать и отправлять запрос, а также получать ответ от сервера.
классическая модель ...
- 698. космические приключения с python и pygame. обработка столкновений
- Python/Основы Python
мы продолжаем создание игры про "космические приключения" с python и pygame. очень важной частью этой игры является возможность уничтожения вашего ...
- 699. как отключить обновления на wordpress
- Софт/Софт для создания сайтов
разработчики клиентских сайтов на wordpress, часто сталкиваются с необходимостью восстанавливать сайт, после очередного обновления какого-нибудь ...
проверка на сезонность и перспективность
нам надо исключить, что выбранная ниша не имеет сезонности и нисходящего тренда. поскольку, это наш ...
- 701. плавное подчеркивание ссылки при наведении
- CSS/CSS3
на этом уроке я покажу вам как реализовать такой hover эффект, как плавное подчеркивание ссылки при наведении. подчеркивающая линия будет появляться ...
- 702. как сделать сайдбар на wordpress
- Софт/Софт для создания сайтов
из этой статьи вы узнаете как сделать сайдбар на wordpress. сайдбаром мы называем правую или левую колонку сайта, на которой размещены виджеты. виджеты ...
- 703. что такое таксономия в wordpress
- Софт/Софт для создания сайтов
на прошлом уроке мы создали новый тип записи post type book более подходящий для продажи книг, а на этом уроке научимся создавать для него таксономию ...
- 704. файлы темы wordpress
- Софт/Софт для создания сайтов
лучше всего начать изучение структуру файлов темы wordpress на примере стартовой темы underscore. обычно разработку под wordpress начинают с этой базовой ...
- 705. как установить utm метки на сайте через php. часть 2.
- PHP/PHP Основы
на прошлом уроке мы узнали, что такое utm-метки и настроили get-запросы меток в скрытых полях формы. на этом уроке вы узнаете, как получить данные ...
- 706. как установить utm метки на сайте через php. часть 1.
- PHP/PHP Основы
на этом уроке вы узнаете, что такое utm-метки, как установить их на сайте и как настроить получение данных из utm-меток на ваш e-mail.
что такое utm-метки? ...
что такое копирайтинг?
копирайтинг - это умение написания текста, не ради выражения чувств или собственного мнения. а способность подбирать ...
- 708. обзор библиотеки jquery ui с примером
- JavaScript/jQuery
библиотека jquery ui (user interface) представляет собой набор шаблонных элементов для создания пользовательского интерфейса и является частью библиотеки ...
- 709. выезжающее боковое меню. часть 2
- CSS/CSS3
продолжаем делать выезжающее боковое меню по клику, в первой части урока была сделана html-разметка, стилизованы все селекторы, теперь осталось ...
чтобы сделать свою версию этого дизайна, на первых порах вам не нужен photoshop и дизайнерские навыки. простые вещи можно сделать легко и быстро, ...
- 711. вертикальное меню на css
- CSS/CSS3
вертикальное меню на css - это список ссылок, ведущих на разные страницы сайта. неплохо смотрится, когда список ссылок вместо простых маркеров, ...
- 712. верстка psd макета по bootstrap 4 сетке. часть 1
- CSS/CSS Основы
на этом уроке мы подготовимся к верстке сайта по psd макету, используя только сетку (grid system) от фреймворка bootstrap 4. научившись такому методу верстки, ...
интригующее название «заработок на продаже товара, которого у вас нет нет» никакая не мошенническая схема, а вполне реальный бизнес. который ...
- 714. всплывающая форма подписки и бесплатная рассылка на wordpress
- Софт/Софт для создания сайтов
приветствую вас друзья! на этом уроке вы узнаете как создать всплывающую форму подписки для сбора базы подписчиков с последующей бесплатной ...
- 715. всплывающие подсказки при наведении
- CSS/CSS3
на этом уроке мы сделаем всплывающую подсказку при наведении на иконку на чистом css. точно такой же принцип можно применить к картинке. перейдите ...
- 716. иконки для меню wordpress
- Софт/Софт для создания сайтов
на этом уроке мы научимся к меню wordpress добавлять шрифтовые иконки. согласитесь со мной, что иконки не только украшают сайт, но и делают его более ...
- 717. красивый эффект при наведении (:before и :after)
- CSS/CSS3
на этом уроке мы сделаем меню с красивым эффектом при наведении с использованием псевдоэлементов - :after и :before. что такое псевдоэлементы, мы очень ...
- 718. мой партнерский магазин. xml-фид. часть 1
- XML/XML Основы
идея создания собственного интернет-магазина, наполненного чужими товарами (своих у меня нет), уже давно не давала мне покоя. я постепенно шел ...
конструктор яндекс карт
независимо от этого куда вы в дальнейшем будете вставлять яндекс карту, первый шаг всегда начинается с конструктора ...
- 720. псевдоэлементы after и before. примеры
- CSS/CSS Основы
в этой статье вы узнаете историю возникновения и использования псевдоэлементов after и before в css. рассмотрим несколько примеров, где они активно ...
статья "бриф на разработку сайта" - ответила на вопрос, что такое бриф и кому он нужен. данная статья будет практическим руководством, как создать ...
- 722. портфолио верстальщика на конструкторе mobirise. часть 2
- Софт/Софт для создания сайтов
в статье "конструктор mobirise для верстальщика" была подробно раскрыта тема, чем полезен конструктор mobirise верстальщику. в этой статье, я прокомментирую ...
- 723. конструктор mobirise для верстальщика. часть 1
- Софт/Софт для создания сайтов
это будет не просто очередная статья в стиле "копирайтеров-теоретиков" на тему, что такое "бесплатный конструктор сайтов mobirise". прежде, чем приступить ...
- 724. регистрация домена
- Регистрация сайта
регистрация доменовдомен ru - 99 рубдомен com - 350 рубзарегистрируй себе домен!имя: зона: rusucomnetorginfobiznamemobitv2domains.ruесли вы читаете эти строки, значит, ...
- 725. партнерский магазин на wordpress
- Софт/Софт для создания сайтов
если вам тяжело дается освоение разных языков программирования, верстки, то не отчаивайтесь, посмотрите в сторону заработка на собственном ...
в статье "бриф на разработку сайта" вы узнали что такое бриф и зачем надо анкетировать заказчика. вам крупно повезет, если у заказчика существует ...
- 727. cms для лендингов - textolite
- Софт/Софт для создания сайтов
официальный сайт: textolite.ru
textolite представляет собой простую систему управления статичным сайтом с бесплатной и платной расширенной версией. ...
- 728. адаптивные картинки в css3
- CSS/CSS3
зачем обязательно надо делать картинки адаптивными? к сожалению, то счастливое время, когда можно было вставить картинку на веб-сайт и указать ...
что такое a/b тестирование сайта
a/b тестирование - это сравнение двух страниц с разным дизайном, но в одинаковых условиях, чтобы выяснить какая ...
- 730. как создать виджет на wordpress
- Софт/Софт для создания сайтов
на прошлом уроке вы научились создавать свой собственный сайдбар, а на этом уроке вы узнаете как создать свой виджет на wordpress. виджет - это модуль, ...
- 731. как подключить css, шрифт и скрипты на wordpress
- Софт/Софт для создания сайтов
данная статья научит вас, как подключать стили, шрифты и скрипты к сайту. дело в том, что верстальщик отлично знает, что такие вещи подключаются ...
проверка выбранной ниши по охвату аудитории
информационный сайт зарабатывает на пользователях, которые кликают по контекстной рекламе. нам ...
- 733. как сделать alert кнопку в css
- CSS/CSS3
на сайтах кнопки alert (оповещение), используются для взаимодействия с пользователем. смысловая составляющая alert кнопок передается в основном ...
- 734. таймер обратного отсчета на javascript
- JavaScript/Java Основы
на этом уроке, мы сделаем таймер обратного отсчета на javascript, используя уже готовую верстку на html и css. если на странице вашего сайта или лендинга ...
- 735. seo wordpress плагины
- Софт/Софт для создания сайтов
независимо от того делаете ли вы сайт на wordpress для себя или на заказ, базового функционала этой популярной cms будет явно недостаточно. перед нами ...
- 736. защита сайта на wordpress
- Софт/Софт для создания сайтов
на предыдущем уроке вы узнали какие seo плагины рекомендуется установить на любой wordpress сайт. на этом уроке вы узнаете как защитить ваш сайт и ...
- 737. как изменить маркер списка
- CSS/CSS3
по умолчанию маркером списка ul, служит простая черная точка. я знаю, что многие начинающие верстальщики, используют маркированные списки для ...
- 738. вывод записей wordpress без плагина
- Софт/Софт для создания сайтов
приветствую вас друзья! на этом уроке мы научимся обращаться к базе данных wordpress-а и выводить на сайте нужную нам информацию, в нужном месте и ...
- 739. как сделать чекбокс на html/css
- CSS/CSS3
сегодня вы узнаете как сделать чекбокс на html и добавить ему css стилей для лучшей совместимости с дизайном сайта.
демонстрация
чекбокс на ...
- 740. импорт товаров в woocommerce
- Софт/Софт для создания сайтов
как сделать массовый импорт товаров в интернет-магазин, работающий на плагине wordpress – woocommerce? совсем недавно этого нельзя было сделать бесплатно, ...
- 741. как изменить полосу прокрутки на css
- CSS/CSS3
на сегодняшний день, можно очень простым способом изменить внешний вид всем надоевшей серой полосы прокрутки. и для этого не нужно подключать ...
- 742. оплата на сайте (яндекс.деньги)
- Софт/Софт для раскрутки сайтов
сервис яндекс.деньги позволяет любому физическому лицу (для юрлиц и ип есть яндекс.касса), разместить на сайте форму оплаты, даже владельцам ...
- 743. креативный css hover-эффект для меню навигации
- CSS/CSS Основы
чтобы пользователю было веселее переходить по ссылкам, веб-разработчики придумывают креативные hover-эффекты. зачастую хватает одного css, без ...
- 744. бесплатный обратный звонок на сайте
- Софт/Софт для раскрутки сайтов
тем, кто знает, что такое обратный звонок на сайте, предлагаю не читать, а перейти сразу к следующей главе. для остальных постараюсь объяснить, ...
- 745. боковая панель приложения на c# и windowsforms
- C#/Основы C#
в сегодняшней статье мы попробуем создать боковое меню с изменяющимися данными, при помощи c# и фреймворка windowsforms. для данного примера нам понадобится ...
- 746. поиск и замена строк в файле с regex на c# и winforms
- C#/Основы C#
здравствуйте. сегодня мы создадим простое оконное приложение, для замены строк в
файле, с помощью c#, winforms и модуля regex. для проекта понадобится ...
- 747. создаем простой синтезатор с c# и windowsforms
- C#/Основы C#
здравствуйте. сегодня мы создадим простой проект синтезатора на
windowsforms и c#. прежде всего нам понадобятся звуки нот в
формате wav.
перейдите ...
- 748. видео фон для сайта
- HTML/HTML Основы
на этом уроке мы научимся устанавливать на сайт видео фон во всю ширину экрана. обычно такие видео фоны служат вместо статичного фона в верхней ...
- 749. загрузка нескольких файлов на сервер в expressjs
- JavaScript/JavaScript Основы
продолжаем предыдущую статью, в которой рассказывалось как загрузить файл на сервер в expressjs.
в данной статье мы рассмотрим как загрузить сразу ...
- 750. создание простейшего веб-сервера в c#
- C#/Основы C#
доброго времени суток! сегодня мы рассмотрим с вами как можно создать простейший веб-сервер в c#.
для создания данного сервера мы будем использовать ...
- 751. кто такие пользователи в wordpress?
- Софт/Софт для создания сайтов
большинство блоггеров или авторов, ведущие свои сайты на wordpress никогда не касаются вкладки в панели управления: "пользователи". по большому счету ...
- 752. ленивая загрузка изображений. часть 1
- JavaScript/JavaScript Основы
изображения являются важнейшей частью любого сайта. являются ли они
маркетинговыми баннерами, изображениями продуктов или логотипов, невозможно ...
- 753. перенос сайта на wordpress плагином duplicator
- Софт/Софт для создания сайтов
на этом уроке вы узнаете, как перенести свой сайт на wordpress с одного хостинга на другой или с локального сервера на реальный хостинг. для этой ...
- 754. смс заявка с сайта
- Софт/Софт для создания сайтов
как правило, владельцы сайтов для обратной связи с клиентами размещают на видном месте номер телефона и контактную форму. если с телефоном все ...
- 755. дочерняя тема wordpress
- Софт/Софт для создания сайтов
несмотря на то, что платных или бесплатных wordpress тем, создано уже огромное количество, редко кто использует их на своих сайтах так, как есть. даже ...
- 756. css grid layout #2 (позиционирование ячеек)
- CSS/CSS Основы
в css grid можно позиционировать отдельно взятую ячейку (grid item), как по оси x, так и по оси y. поэтому, все рассматриваемые css свойства будут относиться ...
- 757. тестирование основных функций сайта с расширением selenium ide
- Софт/Софт для создания сайтов
здравствуйте. как известно, разработка web приложений это динамичный процесс, который требует постоянных доработок. в результате добавления ...
- 758. e-mail рассылка на wordpress
- Софт/Софт для создания сайтов
главнейшим инструментом для заработка в интернет-маркетинге является e-mail рассылка. совершенно не важно, продаете ли вы собственные товары ...
- 759. анимированный градиент granim.js
- JavaScript/JavaScript Скрипты
на этом уроке мы научимся применять анимированные градиенты, используя javascript библиотеку – granim.js. вы увидите, как просто работать с этой замечательной ...
- 760. фильтр категорий товаров на javascript (часть 3)
- JavaScript/Java Основы
что вообще должно происходить с этими кнопками и карточками товаров? при клике пользователя по черной кнопке, на сайте должны остаться только ...
- 761. анимация текста в css
- CSS/CSS3
на этом уроке мы разберем основные правила css анимации на веб-странице, которые можно применить к любому элементу, а не только к тексту.
просто ...
- 762. ajax-форма без перезагрузки страницы
- JavaScript/jQuery
на этом уроке мы научимся отправлять форму без перезагрузки страницы, используя метод ajax, библиотеки jquery. как вообще происходит классический ...
- 763. имитация печатной машинки при наведении на текст
- CSS/CSS Основы
пропишем внутри ссылок data*-атрибуты с названиями ссылок. это нужно для передачи этих названий в функцию attr для получения hover-эффекта.
<ul> ...
- 764. fetch запросы к серверу на javascript
- JavaScript/JavaScript Основы
для тестовых запросов, есть такой сервис jsonplaceholder. он имитирует фейковый сайт с базами данных, чтобы нам с вами было на чем потренироваться. отсюда ...
- 765. как сделать плавный якорь на jquery
- JavaScript/jQuery
сегодня мы поговорим о том, что такое якорь в html, как это работает, да так, чтобы действие произошло плавно.
якорь – это знак решетки, который ...
- 766. set в javascript
- JavaScript/JavaScript Основы
set (множество) - это объект, в котором могут хранится только уникальные значения любого типа данных (примитивы и другие типы объектов).
создание ...
- 767. создаем игру с pygame и python. часть 7
- Python/Основы Python
продолжаем покорять космические просторы с python и pygame.в прошлой статье мы придали кораблю возможность управления с помощью клавиш.
в сегодняшней ...
- 768. canvas и javascript. дуги и окружности
- JavaScript/JavaScript Основы
сегодня мы научимся рисовать дуги и окружности. сделать это можно с помощью метода arc, который рисует дугу из центра в заданной точке с координатами ...
- 769. canvas и javascript. кривые
- JavaScript/JavaScript Основы
в canvas можно нарисовать квадратичную кривую и кривую безье. скоро вы узнаете, что отличает эти кривые друг от друга, прочитав статью до конца. ...
- 770. создаем игру с pygame и python. добавление границы игрового поля
- Python/Основы Python
в предыдущей статье мы добавили новые свойства к игровому объекту. в результате чего, наш космический корабль двигается и вращается! однако, ...
- 771. canvas и javascript. анимация
- JavaScript/JavaScript Основы
замечательно то, что на canvas можно не только рисовать, но и анимировать объекты. для этого у javascript есть полный набор инструментов. вы узнаете, ...
- 772. canvas и javascript. пчела
- JavaScript/JavaScript Основы
на этом уроке нарисуем пчелу с помощью окружностей и анимируем ее так, чтобы она летала. создание анимации в javascript состоит из повторяющегося ...
- 773. html теги и атрибуты форм
- HTML/HTML 5
пожалуй уже не один современный сайт не может обойтись без отправки данных пользователя на сервер. это может быть заявка на обратный звонок, ...
- 774. создание космической аркады с python и pygame. добавляем класс астероида
- Python/Основы Python
в предыдущей статье по python и pygame мы завершили создание логики для космического корабля. но корабль все еще один в пустом пространстве. пора добавить ...
- 775. создание анимации с python и pygame
- Python/Основы Python
создание анимации достаточно увлекательное занятие. и python как нельзя лучше подходит для этого. фреймворк pygame уже содержит встроенные методы ...
- 776. как вставить изображение на веб-сайт
- HTML/HTML Основы
данная статья является логическим продолжением статьи «как уменьшить размер изображения без photoshop». доступность больших и качественных ...
- 777. как уменьшить размер изображения без photoshop
- HTML/HTML Основы
прежде чем использовать и публиковать изображения на веб-сайте, сначала их необходимо подготовить. подготовка включает в себя уменьшение веса ...
- 778. установка node + gulp для windows 10
- JavaScript/JavaScript Основы
первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. через команду npm, мы в дальнейшем установим и сам ...
для популярного редактора vs code существует огромное количество плагинов для разных задач. цель данной статьи - составить чек лист самых нужных ...
- 780. фавикон для сайта
- HTML/HTML Основы
по умолчанию все браузеры ищут фавикон в корне сайта, но ничего не случиться, если мы поместим фавикон в папку с картинками и укажем пути в хедере ...
- 781. html теги для текста
- HTML/HTML Основы
в интернете мы то и дело ищем какую-нибудь информацию, чаще всего это текст и поэтому не случайно всех больше html тегов предусмотрено именно для ...
- 782. продолжаем создание космической аркады. управление кораблем
- Python/Основы Python
в прошлых статьях по созданию игры с python и pygame мы добились отображения корабля на фоне изображения космического пространства. но что можно ...
- 783. css-эффект при наведении на меню
- CSS/CSS Основы
на чистом css можно создавать интересные и оригинальные "спецэффекты", один из которых мы сейчас подробно разберем. у нас есть список пунктов ...
- 784. классы в javascript
- JavaScript/JavaScript Основы
класс в js - это расширяемый шаблон кода, заготовка для создания объекта. классы в js предназначены для упрощения создания объектов и организации ...
- 785. всплывающая подсказка в html
- HTML/HTML 5
использование всплывающих подсказок на html страницах, прекрасная возможность дать пользователю уточняющую информацию, в удобном для него виде ...
- 786. изменения темы storefront для разработчиков
- Софт/Софт для создания сайтов
я хочу вывести иконки социальных сетей в верхнем правом углу шапки сайта с помощью хуков. поскольку верхняя область у меня уже занята ссылками, ...
- 787. как использовать шорткоды woocommerce
- Софт/Софт для создания сайтов
шорткод woocommerce - это короткий код для вывода товаров, страниц и категорий. при запуске короткий код развернется в полноценный код. шорткоды woocommerce ...
- 788. добавление иконок соцсетей на wordpress сайт
- Софт/Софт для создания сайтов
добавить иконки соцсетей на wordpress сайт можно с помощью обычного виджета text. находим в кастомайзере виджет text и добавляем его в первую колонку ...
- 789. введение в 3d преобразования c css
- CSS/CSS3
с введением css-преобразований элементы стало возможно сдвигать, поворачивать, наклонять, сжимать и растягивать. веб-дизайнеры наконец-то смогли ...
- 790. автоматизация рутины с помощью python
- Python/Основы Python
все, кто хоть немного взаимодействуют с компьютером, неизбежно сталкиваются с однотипными задачами: скачивание видеороликов с youtube, переименование ...
- 791. как сделать таблицу в html
- HTML/HTML Основы
бывалые вебмастера до сих пор с содроганием вспоминают времена, когда целые сайты верстались на таблицах. это вам не email-рассылку сверстать, ...
- 792. автоматическое создание резервной копии сайта на wordpress
- Софт/Софт для создания сайтов
сегодня вы узнаете о том, как настроить автоматическое резервное копирование сайта на wordpress. этот способ достаточно надежен и не зависит от ...
- 793. адаптивная верстка на flex (часть 2)
- CSS/CSS Основы
на прошлом уроке мы создавали html структуру для макета с блок постами, а на этом уроке расставим посты в соответствии с макетом, максимально используя ...
- 794. svelte.js - фреймворк нового поколения
- JavaScript/JavaScript Основы
компонентный фреймворк svelte.js используется для создания интерфейсов без перезагрузки страницы и этим он очень похож на vue.js и react.js. но у него ...
- 795. варианты использования svg на сайтах. часть #3
- HTML/HTML Основы
svg текст
как работать с svg текстом? текст выводится внутри парного элемента text с указанием координат его отрисовки. управление внешний видом ...
- 796. варианты использования svg на сайтах. часть #2
- HTML/HTML Основы
создание svg круга
окружность рисуется при помощи svg элемента circle. атрибуты cx и cy указывают на x и y координаты центра круга. атрибут r равен радиусу ...
- 797. создаем хаотичное движение объектов в игре с python и pygame
- Python/Основы Python
продолжаем совершенствовать игру asteroids c python и pygame. и на текущий момент, на игровом поле отображается один космический корабль, которым можно ...
- 798. canvas и javascript. рисование линий
- JavaScript/JavaScript Основы
на этом уроке мы будем учиться рисовать линии, используя тег canvas и язык javascript. на предыдущем уроке мы рисовали геометрические фигуры. для начала ...
- 799. создаем игру с pygame и python. реализация класса корабля
- Python/Основы Python
в предыдущих статьях про python и pygame мы создали и отобразили игровой объект в виде космического корабля. в сегодняшней статье мы создадим для ...
- 800. настройка темы storefront для woocommerce
- Софт/Софт для создания сайтов
тема storefront специально разработана под плагин woocommerce и рекомендована к использованию под интернет-магазин самими авторами плагина. на чем основаны ...
регулярные выражения - это способ поиска совпадений шаблона с текстом для дальнейших манипуляций. наверняка многие из вас уже составляли простейшие ...
- 802. логические операторы в js
- JavaScript/JavaScript Основы
логические операторы используются вместе с ключевыми словами: for, if, while, do while и могут принимать только одно из двух значение true/false. всего в javascript ...
- 803. поиск числа фибоначчи
- JavaScript/JavaScript Основы
итальянский ученый леонардо пизанский вывел закономерную последовательность чисел, при которой каждое стоящее в ряду число, является результатом ...
- 804. иконочные шрифты icomoon
- HTML/HTML Основы
сегодня мы поговорим о сервисе icomoon, который позволяет создавать шрифтовые иконки для различных проектов. что же это за шрифты и в чем их преимущества? ...
- 805. как сделать гифку из видео
- HTML/HTML Основы
на этом уроке я покажу, как буквально за считанные минуты можно бесплатно сделать гифку из видео с помощью онлайн-сервиса giphy. работать с данным ...
- 806. 5 полезных фишек google docs
- CSS/CSS Основы
google docs - это бесплатная альтернатива microsoft office, вполне удовлетворяющая потребности среднестатистического пользователя. google документы замечательны ...
из этой статьи вы узнаете о 10 полезных онлайн-сервисах для веб-разработчиков, которые существенно упрощают работу с определенными рутинными ...
- 808. пример верстки фотогалереи на css grid #2
- CSS/CSS Основы
на предыдущем уроке мы сверстали секцию с портфолио на css grid для десктопа. осталось сделать верстку адаптивной для различных мобильных устройств ...
- 809. пример простого слайдера на javascript (#2)
- JavaScript/JavaScript Основы
в первой части урока мы нарисовали сам слайдер с использованием html и css, во второй части создадим кнопки prev / next и напишем javascript код для управления ...
как преобразовать обычный список в массив, используя программу vscode и регулярные выражения? предположим вам нужно занести в базу данных сайта ...
- 811. регулярные выражения в javascript #1
- JavaScript/JavaScript Основы
принципы использования регулярных выражений в разных языках программирования более-менее одинаковые. на этом уроке мы посмотрим, как регулярные ...
на этом уроке я покажу как установить и настроить статистику яндекс метрики на вашем wordpress сайте. наиболее простой и предпочтительный способ ...
- 813. регулярные выражения в javascript #2
- JavaScript/JavaScript Основы
продолжаем знакомиться с символьными классами у регулярных выражений.
символьный класс - слово:
\w - символ слова
символьный класс «\w» ...
распределение ширины сетки на фракции необязательно должно происходить в равных долях. если поставить вместо единицы цифру два, то мы удвоим ...
- 815. раскрывающийся список на javascript
- JavaScript/JavaScript Основы
когда мы имеем дело с большими вложенными списками, было бы хорошо сделать их как можно компактнее. javascript отлично справится с поставленной задачей. ...
- 816. ускоренное создание графичеких приложений в python. часть 1
- Python/Основы Python
чтобы создать графический интерфейс ваших окон в pyqt, вы можете выбрать два основных пути: можно использовать qt designer или вручную написать графический ...
- 817. шаблоны и флаги в js (регулярные выражения)
- JavaScript/JavaScript Основы
регулярные выражения нужны для поиска по тексту, для замены в тексте или для проверки на совпадение с неким шаблоном. это когда вы регистрируйтесь ...
- 818. canvas и javascript. рисование фигур
- JavaScript/JavaScript Основы
тег canvas создает область на html странице, внутри которой можно рисовать разные фигуры и анимировать их при помощи javascript.
создание области для ...
- 819. создаем игру с pygame и python. часть 2
- Python/Основы Python
в предыдущей статье мы начали создание проекта игры asteroids. для этого был создан базовый класс игры с конструктором и основными методами игры. ...
- 820. продолжаем создание игры с pygame и python
- Python/Основы Python
в предыдущей статье мы создали и отобразили красивое игровое поле с помощью pygame и python. и на данный момент наша программа отображает фоновое ...
- 821. структуры данных на javascript
- JavaScript/JavaScript Основы
структурой данных называется способ организации или хранения данных для эффективного с ними взаимодействия. в программировании мы все время ...
- 822. sql запросы к базе данных. часть #4
- MySQL/SQL
оператор join используется для объединения строк из нескольких таблиц в одну общую таблицу, на основе связанного столбца между ними. для таблиц ...
- 823. создаем игру с pygame и python. часть 3
- Python/Основы Python
в предыдущей статье мы реализовали проект pygame, в результате чего на экран выводится окно с игровым полем, которое вы можете закрыть, нажав клавишу. ...
- 824. sql запросы к базе данных. часть #3.
- MySQL/SQL
используя ключевой слово where и другие операторы, мы можем задавать условия для фильтрации строк. в фильтрах можно использовать следующие операторы: ...
- 825. sql запросы к базе данных. часть #2.
- MySQL/SQL
агрегатные функции
когда нам нужно получить сумму, максимальное, минимальное или среднее значение хранящихся в базе данных чисел, то мы используем ...
- 826. sql запросы к базе данных. часть #1
- MySQL/SQL
мир в целом и интернет в частности, состоят из данных. в основе всех приложений лежат данные: социальные сети хранят данные о пользователях и ...
- 827. как установить и настроить jshint
- JavaScript/JavaScript Основы
при написании javascript кода, новички неизбежно допускают ошибки и это нормально. плагин jshint как раз позволяет вовремя увидеть все допускаемые ...
вы когда-нибудь задумывались, что происходит за кадром, когда вы открываете браузер и вводите адрес сайта url (унифицированный ресурсный указатель), ...
все устройства в интернете имеют свой уникальный адрес, который представляет из себя простой набор цифр. это можно сравнить с номером телефона. ...
- 830. типы полей ввода (html input)
- HTML/HTML 5
в статье про формы, тема полей ввода (input) умышленно осталась не затронутой, поскольку она обширная и заслуживает отдельного внимания. элемент ...
- 831. css фреймворк materialize (установка)
- CSS/CSS Основы
materialize - это css фреймворк для создания сайтов, основанный на принципах material design. если сказать проще, то это набор инструментов для верстки и готовые ...
- 832. счетчик обратного отсчета при помощи setinterval
- JavaScript/JavaScript Основы
например, по какой-то причине вам нужно перенаправить посетителей с одного сайта на другой. только сделать это без мгновенного редиректа в лоб, ...
- 833. обработчик события кнопки на javascript
- JavaScript/JavaScript Основы
на предыдущих уроках по javascript, мы научились получать и изменять элементы на страницах. но зачем это нужно, если можно сразу создать страницу ...
- 834. фильтр товаров на javascript
- JavaScript/JavaScript Основы
в эпоху процветания интернет-магазинов, как никогда востребованы разработчики, способные реализовать запросы владельцев магазинов. львиная ...
- 835. эффект печатающегося текста на js
- JavaScript/JavaScript Основы
как с пользой можно применить эффект печатающегося текста на сайтах? первое, что приходит в голову - для фиксирования внимания посетителей на ...
- 836. прокрутка страницы вверх
- JavaScript/jQuery
у посетителя сайта, должна быть возможность, быстро вернуться наверх, если он дошел до конца страницы. обычно в правом нижнем углу браузера, ...
django - это python веб-фреймворк для бекенда, который позволяет быстро создавать безопасные сайты и приложения. фреймворк имеет набор готовых компонентов, ...
- 838. как добавить логотип на wordpress-сайт
- Софт/Софт для создания сайтов
в базовых настройках wordpress в верхнем левом углу шапки сайта, выводится название сайта в виде текста. представьте, что вы взяли на фриланс-бирже ...
- 839. стрелочные функции в js
- JavaScript/JavaScript Основы
стрелочные функции появились начиная с es6 и очень сильно изменили качество написания кода. так чем же они хороши? главная причина появления ...
- 840. быстрая сортировка массива в js
- JavaScript/JavaScript Основы
из этого урока вы узнаете об одном из самых популярных алгоритмов сортировки массивов – быстрая сортировка (quick sort).как работает алгоритм быстрой ...
- 841. работа с миниатюрами записи в wordpress
- Софт/Софт для создания сайтов
миниатюра записи – это прикрепленная превью картинка, к анонсу записи в wordpress. в полной записи, этой картинки может и не быть или у неё будут ...
- 842. компилятор babel для js
- JavaScript/JavaScript Основы
babel преобразует новый синтаксис es6 в совместимый синтаксис со всеми браузерами es5. благодаря компилятору babel, программисты прямо сейчас могут ...
- 843. ооп в javascript. инкапсуляция
- JavaScript/JavaScript Основы
инкапсуляция - это скрытие реализации какой-либо задачи в javascript коде не из вредности, а с целью защиты части кода от пользователя или программиста. ...
- 844. файл header.php в wordpress (фрилансеру)
- Софт/Софт для создания сайтов
шаблон wordpress, как и другие cms, состоит не из одного файла index.php, а из нескольких файлов. типичная блоговая структура, собирается из нескольких ...
- 845. виджет аккордеон библиотеки jquery ui
- JavaScript/jQuery
в статье работа с библиотекой jquery ui, мы подробно на примере виджета tooltip, разобрали, как подключить библиотеку, зачем она вообще нужна. сегодня, ...
- 846. установка базы данных mongodb
- JavaScript/JavaScript Основы
все базы данных делятся на два типа, с хранением данных в таблицах (mysql) и с хранением данных, в массивах (формат bson). mongodb – документо-ориентированная ...
- 847. анализ скорости загрузки сайта
- Софт/Софт для раскрутки сайтов
услуга по оптимизации скорости загрузки сайтов – весьма востребована на фриланс-биржах. вы спросите: "почему так много не оптимизированных ...
- 848. отложенная загрузка изображений
- JavaScript/JavaScript Основы
нас, веб-разработчиков, строгий google, уже давно убедил, что изображения на сайте, надо оптимизировать – уменьшать их вес. красный или оранжевый ...
- 849. практический пример использования функции attr в css
- CSS/CSS Основы
рассмотрим на примере анимации текста, как можно использовать css функцию attr.
создание, позиционирование и стилизация текста
data-text представляет ...
- 850. создаем оконное приложение для windows с c#
- C#/Основы C#
до сих пор мы создавали только консольные приложения.
но программисты на c# широко используют формы для создания пользовательских интерфейсов. ...
- 851. создание навигации в wordpress (фрилансеру)
- Софт/Софт для создания сайтов
бывает, что заказчики часто просят, сделать дополнительную навигацию на wordpress и вывести её, в указанном на скриншоте, месте (красными стрелочками). ...
- 852. графическое приложение с таймером на c# и winform
- C#/Основы C#
управление таймером играет важную роль в разработке программ как на стороне клиента, так и на стороне сервера, а также в службах windows. с помощью ...
- 853. map в javascript
- JavaScript/JavaScript Основы
map - это новая структура данных добавленная в es2015. объект map похож на js-объект, в том плане что он также состоит из пар ключ значение. карта map очень ...
- 854. верстка сайта по psd макету (часть 3)
- HTML/HTML 5
на прошлом уроке была сделана html разметка для дальнейшей верстки psd макета. как и ожидалось все блоки и секции встали друг под друга - это и есть ...
- 855. единицы измерения em, rem, vh, vw, vmin, vmax
- CSS/CSS3
сегодня мы рассмотрим редко используемые начинающими верстальщиками, относительные единицы измерения в css3, такие как, em, rem, vh, vw, vmin, vmax. в основном ...
- 856. как ускорить wordpress
- Софт/Софт для создания сайтов
на фриланс биржах, можно часто увидеть заголовки с заданиями от заказчиков: "нужно ускорить загрузку сайта на wordpress". думаю, что эта тема будет ...
- 857. регулярные выражения в javascript #4
- JavaScript/JavaScript Основы
флаги в регулярных выражениях уточняют каким образом нужно искать, если это важно. в противном случае, флаги не обязательно добавлять к регулярному ...
- 858. верстка сайта по psd макету (часть 1)
- HTML/HTML 5
серия этих уроков ориентирована на абсолютных новичков, чтобы максимально подробно продемонстрировать, как происходит верстка сайта по psd ...
- 859. css анимация падающих звезд
- CSS/CSS Основы
для создания анимации падающих звезд нам потребуется картинка зведного неба и сами звезды, созданные средствами html и css.
html-разметка и звездное ...
- 860. как установить visual studio?
- C#/Основы C#
доброго времени суток! перед тем как начать программировать на c#, вам необходимо установить
интегрированную среду разработки visual studio community. ...
- 861. верстка сайта по psd макету (часть 4)
- HTML/HTML 5
на прошлом уроке была сделана верстка секции по psd макету. сейчас наш сайт хорошо смотрится на больших и средних мониторах. но что произойдет, ...
- 862. библиотека moment.js. работа с форматами
- JavaScript/JavaScript Основы
как вы поняли из прошлой статьи про диапазоны дат, что в нативном javascript неудобно работать с форматами дат. поэтому и была разработана библиотека ...
- 863. как сделать текст по кругу на javascript
- JavaScript/JavaScript Основы
для создания текста по кругу, необходимо разбить текст на символы и применить к каждому символу свойство transform.
создание и стилизация текста ...
на github pages можно бесплатно разместить статичный html сайт, состоящий из html/css/js файлов, к которому можно подключать различные библиотеки – одним ...
- 865. имитация капель дождя с помощью rainyday.js
- JavaScript/JavaScript Основы
больше не нужно ломать голову и писать много строчек кода для визуализации капель дождя, падающих на окно. замечательный скрипт на js rainyday.js представляет ...
- 866. сортировка массива на js
- JavaScript/JavaScript Основы
метод sort часто используется для сортировки массивов в js, но необходимо знать о некоторых нюансах при работе с данным методом. все дело в том, ...
- 867. что выбрать верстальщику - figma или photoshop?
- Софт/Софт для создания сайтов
немного предыстории. всем известный, adobe photoshop, изначально был задуман для обработки фотографий. но поскольку на тот момент не было других инструментов ...
- 868. система контроля версий git
- Софт/Софт для создания сайтов
пока вы сидели в одиночестве, вылавливая на фриланс-биржах, подходящие для себя заказы, офисные веб-разработчики, уже на полную катушку, использовали ...
- 869. эффект стирания верхнего слоя на javascript
- JavaScript/JavaScript Основы
пользователь водит мышкой по экрану и автоматически стирается верхний слой. под верхним слоем находится фоновая картинка. немного движений ...
- 870. зачем сайту mysql? таблицы, строки, запросы
- MySQL/MySQL Основы
база данных в программировании – это хранилище разного рода данных в упорядоченном виде. если провести простую аналогию из жизни, то базу данных ...
- 871. прототипы в js
- JavaScript/JavaScript Основы
прототип - это js объект, от которого другие объекты наследуют его свойства и методы. по умолчанию, у каждого объекта есть свой прототип и если ...
- 872. ключевое слово this в javascript
- JavaScript/JavaScript Основы
рассказать о том, как работает ключевое слово this, частый вопрос на собеседовании на позицию веб-разработчика. начнем, как всегда с теории, а чуть ...
- 873. создаем круговую диаграмму с python и matplotlib. часть 2
- Python/Основы Python
как известно, людям всегда больше нравится интерпретировать картинки, чем текст. это подтверждается биологическим фактом, что 90% фактов, поступающих ...
- 874. объекты в js - сложный тип данных
- JavaScript/JavaScript Основы
object (объект) - это более сложный тип данных в js. хочу напомнить, что все остальные типы данных, являются примитивными, так как могут содержать ...
- 875. делегирование событий в js
- JavaScript/JavaScript Основы
на прошлом уроке мы научились вешать обработчик события на одну кнопку в js. однако методы, хорошо работающие с единичными объектами, совершенно ...
- 876. создаем круговую диаграмму с python и matplotlib
- Python/Основы Python
круговая диаграмма позволяет наглядно продемонстрировать доли разных значений в конкретном примере. имея форму пирога, она как нельзя лучше ...
- 877. видеофон внутри текста на чистом css
- CSS/CSS Основы
как легко и оригинально оживить текст, не создавая никакой анимации? об этом вы узнаете на этом уроке. эффект красиво смотрится только на крупном ...
- 878. работа с localstorage на примере
- JavaScript/JavaScript Основы
localstorage - это локальное хранилище данных прямо в браузере клиента. иногда нужно между перезагрузками страниц, сохранять пользовательские настройки, ...
- 879. получить значение из формы на jquery
- JavaScript/jQuery
сегодня мы научимся получать значения из формы на jquery, вводимые пользователем. рассмотрим на примере простого калькулятора. у него будет два ...
- 880. примеры prompt, alert и confirm в js
- JavaScript/JavaScript Основы
у браузеров есть замечательная опция - возможность взаимодействия с пользователем, через диалоговые (модальные) окна на js. достигается это с ...
- 881. создание фильтров по атрибутам на woocommerce
- Софт/Софт для создания сайтов
в плагине woocommerce фильтрация товаров основана на атрибутах. атрибут - это разновидность товара по цвету, размеру, стилю, назначению. у разных товаров ...
- 882. css эффект потери фокуса и наоборот
- CSS/CSS Основы
весь эффект с фокусом строится на манипуляциях с фильтром blur. когда пользователь открывает страницу, то видит размытый фон и четкий заголовок. ...
- 883. data атрибуты на jquery (часть 2)
- JavaScript/jQuery
в первой части, мы учились получать и изменять значение атрибута на jquery. во второй части, напишем программу на jquery - при клике по цветной кнопке, ...
- 884. эффект тени при наведении в css
- CSS/CSS3
на этом уроке, мы создадим красивый эффект тени при наведении, на чистом css. подобный эффект можно реализовать на любом блочном элементе. в нашем ...
- 885. как создать to do list на чистом css (часть 2)
- CSS/CSS Основы
4) позиционирование инпута и текста
.list ul label{
position: relative; / * относительное позиционирование * /
display: flex; / * отображать ...
- 886. перебор массива в js - метод foreach
- JavaScript/JavaScript Основы
у языка javascript существует несколько методов для перебора массива, один из которых мы сейчас рассмотрим. речь идет о методе foreach, который может ...
- 887. использование переменных в css
- CSS/CSS Основы
css переменные призваны уменьшить дублирование кода в таблице стилей, улучшить его читаемость и придать больше гибкости. css переменные позволяют ...
- 888. среда разработки anaconda для python
- Python/Основы Python
написание кода вручную, конечно же необходимое умение для программиста. то справедливо для начального этапа изучения языка, чтобы набить руку. ...
- 889. 6 типов товаров на woocommerce
- Софт/Софт для создания сайтов
с помощью плагина woocommerce можно продавать 6 типов товаров:
простой товар
сгруппированный товар
внешний / партнерский товар
вариативный ...
- 890. анимация с пузырьками на javascript
- JavaScript/JavaScript Основы
много реалистичные пузырьков разных размеров, с разной скоростью поднимаются вверх, лопаясь на ходу. как такое возможно сделать на javascript? перед ...
- 891. javascript анимация на фоне
- JavaScript/JavaScript Основы
на всей странице будет происходить плавное движение вверх разноцветных квадратиков разного размера.
подготовка фона для анимации
создадим ...
- 892. похожие и сопутствующие товары на woocommerce
- Софт/Софт для создания сайтов
использование похожих и сопутствующих товаров в любом интернет магазине - это известный маркетинговый прием с целью выручить побольше денег. ...
- 893. кастомизация иконок fontawesome
- CSS/CSS Основы
мне нравиться использовать шрифтовые иконки из библиотеки fontawesome, потому что их легко кастомизировать под любую цветовую гамму сайта.
html разметка ...
- 894. два плагина по оптимизации сайта на wordpress
- Софт/Софт для создания сайтов
robin image optimizer
плагин robin image optimizer один из немногих подобных плагинов, кто бесплатно оптимизирует (уменьшает вес) картинки на wordpress сайте. даже ...
- 895. настройка yoast seo для магазинов на woocommerce. часть #1
- Софт/Софт для раскрутки сайтов
на этом уроке разберем настройки популярного yoast seo плагина (версия 15.4) для использования в онлайн-магазинах, работающих на основе woocommerce плагина. ...
- 896. число – тип данных в js
- JavaScript/JavaScript Основы
на этом уроке мы поговорим о числовом типе данных в javascript. в языке javascript как целые числа, так и числа с плавающей точкой относятся к одному типу ...
- 897. настройка yoast seo для магазинов на woocommerce. часть #2
- Софт/Софт для раскрутки сайтов
продолжаем разбирать настройки плагина yoast seo, здесь первая часть статьи.
отображение в поисковой выдаче / медиа
когда вы загружаете медиафайл, ...
- 898. создание словарей на python
- Python/Основы Python
словарь является типом данных (dist) в python и представляет собой неупорядоченную коллекцию, состоящую из пар "ключ-значение". словари в python очень ...
- 899. установка python 3.7.4 на windows
- Python/Основы Python
возможно, что после прочтения статьи python – как первый язык программирования, вам захочется познакомиться поближе с питоном (народное название). ...
- 900. обработка изображений с помощью numpy
- Python/Основы Python
модуль numpy и python позволяют создавать массивы произвольной длины и заполнять их некоторыми значениями. так как изображение можно представить ...
- 901. переменные в python
- Python/Основы Python
не один язык программирования не может обойтись без переменных и python здесь не исключение. переменная в программировании – это именованная ...
- 902. текст, обтекающий картинку нестандартной формы
- CSS/CSS Основы
все начинающие изучать css-свойства, уже наверняка слышали про свойство float, с помощью которого текст обтекает картинку справа или слева от нее. ...
- 903. операции маскировки над изображениями с python и opencv
- Python/Основы Python
изображение есть набор данных, закодированных в числовой последовательности. извлекая числа, затем можно проводить с ними различные операции. ...
- 904. автоматически загружаемый popup после загрузки страницы (часть #2)
- JavaScript/JavaScript Основы
наше popup окно необходимо снабдить крестиком, кликнув по которому, пользователь избавится от надоедливой рекламы.
.close{
position: ...
у вас на руках есть готовый дизайн для футболки. что с ним делать дальше? как получить готовый продукт в свой интернет-магазин? для начала нужно ...