Уроки и статьи
Подписка
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт
Моя группа
Опрос
Какая тема Вас интересует больше?
Бесплатный курс
Мастер-класс по созданию сайта на WordPress 6
Этот видеоурок длится всего 21 минуту, но уже в конце создан полностью рабочий сайт на WordPress (с применением ChatGPT). И весь процесс Вы увидите своими глазами, а повторить - не составит труда!
Чтобы получить Видеокурс,
заполните форму
Бесплатный онлайн-семинар
10 шагов к созданию своей Web-студии
После семинара:
- Вы узнаете главное отличие богатых от бедных.
- Вы увидите разоблачения множества мифов об успешности и о бизнесе.
- Вы получите свой личный финансовый план прямо на семинаре.
- Мы разберём 10 шагов к созданию своей успешной Web-студии.
- Я расскажу о своих личных историях: об успешных и неуспешных бизнесах. Это мой многолетний опыт, которым я поделюсь с Вами.
Умные цитаты
Кто хочет — ищет возможности. Кто не хочет — ищет причины.
Авраам Линкольн
Поиск: div
Что искали: div
Всего найдено: 910 записей
- 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. пример использования css функций var() и calc()
- CSS/CSS Основы
... переменная i с её уникальным значением.
<section>
<div class="loading">
<div class="blocks" style="--i:1;"></div>
<div class="blocks" style="--i:2;"></div> ...
- 4. адаптивная верстка макета (bootstrap 4)
- CSS/CSS Основы
... пользовательский класс services.
схематичная разметка 1-го уровня
<div class="container">
<div class="row">
<div class="col-12 col-md-4">
колонка ...
- 5. 3 основных способа верстки сайтов. часть #1
- CSS/CSS3
... следующий ряд. такое поведение естественное для блоков.
// html
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div> ...
- 6. 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>
...
- 7. верстка сайта по psd макету (часть 2)
- HTML/HTML 5
... текстом и кнопкой. блок и секция чередуются друг с другом.
<div class="block_violet">
<div class="block_white">
<div class="photo">
<img ...
...
</style>
<div id="v" class="box"><p>visible: содержимое выходит за рамки блока и продолжает отображаться снаружи, без скролла.</p></div>
<div id="h" ...
- 9. красиво оформленная секция с услугами
- CSS/CSS Основы
... понять по иконке.
html разметка + позиционирование в центре
<div class="container">
<div class="servicebox">
<div class="icon" style="--i:#4eb7ff;">
<ion-icon ...
- 10. верстка по бэм методологии
- HTML/HTML 5
... необходимости, можно легко скопировать участок кода вместе с css:
<div class="stat">..элементы..</div>
затем вставить в другое место на странице или сайте ...
- 11. верстка формы обратной связи используя bootstrap
- PHP/PHP Основы
... всю ширину браузера, обертываем ее в контейнер:
<div class="container">
...
</div>
используя класс col-md-4 с помощью grid system (сеточной ...
- 12. как остановить проигрывание видео при закрытии модального окна в 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"> ...
- 13. дизайн и верстка страницы contact us. часть #1
- HTML/HTML Основы
... социальных сетей
карта
шапка + контактная форма
<div class="title">
<h2>contact us</h2>
</div>
<div class="box">
<div class="contact ...
... margin: 8px; width: 140px; height: 40px; }
.container { background: #fff; padding: 8px; }
</style>
<div class="demo container">
<div class="block">block — занимает всю строку</div>
текст до <span class="inline">inline ...
- 15. карточка блог поста на css
- CSS/CSS3
... служить flex-контейнером, а блоки с классом column - его детьми.
<div class="row">
<div class="column">
<div class="card">карточка превью-поста ...
- 16. css grid. практические примеры #4
- CSS/CSS Основы
... grid сетки можно обратится через псевдокласс nth-child.
<div class="container">
<div class="item">item-1</div>
<div class="item">item-2</div> ...
- 17. верстка по сетке bootstrap (часть 2)
- CSS/CSS Основы
... колонки, по шесть столбиков в каждой.
<!-- карусель начало -->
<div class="container-fluid">
<div class="row justify-content-center bg-item">
<div id="carouselexamplecontrols" class="carousel slide" ...
- 18. как впечатлить заказчика своим портфолио? создаём 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> ...
- 19. адаптивная верстка на flex (часть 1)
- CSS/CSS Основы
... того, чтобы в дальнейшем задавать для него свои стили.
<div class="container">
<div class="posts">
<div class="posts__element posts__element--big">
<img ...
- 20. 3 способа выравнивания блоков по ширине
- CSS/CSS Основы
... свойства: display: flex и justify-content: center.
// html разметка
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div> ...
- 21. коллекция css компонентов
- CSS/CSS Основы
... свойство flex-basis.
<!-- общие правила поведения для всех карточек -->
<div style="
display: flex;
flex-wrap: wrap;
margin-left: -8px; /* отступ от левого края */
margin-right: -8px; ...
- 22. свойство perspective в css
- CSS/CSS Основы
... разметка:
<div class="parent perspective">
<h1>использование свойства перспективы для родителя </h1>
<div class="child"></div> ...
- 23. управление размерами flex-элементов
- CSS/CSS3
... коде, так как оно задается по умолчанию.
html структура
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div ...
- 24. bootstrap 4. система сеток.
- CSS/CSS Основы
... давайте рассмотрим некоторые примеры:
<style>
.row div {padding:20px 10px; border: 1px solid;}
</style>
<div class="container">
<div class="row" style="background: lightblue">
...
- 25. вертикальный аккордеон на чистом css
- CSS/CSS3
... diplay: table-cell. внутри блока div размещены: label с элементами форм input, типа checkbox.
все секции аккордеона закрыты (checkbox)
<div>
<label class="accordion"> ...
- 26. создаем вкладки на js (часть 1)
- JavaScript/JavaScript Скрипты
... соответственно должен показаться контент второго блока и.т.д.
<div class="content">
<div class="info">
<div class="header">
<div ...
- 27. bootstrap 4. компонент cards.
- CSS/CSS Основы
... приведу нужный код, а затем мы разберем, что там происходит.
<div class="container text-muted">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card"> ...
- 28. парсинг сайта вакансии на python
- Python/Основы Python
... salary = bs.select_one(
'body > div.page-container > div > div > div > div > article > section:nth-child(1) > div ' ...
- 29. смс авторизация на сайте с помощью 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"> ...
- 30. css grid layout #1 (базовая сетка)
- CSS/CSS Основы
... заготовку, состоящую из обертки wrapper с 12 ячейками внутри.
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div ...
- 31. как добавить новость на сайт 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> ...
- 32. выпадающее меню выбора с использованием javascript
- JavaScript/JavaScript Скрипты
... разметку через тег ion-icon.
<div class="dropdown">
<input type="text" class="text2" readonly placeholder="dropdown menu">
<div class="option">
<div><ion-icon ...
- 33. создание перспективы в css
- CSS/CSS3
... иллюстрации сказанного создадим простую фигуру:
html разметка:
<div class="scene">
<div class="panel"></div>
</div>
css код:
.scene {
width: 200px; ...
- 34. верстка портфолио на flexbox (часть 2)
- CSS/CSS3
... каждом portfolio_item имеется фотография portfolio_image.
html разметка
<div class="portfolio">
<div class="portfolio_col">
<div class="portfolio_item">
<img ...
- 35. создание сетки 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> ...
- 36. ошибки новичков при верстке сайтов #1
- CSS/CSS Основы
... делятся на два типа — блочные и строчные. рассмотрим на примере тегов div (блочный) и span (строчный) принципиальную разницу между ними. поместим ...
- 37. css grid. практические примеры #1
- CSS/CSS Основы
... невозможности расположить блок по осям x и y одновременно.
<div class="container">
<div class="item">item-1</div>
<div class="item">item-2</div> ...
... классом loader и четыре блока.
<section>
<div class="loader">
<div></div>
<div></div> ...
... расположен фиолетовый блок-ребенок.
// html разметка
<div class="wrap">
<div class="block"></div>
</div>
// css код родительского блока ...
- 40. адаптивная контактная форма
- CSS/CSS3
... form создадим розовый блок с классом container.
<div class="container">
<form action="#">
</form>
</div>
внутри тега форм создадим пять рядов ...
- 41. пример адаптивной верстки на bootstrap
- CSS/CSS Основы
... строка и соответственно 2 колонки.
<section class="app">
<div class="container">
<div class="app__content">
<div class="row">
<div ...
- 42. закруглённые углы через css
- CSS/CSS Основы
... отвечает за свой угол блока. далее напишите такой html-код:
<div class="roundborder">
<div>
<div>
<div>
...
- 43. верстка сайта с нуля. меню навигации. часть 1.
- HTML/HTML 5
... содержимое шапки пишем внутри парного тега header.
<header>
<div class="wrap">
<div>
<div>
<a href="#"><img src="logo.png" alt=""/></a>
</div> ...
- 44. js swipe api: что это и как его использовать
- JavaScript/JavaScript Основы
... }
</style>
</head>
<body>
<div id="swipearea">swipe here</div>
<script>
const swipearea = document.getelementbyid('swipearea'); ...
- 45. верстка адаптивной шапки на bootstrap
- CSS/CSS Основы
... одну строку и занимают определенное количество колонок.
<div class="container">
<div class="row">
<div class="col-lg-2">номер телефона</div> ...
- 46. эффект переворачивающейся карточки на css
- CSS/CSS Основы
... <link rel="stylesheet" href="card.css">
</head>
<body>
<div class="container">
<div class="work-card">
<div class="work-card__inner"> ...
- 47. функции 3d-преобразования в css
- CSS/CSS3
... тегами body вставить нижеуказанный html.
html разметка:
<div class="scene">
<div class="panel panel--translate-neg-z">translatez(-200px)</div>
</div> ...
- 48. пример верстки фотогалереи на css grid #1
- CSS/CSS Основы
... создадим саму секцию-портфолио с вложенными тегами div, а каждую картинку положим в отдельный тег div в качестве фона. рекомендуется стили касающиеся ...
- 49. фильтр категорий товаров на javascript (часть 2)
- JavaScript/JavaScript Основы
... для фильтрации.
<main class="content">
<div class="container">
<div class="card clothing">clothing</div>
<div ...
- 50. пишем информер погоды на react
- JavaScript/JavaScript Основы
... <title>информер погоды на react</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html> ...
- 51. как работать со стилями в javascript.
- JavaScript/JavaScript Основы
... создадим два самых обычных div блока, но для одного зададим стили через атрибут style, а для другого через тег style.
<style>
div {
width: 150px;
height: 150px; ...
- 52. работа с выборкой элементов на jquery
- JavaScript/jQuery
... jquery.
давайте разберём для начала следующий пример
<div id="block"><span>блок</span></div>
<script type="text/javascript">
var element = $("#block span").clone(); // клонируем ...
- 53. плагин emmet для sublime text.
- Софт/Софт для создания сайтов
... плагином emmet.
введите
div
а теперь нажмите клавишу tab. в результате этих несложных действий мы получим открывающий и закрывающий тег div, а курсор будет ...
- 54. красивое оформление html/css кода
- HTML/HTML Основы
... левого края редактора кода. тег div является вложенным элементом относительно тега section.
<section>
<div>
</div>
</section> ...
- 55. флекс контейнер и элементы флекса (верстальщику)
- HTML/HTML 5
... разметку, опираясь на схему.
<section class="expert">
<div class="expert__icon"></div>
<h2 class="expert__title">расскажите о своём опыте</h2> ...
- 56. bootstrap 4. модальное окно
- CSS/CSS Основы
... javascript. в данном уроке мы рассмотрим только первый случай.
<div class="container">
<div class="row mt-3">
<div class="col-12">
<button class="btn ...
- 57. мобильный сенсорный слайдер swiper
- JavaScript/JavaScript Основы
... <!-- общий контейнер -->
<div class="swiper-container">
<!-- оболочка для слайдера -->
<div class="swiper-wrapper">
<!-- ...
- 58. нарисовать стрелку на css
- CSS/CSS Основы
... анимацию.
создадим в html разметке блок и стилизуем его.
// html
<div class="arrow"></div>
сделаем общую основу для стрелок (вверх, вниз, вправо и влево), ...
- 59. создание теста для сайта на javascript
- JavaScript/JavaScript Основы
... создаст структуру html разметки. для каждого объекта массива создается тег div, внутри которого будет параграф p, поле для ввода (input) и дата-атрибут ...
- 60. добавление и удаление элементов на 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='#'>ссылка внутри ...
- 61. пример адаптивной верстки на flexbox (#2)
- CSS/CSS Основы
... блок с текстом. новым блокам зададим свои классы.
<div class="advantages_col">
<div class="advantages_image"><img src="image_01.svg" alt=""></div>
<div ...
- 62. разница между class и id на примере тега div
- CSS/CSS Основы
... бы такой нужный и важный тег <div>. посмотрите код любого сайта, который найдете в интернете и увидите, что тег <div> чаще других тегов встречается ...
- 63. фигуры с hover-эффектом из сериала "игра в кальмара"
- CSS/CSS Основы
... карточки закрашивается черным цветом в мелкую сеточку.
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div ...
- 64. семантическая разметка html5: понятное руководство с примерами
- HTML/HTML Основы
... href="#content">перейти к содержимому</a>
<header class="site-header">
<div class="logo">coffeetime</div>
<nav aria-label="основная навигация">
<ul>
<li><a ...
- 65. красивая форма с индикатором заполнения.
- 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 ...
- 66. слайдер slick.
- JavaScript/jQuery
... jquery, т.к. слайдер использует эту библиотеку для своей работы.
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
...
- 67. верстка формы обратной связи. часть 5
- HTML/HTML 5
... форма обратной связи помещена в теге div с классом part_2_of_3 и занимает она две трети от ширины родителя.
<div class="con part_2_of_3">
<div class="cont-form">
<form ...
- 68. верстка по сетке bootstrap (часть 3)
- CSS/CSS Основы
... позиционирования.
html разметка
<section class="icons">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 wrap-icons">
<div ...
- 69. как сделать тень на css
- CSS/CSS Основы
... вас должны быть, а далее надо написать следующий html-код:
<div class="shadow-block">
<div class="sh-top"></div>
<div class="sh-rt"></div>
<div class="sh-sl"> ...
- 70. анимированная кнопка на чистом css
- CSS/CSS3
... создадим квадрат с пустыми блоками и ссылкой button внутри.
<div class="square">
<div></div>
<div></div>
<div></div> ...
- 71. парсинг сайта вакансии на python. часть 2. отображение вакансий
- Python/Основы Python
... }
</style>
</head>
<body>
<div id="root"></div>
<script>
// карточка вакансии ...
- 72. 3 основных способа верстки сайтов. часть #2
- CSS/CSS3
... элементов, не обращая внимания на пустые ячейки.
<div class="grid-wrap">
<div class="grid-item">title</div>
<div class="grid-item">image</div> ...
- 73. круговой индикатор выполнения с html и css. часть 4
- CSS/CSS Основы
... добавление к html разметке нового блока div. добавим процентное число в индикатор выполнения.
<body>
<div class="circle-wrap">
<div class="circle"> ...
- 74. пишем расширение для браузера chrome для поиска по истории посещенных страниц
- JavaScript/JavaScript Скрипты
... <div id="extension">
<button id="openhistorybtn">open history</button>
</div>
<script src="popup.js"></script> ...
- 75. слайдер изображений на jquery без плагинов
- JavaScript/JavaScript Основы
... этой статье я сейчас приведу.
для начала разберём html-код:
<div id="container">
<div id="slider">
<h3>заголовок слайдера</h3>
...
- 76. модальное окно на 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">
...
- 77. как сделать div со 100% height
- CSS/CSS Основы
при блочной вёрстке часто требуется сделать у блока div высоту 100%. простым указанием height=100% в div не получится добиться желаемого результата, поэтому ...
- 78. полупрозрачный дизайн для бизнес карты
- CSS/CSS Основы
... готовые иконки телефона и конверта из библиотеки ionicons.
<div class="card">
<div class="content">
<div class="imgbx">
<img ...
- 79. выборка элементов в jquery
- JavaScript/jQuery
... управление элементами. например, может быть такая задача: выбрать все div с определённым классом и увеличить в них шрифт. увеличение шрифта - это ...
- 80. метод queryselector в javascript
- JavaScript/JavaScript Основы
... методов queryselector и queryselectorall
посмотрите на следующий html:
<div id="main">
<div class="pic-container">
<img class="img-src" src="smiley.png" ...
- 81. как сделать выпадающий список с красивым эффектом на css и jquery.
- JavaScript/jQuery
... приступим к созданию
в .html файле пропишем следующую структуру
<div class="drop">
<div class="option active placeholder" data-value="placeholder">
choose wisely
</div> ...
- 82. трансформация сложенных карточек на css
- CSS/CSS Основы
... переменной (j) и указываем значение переменной (цифру).
<div class="container">
<div class="card" style="--i:-1">
<div class="content" style="--j:1">
<h2>card ...
- 83. ошибки новичков при верстке сайтов #2
- CSS/CSS Основы
... избегайте прописывать стили непосредственно в html тегах.
<div style="font-size: large;"></div>
в каких случаях можно применять инлайновые стили?
...
- 84. как сделать чашку с блюдцем на css
- CSS/CSS Основы
... фигуры. это мы сейчас и узнаем.
рисуем чашку
//html теги
<div class="container">
<div class="cup">
<div class="top">
<div ...
- 85. как сделать прелоадер на чистом css3.
- CSS/CSS3
... и рассмотрим в этой статье.
для начала создадим разметку
<div class="pre-loader">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div> ...
- 86. получить и изменить значение атрибута на jquery
- JavaScript/jQuery
... изображение. к установленным атрибутам, вернемся чуть позже.
<div class="imagewrap">
<div class="imageplace">
<img src="jquery_data_white.jpg" alt="футболка"> ...
- 87. микроразметка сайта schema.org
- HTML/HTML Основы
... обязательный атрибут itemscope и тип схемы разметки itemtype.
<div itemscope itemtype="https://schema.org/person"></div>
далее прописываются отдельные свойство схемы, ...
- 88. верстка сайта с нуля. верстка портфолио. часть 3
- HTML/HTML 5
... контейнер.
<div class="container-well">
<h2>портфолио></h2>
<p>много сплю и ем, но я гарантирую, что вы полюбите меня таким, какой я есть.</p>
</div>
...
- 89. как изменить шапку сайта (часть 2
- CSS/CSS3
... и языковое меню.
продолжим html разметку
в div с классом menu, лежат ссылки на страницы сайта, а в div с классом lang-menu, ссылки на разные языковые версии. ...
- 90. пример стилизации slick слайдера (часть 1)
- JavaScript/jQuery
...
// html разметка
<section class="wrap">
<div class="wedding">
<div class="wedding__item"><img src="wedding_01.jpg" alt=""></div>
<div ...
- 91. настройки стрелок у slick слайдера (часть 3)
- JavaScript/jQuery
... для слайдера, внутри которого 6 слайдов с картинками.
<div class="slider">
<div class="slider__item">
<img src="img/slides/01.jpg" ...
- 92. как сделать спойлер на сайте
- JavaScript/JavaScript Основы
... классом list-header, а блоки с контентом - классом list-content.
<div class="list-group">
<div class="list-group-item list-header" data-name="spoiler-title">
заголовок ...
- 93. выпадающий мультиселект на 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> ...
- 94. поворот карточки с картинкой в css
- CSS/CSS3
... карточки
html разметка
создадим div с классом wrapper, который обернёт всю карточку и займёт все пространство страницы. внутри div-а обёртки будет находится ...
- 95. структура блочной вёрстки
- 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> ...
- 96. как добавить темную тему на сайт в bootstrap 5?
- JavaScript/JavaScript Основы
...
<div class="container mt-5">
<h1>cмены темы</h1>
<div class="form-check form-switch"> ...
- 97. генератор паролей на 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> ...
- 98. bootstrap 4. что такое jumbotrons.
- CSS/CSS Основы
... такое как баннер. давайте теперь узнаем, как написать jumbotrons.
<div class="container">
<div class="jumbotron"></div>
</div>
как видите, создать базовый jumbotron ...
- 99. креативный эффект при наведении на изображения. часть 2
- CSS/CSS Основы
... его описание.
добавление в html-разметку контента
<div class="container">
<div class="clip clip1">
<div class="content"> ...
- 100. как сделать блоки со слайдер эффектом на чистом css3.
- CSS/CSS3
... эффектом</title>
<link rel='stylesheet' href='css/style.css'>
</head>
<body>
<div id="page-wrap">
<h1>блоки со слайдер эффектом</h1>
<p>используются ...
- 101. скрывающееся левостороннее меню на 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"> ...
- 102. верстаем круглые кнопки на 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> ...
- 103. иконки соц. сетей для сайта
- CSS/CSS3
... стилизовать под свой дизайн
сделаем html разметку
создадим контейнер div с классом box, внутри которого поместим пять пунктов списка ul. в каждый ...
- 104. верстка psd макета по bootstrap 4 сетке. часть 2.
- CSS/CSS Основы
...
переходим на сайт https://getbootstrap.com/ в раздел grid. мы определили у блока div классы "col-lg-3" "col-md-6", где col – колонка,lg и mg – большой и средний экран у ...
- 105. параметры по умолчанию в javascript. часть 2
- JavaScript/JavaScript Основы
... неопределенных значений
следующая функция creatediv() создает в теле документа (body) новый
элемент div с определенным стилем высоты, ширины и границы. ...
- 106. как разместить блок по центру в 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"> ...
- 107. параллакс эффект. плагин simple parallax scrolling.
- JavaScript/jQuery
... data-image-src="/image.jpg", к которой хотите применить эффект.
<div class="parallax-window" data-parallax="scroll" data-image-src="/images/image.jpg"></div>
скопируем набор стилей и добавим в наш ...
- 108. captcha и генератор случайных чисел на js
- JavaScript/JavaScript Основы
... контейнер с классом captcha, до кнопки «отправить».
<div class="captcha">
...
</div>
2. внутри контейнера создадим два блока для первой ...
- 109. как сделать вкладки на чистом css
- CSS/CSS Основы
... собой. далее создадим три блока с содержимым табов tab__box.
<div class="wrap">
<div class="tabs">
<nav class="tabs__items">
<a ...
- 110. как верстать сайт без макета
- HTML/HTML 5
... по макету.
<header class="header">
<div class="container-fluid">
<div class="row">
<div class="col-md-6"> ...
- 111. верстка по сетке 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 ...
- 112. css позиционирование блоков
- CSS/CSS3
... перекрывает желтый, так как он в коде прописан последним.
<div class="block-yellow">исходная позиция
<div class="block-relative">относительная позиция- relative</div>
</div> ...
- 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. автоматически загружаемый popup после загрузки страницы (часть #1)
- JavaScript/JavaScript Основы
... созданные классы, чтобы наш popup выглядел более привлекательно.
<div class="popup">
<div class="contentbox">
<div class="close"></div>
<div ...
- 115. красивые табы на jquery.
- JavaScript/jQuery
... </head>
в самом же документе нужно создать структуру следующего вида:
<div id="tabs">
<ul>
<li><a href="#tabs-1" title="">первый таб</a></li> ...
- 116. скрывающееся меню сайта на html и css
- HTML/HTML 5
... </style>
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="profile"> ...
- 117. круговой индикатор выполнения с 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> ...
- 118. круговой индикатор выполнения с html и css. часть 3
- CSS/CSS3
... использовал 270 градусов.
добавим код в html:
<body>
<div class="circle-wrap">
<div class="circle">
<div class="mask half">
<div class="fill"></div> ...
- 119. структура вёрстки для двухколоночного сайта
- HTML/HTML Основы
... вёрстки для двухколоночного сайта.
для начала html-код:
<div id="header">шапка сайта</div>
<div id="content">
<div id="left">левая колонка</div>
...
- 120. шина событий (eventbus) в javascipt
- JavaScript/JavaScript Основы
... </style>
</head>
<body>
<div id="app">
<div class="row">
<div class="column block block_a"> ...
- 121. создание простого серверного приложения на 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 --> ...
- 122. обработка события click на css
- CSS/CSS Основы
... легко обработается через css.
для начала самый обычный html-код:
<div class="tabs">
<div class="content">содержимое 1</div>
<div>вкладка 1</div>
</div> ...
... { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
</style>
<div class='row'>
<slot name='avatar'></slot>
<div class='info'>
<div class='name' part='name'><slot name='name'>без ...
- 124. как прокрутить скролл у div до низа
- JavaScript/JavaScript Основы
... скролла вниз у div, для того чтобы пользователь сразу увидел новое сообщение в чате. сообщения чата, как вы уже догадались, находились в div. большинство ...
- 125. двухколоночная вёрстка с одинаковой высотой колонок
- CSS/CSS Основы
... для некоторых дизайнов это не подойдёт, и придётся мучаться с height: 100% у div, что всегда весьма проблемно, тем более, что можно сразу сделать двухколоночную ...
- 126. анимированный фон с parallax эффектом
- JavaScript/JavaScript Основы
... изображения планеты создадим свой div с классом item . добавим data-depth с разными значениями скорости для движения планет.
<div class="space" id="space">
<div ...
- 127. верстка формы входа (часть 2)
- CSS/CSS3
... бэм.
шаг 3.
под ссылкой – блок с аватаркой.
<div class="form__avatar">
<img src="img/avatar.png" alt="avatar">
</div>
.form__avatar {
width: 97px;
height: ...
- 128. как получить элемент в js
- JavaScript/JavaScript Основы
... элемент по классу
задача 2: получить содержимое тега div по классу.
для наглядности, мы создали один div с классом any и второй обычный блок.
<div class="any">блок ...
- 129. изображения внутри треугольников
- CSS/CSS Основы
... container, куда поместим четыре блока div с изображениями. один блок с классом card - это будущий треугольник.
<div class="container">
<div class="card"> ...
- 130. извлечение данных из html формы с помощью javascript
- JavaScript/JavaScript Основы
... обязательно находится внутри тега form.
<form action="#" method="#" id="form">
<div>
<label>
имя:
<input ...
- 131. перебор массивов циклом for.. of
- JavaScript/JavaScript Основы
... перебор dom элементов
сначала получим три div по имени тега, в консоль выведется html коллекция.
// html разметка
<div>1</div>
<div>2</div>
<div>3</div> ...
- 132. валидация формы на javascript
- JavaScript/JavaScript Основы
... <title>валидация формы</title>
</head>
<body>
<div class="container">
<form id="form" class="form"> ...
- 133. clearfix на css
- CSS/CSS Основы
... давайте разберём такой пример:
<div id="article">
<img src="img.jpg" alt="" style="float: left;" />
<p>текст статьи</p>
</div>
<div>подвал сайта</div>
...
- 134. анимированный footer у веб-сайта (продолжение)
- CSS/CSS Основы
... добавим в html-код четыре волны с разными идентификаторами.
<div class="waves">
<div class="wave" id="wave1"></div>
<div class="wave" id="wave2"></div> ...
- 135. пишем приложение на 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> ...
- 136. дизайн карточки на чистом css
- CSS/CSS Основы
... integrity="sha512-5a8nwdmowrsz20fdsjczguidubr8lipyu+wymtzp1lmy9g6oc7hlzv156xqnsgnuztymefftcsfh/tnje/+xbg==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<div class="card">
<div class="circle">
<div class="imgbx">
<img ...
- 137. эффект раскрытия обложки при наведении курсора
- CSS/CSS Основы
... (карточки): имя человека, должность и иконки на социальные сети.
<div class="card">
<div class="imgbox">
<img src="img1.jpg">
<img src="img2.jpg"> ...
- 138. как сделать выпадающий блок на чистом css?
- CSS/CSS Основы
... <h1>программирование на javascript с нуля до гуру 2.0</h1>
<div class="toggler">
<input type="checkbox" id="toggler__checkbox-id-1" class="toggler__checkbox"> ...
- 139. модальное окно на css + js
- JavaScript/JavaScript Основы
... подсказывает пользователю, что сначала следует заняться окном.
<div id="mymodal" class="modal"> </div>
содержимое модального окна, состоящее из хедера, тела ...
- 140. маска ввода телефона на jquery
- JavaScript/jQuery
... margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<form action="" ...
- 141. трёхмерный мир на чистом css
- CSS/CSS3
... translatez(-3em);
}
</style>
</head>
<body>
<div class="scene">
<div class="frontwall"></div>
<div class="leftwall"></div> ...
- 142. валидация формы на 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>валидация ...
... </style>
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="menu-btn"> ...
- 144. иконка гамбургер-меню на css+js
- CSS/CSS3
... три блока div с разными классами. контейнер нужен для отображения символа указателя, когда пользователь наводит указатель мыши на div блоки. первый ...
- 145. манипуляции с элементами в js
- JavaScript/JavaScript Основы
... красный квадрат. как изменить css свойства у элемента через js?
<div class="red"></div>
.red {
width: 150px;
height: 150px;
background-color: ...
- 146. получение элементов по селектору в js
- JavaScript/JavaScript Основы
... примеров.
мы получим список (псевдомассив) всех элементов div с классами example_1 и example_2.
<div class="simple_one"></div>
<div class="example_1"></div>
<div class="simple_two"></div> ...
- 147. как сделать видео на сайте адаптивным
- HTML/HTML 5
... картинки, в таком случае, браузер покажет в плейере первый кадр видео.
<div class="movie-wrap">
<video class="movie" src="video/travaho.mp4" width="640" height="480" controls ...
- 148. генератор изображений с текстом на javascript
- JavaScript/JavaScript Скрипты
... <div class="container">
<h3 class="h3 my-4">генератор картинок</h3>
<div class="row"> ...
- 149. верстка по сетке bootstrap (часть 1)
- CSS/CSS Основы
... justify-content-end – выравнивает меню по центру на горизонтали
<div class="top-menu">
<div class="container-fluid">
<div class="row">
<div class="logo-wrap ...
... #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
}
<div class="card">
текст карточки
<span class="card__badge">new</span>
</div>
совет: если вы планируете «приклеить» ...
- 151. простой слайдер на javascript
- JavaScript/JavaScript Основы
... </style>
</head>
<body>
<div class="container mt-5">
<div id="customcarousel" class="carousel">
...
- 152. верстка прозрачной формы входа
- HTML/HTML 5
... <form>
<div>
<input type="text" name="" required="">
<label>логин</label>
</div>
<div> ...
- 153. css-эффекты. градиентная рамка у блока
- CSS/CSS Основы
... в конце урока станет понятно, зачем он был нужен.
<div class="container">
<div class="box">
<span></span>
<div ...
- 154. адаптивное мобильное меню для сайта (часть 1)
- JavaScript/JavaScript Основы
... возникло ситуации, когда белые буквы стоят на белом фоне.
<div class="header">..</div>
.header {
font-family: tahoma, sans-serif;
position: ...
- 155. пример простого слайдера на javascript (#1)
- JavaScript/JavaScript Основы
... всю конструкцию в центре страницы.
// html разметка
<div class="container">
...
</div>
// css стили
.container {
max-width: 1000px;
margin: ...
- 156. пример адаптивной верстки на flexbox (#1)
- CSS/CSS Основы
... класс удаляете из html и css кода.
<section>
<div class="container bg_pink">container</div>
</section>
зададим для контейнера максимальную ширину ...
- 157. анимация появления текста на css
- CSS/CSS Основы
... абсолютно одинаковыми по форме, но разными по содержанию.
<div class="container">
<div class="text">приходи в школу</div>
<div class="text">учись ...
- 158. пример верстки формы на css grid #4
- CSS/CSS Основы
... форма.
<section class="form_section">
<div class="container">
<form class="grid">
<div><input type="text" name="mailing" placeholder="mailing"></div> ...
- 159. красивый hover эффект для блока
- CSS/CSS Основы
... content с информацией и точно такой же иконкой (блок icon).
<div class="container">
<div class="box">
<div class="imgbx">
<img ...
- 160. css grid. практические примеры #3
- CSS/CSS Основы
... сетке, обратимся к нему через псевдокласс nth-child(1).
<div class="container">
<div class="item">item-1</div>
<div class="item">item-2</div> ...
- 161. создание движка на 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>
смотрите! у нас подключается файл ...
- 162. необычный эффект при наведении на карточку
- CSS/CSS Основы
... карточек, а замена лиц будет происходить с помощью css-свойств.
<div class="container">
<div class="card">
<div class="face face1">
<div ...
- 163. зависимый выпадающий список в 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> ...
- 164. социальная сеть на php: вывод домашней страницы.
- PHP/PHP Основы
... integrity="sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container">
@yield('content')
</div>
</body>
</html>
теперь вернемся в файл home.blade.php, ...
- 165. высота и ширина блока в css
- CSS/CSS Основы
... по высоте и ширине.
рассмотрим на примере блока div, сделаем html разметку.
<body>
<div></div>
</body>
поведение блоков по высоте ...
- 166. создание qr-кода на javascript
- JavaScript/JavaScript Основы
...
<div id="app">
<h1 class="p-3">генератор qrcode</h1>
<div class="text">
<form> ...
- 167. ошибки новичков при верстке сайтов #4
- CSS/CSS Основы
... тоже будет полупрозрачным. что не есть хорошо.
// html
<div>
<div class="black">
<h1>
свойство ...
- 168. адаптивная верстка на flex css
- CSS/CSS3
... нижнем блоке родителя (section) находятся в свою очередь ещё три блока ребенка (div id="item"). в каждом блоке ребенке есть картинка, подзаголовок, текстовый ...
- 169. рисуем капли воды с помощью css
- CSS/CSS Основы
... через блочный тег div. пропишем три блока с классом drop. каждый из таких блоков в будущем станет каплей.
/ * html разметка * /
<div class="drops">
<div ...
- 170. работа с data атрибутами в html/css/js
- JavaScript/JavaScript Основы
... может быть любой, слова должны разделяться через дефис.
<div data-is-active-color="red"></div>
пример стилизации элементов с data атрибутом
мы можем ...
- 171. верстка сайта с нуля. трехколоночный макет. часть 4
- HTML/HTML 5
... "забит" div-ами. разбираться в таком коде было крайне тяжело, приходилось ставить много комментариев. в современной блочной верстке применять тег div ...
- 172. списки в html: ul, ol, dl — практическое руководство для начинающих
- HTML/HTML Основы
... последовательностей символов «-», «•».
если по крайней нужде верстаете «список на div», добавьте роли: role="list" на контейнер и role="listitem" на элементы — но лучше ...
- 173. как сохранить данные из html contenteditable на сервере в php?
- PHP/PHP Основы
... мы рассмотрим с вами один из способов отправки на сервер содержимого
div блока с атрибутом contenteditable.
contenteditable - это атрибут, который будучи применный ...
- 174. html шаблон для портфолио
- HTML/HTML 5
... единственный, если работ в портфолио больше, то ряды можно добавить.
<div class="row">…</div>
внутри ряда идут четыре столбцы, где один столбец – одна ...
- 175. как вывести текст в javascript
- JavaScript/JavaScript Основы
... в javascript.
<div id="text_out">
<p id="text_change">заменить текст</p>
<hr>
<button onclick="text_out()" class="btn btn-danger">заменить текст</button>
</div>
заменить ...
- 176. реализация бесконечной прокрутки на javascript
- JavaScript/JavaScript Основы
... <body>
<div id="infinite-scroll">
<div>
<script>
for( let i = 0; i < 100; i++ ) ...
- 177. позиционирование текста на картинке в css
- CSS/CSS3
... управлять ими, прописывая свойства в дивах.
<div class="container">
<img src="vegetables.png" alt="vegetables">
<div class="left">лук</div>
<div class="center">картошка</div> ...
- 178. модальное окно на js
- JavaScript/JavaScript Основы
... class="more">отправить заявку</button>
<!--модальное окно-->
<div class="modal">
<div class="modal-header">
<span class="close">×</span> ...
... структура
<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 ...
- 180. css свойство filter grayscale на практике
- CSS/CSS3
... .holder с фотографиями с классом img-1.
html код целиком:
<div id="img-wrap">
<div class="holder">
<img src="photo_01.jpg" ...
- 181. как сделать аккордион на чистом css3.
- CSS/CSS3
... <body>
<div class="container">
<ul class="accordion">
<li>
<a href="#first" class="accordion-header">первый</a>
<div class="accordion-content" ...
- 182. как расположить картинку внутри силуэта
- CSS/CSS Основы
... высота ограничивают размеры вставляемых изображений.
<div class="container">
<div class="imgbx">
<img src="turtle.jpg">
...
- 183. блок с функцией "read more" на javascript
- JavaScript/JavaScript Основы
... контейнера поместим блок card с иконкой, текстом и ссылкой more.
<div class="container">
<div class="card">
<div class="icon">
<img ...
- 184. простой таймер обратного отсчета на javascript
- JavaScript/JavaScript Основы
... </head>
<body>
<div>регистрация на мероприятие будет закрыта через <span class="time">00:00:20</span> сек.</div>
<div>регистрация на мероприятие будет закрыта через <span class="time">00:00:12</span> сек.</div> ...
- 185. оптимизация потока документа в веб-разработке
- HTML/HTML Основы
... left: 100px;
}
</style>
</head>
<body>
<div class="absolutely-positioned">
этот блок абсолютно позиционирован и находится вне потока документа. ...
- 186. что такое гибкая сетка в адаптивной верстке?
- HTML/HTML 5
... начала мы должны сделать хоть и элементарную, но html разметку.
<div id="page">
<div class="blog section">
<div class="main"></div>
<div class="sidebar"></div> ...
- 187. скрипт галереи + слайд-шоу на javascript
- JavaScript/JavaScript Скрипты
... delay);
}
</script>
код html (вставлять между тегами <body> и </body>):
<div>
<p style = 'text-align: center;'>
<img id='bigimgslide' src='images/javascript/space_1.jpg' ...
- 188. верстка формы + скрипт выбора даты
- CSS/CSS3
... пользователь
html структура
<div class="booking_form">
<h2>забронировать визит</h2>
<form action="#">
<div class="input_contact">
<input ...
- 189. всплывающее popup окно после нажатия на кнопку
- JavaScript/JavaScript Основы
... параграф с текстом
поле для ввода email
кнопка подписки
<div id="popup">
<div class="content">
<img src="email.png">
<h2>join ...
- 190. 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' ...
- 191. как создать аккордеон на js
- JavaScript/JavaScript Основы
... угодно. в нашем случае там находится параграф с текстом.
<div class="accordion">
<div class="contentbx">
<div class="label">list one</div>
<div ...
- 192. пример верстки простой секции на css grid #3
- CSS/CSS Основы
... колонке brand-right - фотография.
<section class="section-brand">
<div class="container">
<div class="brand-left">
<h2>о бренде</h2> ...
- 193. css свойство position: sticky
- CSS/CSS3
... пользователь докрутил.
// схематичная html разметка
<div class="sticky-first">
sticky position #1
</div>
<div>
<h3>
несколько ...
- 194. html5 data-атрибуты (data-*): практическое руководство с примерами
- HTML/HTML 5
... использовать для стилизации состояний и небольших подсказок.
<div class="tab" data-state="active">профиль</div>
<div class="tab" data-state="inactive">настройки</div>
.tab[data-state="active"] ...
- 195. регулярные выражения в 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)) # жадно: один большой ...
- 196. 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: фактическая ...
- 197. как сделать вкладки в html
- JavaScript/JavaScript Основы
... кнопке отработает эта функция, первым аргументом события будет - event.
<div class="tab">
<button class="tablinks" onclick="opencity(event, 'москва')">москва</button> ...
- 198. css эффекты при наведении на картинку
- CSS/CSS3
... под текстом – синий. у тега a, вместо решетки поставьте url.
<div class="row">
<div class="column">
<figure class="imghvr-slide-up">
<img ...
- 199. выравнивание по центру блока внутри блока
- CSS/CSS3
... будут только стили.
способ первый
<div class="block">
<img class="icon first" src="support.png" alt="">
</div>
положение изображения автоматически ...
- 200. красивые и эффектные слайдеры на 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;"> ...
- 201. возникновение события при изменении checkbox на javascript
- JavaScript/JavaScript Скрипты
... <body> и </body>):
<div>
<input type = 'checkbox' id = 'cb1' onchange = 'showorhide("cb1", "cat1");'/>показать содержимое категории 1
<br />
<div id = 'cat1' style = 'display: ...
- 202. bootstrap 4. утилиты и типография.
- CSS/CSS Основы
... сделаем его голубого цвета, а текст – белого:
<div class="jumbotron jumbotron-fluid bg-info text-white" style="background: #aaa;">
<div class="container">
<h1>добро пожаловать ...
- 203. гамбургер меню на css или js? часть 1
- JavaScript/jQuery
... код в html:
<nav>
<div class="wrapper">
<!-- меню гамбургер, при клике, развернутся пункты меню -->
<div class="menuburger">меню</div> ...
- 204. креативный эффект при наведении на изображения. часть 1
- CSS/CSS Основы
... пустых блока, которые в дальнейшем заполним картинками.
<div class="container">
<div class="clip clip1"></div>
<div class="clip clip2"></div> ...
- 205. всплывающее окно. pop-up на jquery.
- JavaScript/jQuery
... <div class="content">
<button class="show_popup blue_btn" rel="popup1">отправить письмо</button>
</div>
...
- 206. креативный дизайн блока на css
- CSS/CSS Основы
... возьмем из готовой библиотеки iconicons, указав ее название.
<div class="container">
<div class="card">
<div class="icon">
<ion-icon ...
- 207. креативная css анимация масштабирования
- CSS/CSS Основы
... невидимого фронта. в финальном коде никаких рамок не будет.
<div class="container">
<div class="box">
<div class="circle"></div> ...
- 208. как сделать 404 страницу
- HTML/HTML 5
... слой <body> – сама картинка, средний в теге <div> – полупрозрачный блок затемнения и верхний <div> – текст. наша задача задать нужное позиционирование ...
- 209. эффект многослойности при наведении на карточку
- CSS/CSS Основы
... которого поместим карточку с изображением и текстом.
<div class="box">
<div class="card">
<div class="imgbx">
<img ...
- 210. анимация светящегося куба (3d эффект)
- CSS/CSS Основы
... основание куба (пятая сторона) не будет показываться вообще.
<div class="cube">
<div class="top"></div>
<div>
<span ...
- 211. компонент "пользователь пишет сообщение" на чистом css
- CSS/CSS Основы
... </style>
</head>
<body>
<div class="bubble">
<div class="point"></div>
<div class="point"></div> ...
- 212. три эффекта наведения на кнопку
- CSS/CSS Основы
... выравнивания их по центру. один блок - одна кнопка.
<div class="wrapper">
<div class="buttonleft"><span>left</span></div>
<div class="buttonoverlay"><span>center</span></div> ...
- 213. анимация рамки на css
- CSS/CSS Основы
... span. каждый span соответствует одной стороне квадрата.
<div class="container">
<div class="bg-img">
<div class="box">
<span></span> ...
- 214. свойство transform-origin на примере
- CSS/CSS Основы
... расположенных в тегах p.
<section class="section">
<div class="sticker">
<div class="sticker_move">
<div class="title">pizza ingredients</div> ...
- 215. создаем выпадающее боковое меню на html, css и javascript
- JavaScript/JavaScript Основы
... .submenu-item {}
</style>
</head>
<body>
<div class="container">
<aside class="sidebar-menu" id="sidebarmenu"> ...
- 216. как прижать футер к низу страницы(табличный способ).
- CSS/CSS Основы
... страницы, и высота его сможет быть динамичной.
html верстка:
<div class="wrapper">
<div class="header">
this is the header
</div>
<div class="content"> ...
- 217. как прижать футер к нижней грани страницы(позиционирование).
- CSS/CSS Основы
... нижней грани страницы.
итак, сначала рассмотрим разметку.
<div class="wrapper">
<div class="header">
<p>это верхняя часть страницы</p>
...
- 218. верстка таблицы (scss + flexbox)
- CSS/CSS Основы
... в общем flex-контейнере advantage.
<div class="advantage">
<table class="advantage-table"></table>
<div class="advantage-users">список пользователей</div> ...
- 219. изменение размеров div на javascript
- JavaScript/JavaScript Основы
мы с вами когда-то разбирали перемещение div на javascript, а сегодня мы разберём изменение размеров div на javascript, которое так же может быть очень удобно ...
- 220. перемещение placeholder над полем ввода при фокусе
- CSS/CSS Основы
... но с типом "submit".
<div class="container">
<h2>premium subscription</h2>
<form>
<div class="inputbox">
<<input ...
- 221. пример бэм верстки на flexbox
- HTML/HTML 5
... фона и размеры у всего блока.
<section class="info">
<div class="info__icon"></div>
<h2 class="info__title">личная информация</h2>
<div ...
- 222. показ сайта на различных девайсах
- CSS/CSS3
... применения графики. для этого создадим div с классом smartphone (изображающий сам смартфон), внутри которого поместим другой div с классом content (изображающий ...
- 223. как сделать текст в html (топ 10 запросов)
- HTML/HTML 5
... прилипает к левому краю. свойство text-align, внутри тега div, выравнивает текст по центру.
<div>поставьте меня в центр</div> // html
div {
text-align: ...
- 224. как установить иконки загрузки на чистом css.
- CSS/CSS3
... loaders.min.css
вставьте подходящее число div'ов в этот элемент
создайте элемент и добавьте класс анимации(например, <div class="loader-inner ball-pulse"></div>
...
- 225. что такое 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> ...
- 226. изогнутая тень с помощью псевдоэлементов
- CSS/CSS Основы
... мы создали обертку wrap для блока с тенью curved shadow.
<div class="wrap curved">
<div class="shadow">
<div>curved shadow</div> ...
- 227. как сделать титры на сайте с помощью 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 ...
- 228. пример @keyframes css анимации
- CSS/CSS Основы
... невидимый
лоадер, в виде полукруга
мячик - просто круг
<div class="container">
<div class="loader">
<div class="ball"></div> ...
- 229. эффект печатающегося текста на сайте
- JavaScript/jQuery
... мы создадим два div-а, в одном из них с классом .box мы поместим растянутый на всю ширину и высоту страницы фон-картинку. а в другом div-е с классом .top-text, ...
- 230. примеры теней на css.
- CSS/CSS3
... shadow</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="shadow"></div>
</body>
</html>
а теперь перейдем к css
body {
background: #ccc; ...
- 231. таймер обратного отсчета flipclock
- JavaScript/jQuery
... html код
зададим html структуру. создадим div с классом clock, где будут находиться сам счётчик. под ним зададим div с классом message, в этом блоке будет выводиться ...
- 232. как сделать купон на css
- CSS/CSS3
... отдельный, чтобы раскрасить его в другой цвет.
<div class="coupon">
<img src="coupon.jpg" alt="coupon">
<div class="box">
<h2>скидка -20%</h2> ...
- 233. угловая лента на css
- CSS/CSS Основы
... позиционирование блока с ленточкой относительно окна браузера.
<div class="wrap">
<div class="box">
<div class="ribbon">
best ...
- 234. верстка прозрачной логин формы
- CSS/CSS Основы
... разобраться.
html код
<div class="box">
<h2>login</h2>
<form>
<div class="inputbox">
<input ...
- 235. как сделать фон в css
- CSS/CSS Основы
... вида фона, добавляя к селектору bg_example разные css свойства.
<div class="bg_example"></div> // html разметка
// css код
.bg_example{
width: 400px;
height: 300px;
}
это ...
- 236. необычный эффект наведения для дизайна веб-сайтов
- CSS/CSS Основы
... чтобы изображения встали в ряд, а не друг под другом.
<div class="container">
<div class="box">
<img src="img1.png">
</div> ...
- 237. приложение для просмотра погоды на vuejs
- JavaScript/JavaScript Основы
... для приложения. например, компонент с именем weatherapp.vue.
<template>
<div>
<h1>погода на улице</h1>
<input v-model="city" @input="fetchweather" placeholder="введите название города" /> ...
- 238. как сделать прогресс бар
- JavaScript/JavaScript Основы
... видно, что индикатор загрузки представляет собой зеленый блок div внутри серого div-а. зеленая полоска постепенно должна закрыть собой серую. запускается ...
- 239. анимированный текст по кругу на javascript
- JavaScript/JavaScript Основы
... html-разметка состоит из круга, логотипа дизайнера и текста.
<div class="circle">
<div class="logo"></div>
<div class="text">
<p>kristen ...
- 240. как сделать всплывающую форму
- JavaScript/JavaScript Основы
... сделать всплывающее окно с любым кодом, поскольку сначала мы прописываем тег div, который может служить контейнером и для любых других элементов, а не ...
- 241. меню аккордеон на js
- JavaScript/JavaScript Основы
... текстом.
<button class="accordion">вопрос 1</button>
<div class="panel">
<p>ответ на вопрос 1...</p>
</div>
<button class="accordion">вопрос 2</button>
<div class="panel"> ...
- 242. как сделать таблицу адаптивной
- CSS/CSS3
... таблицу адаптивной.
демонстрация адаптивной таблицы.
html разметка
<div>
<table>
<tr>
<th>имя</th>
<th>фамилия</th>
<th>баллы</th> ...
- 243. расширяемое поле для поиска на javascript
- JavaScript/JavaScript Основы
... поискового поля
создадим кастомное поисковое поле, используя только теги div.
<div class="search">
<div class="icon"></div>
<div class="input"> ...
- 244. css фреймворк materialize (navbar)
- CSS/CSS Основы
... active в тег li, чтобы обозначить текущую страницу.
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo"><img src="logo.png" alt=""</a> ...
- 245. эффект увеличивающегося изображения при клике на css и javascript
- JavaScript/JavaScript Основы
... <!-- изображения нужно добавлять в этот блок -->
<div class="images">
<img src="https://myrusakov.ru/images/ue5-cover.png" alt="image" onclick="displaymodal(this);"> ...
- 246. модальное окно на чистом 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> ...
- 247. callback функция в js
- JavaScript/JavaScript Основы
... черного цвета, необходимо все три перекрасить в розовый цвет.
<div class="box">элемент 1</div>
<div class="box">элемент 2</div>
<div class="box">элемент 3</div> ...
- 248. использование getboundingclientrect в javascript
- JavaScript/JavaScript Основы
... </head>
<body>
<div id="myelement" style="width: 200px; height: 100px; background-color: lightblue;"></div>
<script>
const element = document.getelementbyid('myelement'); ...
- 249. вывод диапазона дат в javascript
- JavaScript/JavaScript Основы
... браузер и предназначен для вывода текущей даты.
<div>
<input type="date" id="startdate">
</div>
<div>
<input type="date" id="enddate">
</div> ...
- 250. адаптивная навигация на html и css
- HTML/HTML 5
... <!-- логотип сайта -->
<div class="brand-title">мой сайт</div>
<!-- кнопака - гамбургер меню --> ...
- 251. карусель на чистом js
- JavaScript/JavaScript Основы
... вставим сами картинки и две кнопки – вперед / назад.
<div id="gallery">
<div class="photos">
<img src="img/woman.jpg"> ...
- 252. 3 способа вертикального выравнивания блока по центру
- CSS/CSS3
... отношению к браузеру, который и будет выступать его родителем.
<div class="block"></div>
html,
body {
width: 100%;
height: 100%;
}
.block ...
- 253. показ случайной цитаты в javascript
- JavaScript/JavaScript Скрипты
... <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="random-phrase">
<div id="phrase"></div>
<div id="author"></div> ...
- 254. верстаем карточку с эффектом раскрывающейся шторки при наведении на css
- CSS/CSS Основы
... </style>
</head>
<body>
<div class="container">
<div class="content">
<h1>заголовок</h1> ...
- 255. валидация номера телефона на js
- JavaScript/JavaScript Основы
... красной рамкой.
html форма
<div class="form">
<form>
<h2 class="form__title">валидация номера телефона</h2>
<div class="form__input">
<input ...
- 256. css grid свойство align-items
- CSS/CSS Основы
... увидеть на codepen. ниже я приведу код одной такой ячейки.
<div class="container">
<div class="box top-left">
<div class="item">top ...
- 257. движение фоновой картинки внутри рамки
- CSS/CSS Основы
... дорого, хоть и сделана на чистом css.
html разметка
<div class="planet planetearth">
<div class="container">
<div class="earth"></div> ...
- 258. валидация формы на js
- JavaScript/JavaScript Основы
... ними мы и будем работать. добавим каждому полю name со своим значением.
<div class="input_contact">
<input type="text" placeholder="имя" name="first_name">
<input ...
- 259. material design: современный подход к дизайну интерфейсов
- HTML/HTML 5
... принципов material design рассмотрим пример карточки с информацией:
<div class="card">
<div class="card-header">
<h3>заголовок карточки</h3> ...
- 260. стилизация radio на css
- CSS/CSS3
... связку input+label в div с классом radio, то же самое сделаем для второй связки. присвоим так же классы input и label, для их дальнейшей стилизации.
<div class="radio"> ...
- 261. стилизация радиокнопок на css
- CSS/CSS3
... радиокнопка становится выбранной, необязательно целиться в сам кругляш.
<div class="form-group">
<label>
<input type="radio"> ...
- 262. верстка портфолио на flexbox (часть 1)
- CSS/CSS3
... margin: 0;
padding: 0;
}
секция с описанием
html код
<div class="container">
<div class="section_header">
<h3>what we do</h3>
<h2>some ...
- 263. как сменить фон при наведении на ссылку меню
- JavaScript/JavaScript Основы
... имеем дело с динамической сменой фона с помощью javascript.
<div class="navigation">
<div class="navarea">
<ul>
<li><a ...
- 264. пользовательский чекбокс на javascript
- JavaScript/JavaScript Основы
... не отображается на странице без написания css-кода.
<div class="checkbox">
<div class="inner">
<div class="toggle"></div> ...
- 265. как можно прочитать и получить данные из xml-файла в javascript?
- JavaScript/JavaScript Основы
... </table>
</template>
<div class="container">
<div class="jumbotron mt-3" style="text-align: center;">
<h1 id="headertitle">список задач</h1> ...
- 266. создаем видеоплеер c html и javascript
- JavaScript/JavaScript Основы
... }
</style>
</head>
<body>
<div id="videocontainer">
<h2>мой видео плеер</h2> ...
- 267. выравнивание элементов в html
- HTML/HTML Основы
... создаются с помощью тега <div>. то есть всё, что необходимо поместить в определённый контейнер помещается внутри тега <div>. а уже у этого тега ...
- 268. как правильно использовать теги div, section и article.
- HTML/HTML 5
... как правильно использовать теги div, section и article в html5.
помимо всем известного и очень часто используемого тега div, в html5 появились новые, семантические ...
- 269. частичная отмена float в css
- CSS/CSS Основы
... покажу её решение.
итак, давайте разберём вот такой код:
<div id="left">левые блоки</div>
<div id="right">
<img src="images/img.jpg" alt="" />
<p>текст ...
- 270. анимации модальных окон на javascript.
- JavaScript/JavaScript Скрипты
... <div id="animatedmodal">
<!-- это важно! чтобы закрыть модальное окно, имя класса должно совпадать с именем, данным в id
class="close-animatedmodal" -->
<div ...
- 271. css3 трансформации.
- CSS/CSS3
... <title>transforms</title>
<meta charset="utf-8">
</head>
<body>
<div class="block">css3 трансформации</div>
</body>
</html>
и зададим первоначальные стили
...
- 272. создание движка на mvc. заканчиваем работу с чатом.
- PHP/PHP Основы
...
$.post(url, data, function(o) {
$("#listinserts").append('<div>' + o.text + '<a href="#" class="del" rel="'+ o.id +'">x</a></div>');
}, 'json');
добавьте также ссылку ...
- 273. как создать custom template на wordpress
- Софт/Софт для создания сайтов
...
а после названия страницы, создадим форму контактов.
<div>
<form>
<div>
<label>ваше сообщение</label>
<input ...
- 274. как сделать интро в стиле "звёздных войн".
- CSS/CSS Основы
... href="/path/to/starwarsintro.css">
<!-- поместите в body, где вы хотите, чтобы было интро -->
<div class="star-wars-intro">
<!-- синий интро текст -->
<p class="intro-text">
...
- 275. анимированная кнопка обратного звонка
- CSS/CSS3
... звонка:
демо
пример формы в модальном окне:
html код:
<div class="pulse">
</div>
иконка с сайта font awesome
для начала необходимо подключить ...
- 276. селекторы css
- CSS/CSS Основы
... запутанно, не спорю, но давайте разберёмся на примере<div><h2>заголовок в контейнере</h2></div>элемент, в данном случае - это текст "заголовок ...
- 277. полупрозрачный текст на фоне в css
- CSS/CSS3
... начнем с html разметки:
<body>
<div>
<h1>полупрозрачный текст на фоне</h1>
</div>
</body>
заголовок h1 мы поместили ...
- 278. отмена повторной отправки формы
- PHP/PHP Основы
... method="post">
<div>
<input type="text" name="x" />
<br />
<input type="submit" value="возвести в квадрат" name="sqr" />
</div>
</form> ...
- 279. аватар внутри круга на css
- CSS/CSS Основы
...
<div class="box">
<div class="circle">
<img src="img1.png">
</div>
<img src="img1.png">
</div> ...
- 280. переменные в css
- CSS/CSS Основы
... color: var(--color);
width: var(--width);
}
div {
background-color: var(--bgcolor);
color: var(--color);
...
- 281. зачем нужен псевдокласс target в css3.
- CSS/CSS3
... посмотрим сразу на пример.
к примеру, у нас есть такой html код:
<div id="id1">какой-то текст</div>
теперь мы можем сослаться на данный элемент из строки ...
- 282. css прозрачность (opacity vs rgba)
- CSS/CSS3
... существенный недостаток, текст не так хорошо выделяется.
<div>
<div class="blue">
<h1>
прозрачность ...
- 283. как получить селектор в jquery
- JavaScript/jQuery
... вложенные селекторы
выбрать все параграфы, вложенные в тег "div".
$(document).ready(function () {
$("div p").css("color", "red");
});
html-код
<div>
<p>вложенный ...
- 284. верстка макета на sass
- CSS/CSS Основы
... <section class="section service--wrapper">
<div class="container">
контент
</div>
</section>
.container{
max-width:960px; ...
- 285. примеры анимации блока и картинки в css
- CSS/CSS3
... анимация составляется для конкретного элемента, например для блока div.
<div class="square"></div>
теперь нарисуем квадрат, привяжем к нему название ...
- 286. 5 нововведений в css4.
- CSS/CSS Основы
... перечислять внутри него не один, а сразу несколько тегов:
:not(p, h1, div) // то же самое, что и :not(p):not(h1):not(div)
2. :has()
это очень интересный селектор, открывающий ...
- 287. работа с библиотекой jquery
- JavaScript/jQuery
... структуру для выборки элементов.
<header>
<div>
<h3 class="brand">привет, мир!</h3>
</div>
</header>
<main>
<p>следуйте ...
- 288. дочерние селекторы в css
- CSS/CSS Основы
... давайте приведу небольшой пример. пусть у нас есть такой html-код:
<div class="container">
<div>
<p>первый абзац</p>
</div>
<p>второй ...
- 289. анимация для меню с индикатором. часть #1
- JavaScript/JavaScript Основы
... вставим код с иконками между тегами div. а перед закрывающим тегом body вставляем две ссылки из данной библиотеки.
<div class="navigation">
<ul>
<li ...
- 290. как сделать фиксированное меню
- CSS/CSS3
... наше меню.
<div class="nav">
<a href="#home">главная</a>
<a href="#news">новости</a>
<a href="#contact">контакт</a>
</div>
создадим ...
- 291. прозрачная панель навигации в css
- CSS/CSS3
... codepen.
html-код прозрачной панели навигации
в тег nav мы поместим блок div с логотипом компании и список ul с ссылками, которые являются пунктами ...
- 292. плавный переход в css - transition на примерах
- CSS/CSS3
... css. кнопка</h2>
<div>
<a class="button" href="#">заказать работу</a>
</div>
.button {
background-color: ...
- 293. перетаскиваемый div на javascript
- JavaScript/JavaScript Основы
... делается перетаскиваемый div на javascript.
давайте не будем лить воду, а сразу рассмотрим прокомментированный код:
<div id="block" style="border: 1px solid #000; cursor: ...
- 294. обработчик и объект событий в js
- JavaScript/JavaScript Основы
... 'red';
});
узнаем координаты мыши при клике по блоку.
<div>узнать координаты</div>
<script>
let div = document.queryselector('div');
div.addeventlistener('click', ...
- 295. свойство appearance в css.
- CSS/CSS Основы
... любого элемента похожим на стандартный вид.
рассмотрим пример.
<div>это блок div</div>
теперь применим такие стили
div {
appearance: button;
}
теперь ...
- 296. эффект увеличения картинки.
- CSS/CSS Основы
... которую мы умножаем на саму себя, чтобы сгенерировать правильное число div.grid-item, которое ведет себя как контроллер, который сдвигает картинку, ...
- 297. три способа создать html элемент в javascript
- JavaScript/JavaScript Скрипты
... метода createelement().
в js файле прописываем код:
<!--
создадим html-элемент div в javascript, вызвав метод createelement() для объекта документа . ...
- 298. семантические теги
- HTML/HTML 5
... правильная верстка. правильная верстка может быть построена на тегах div и при этом быть валидной, не кривой и хорошо адаптироваться. семантические ...
- 299. виды css селекторов
- CSS/CSS Основы
... элемента мы увидим одинаково оформленный текст.
// html разметка
<div>универсальный</div>
<h3>css</h3>
<p>селектор</p>
// css стили
* {
font-size: ...
- 300. верстка сайта с нуля. верстка портфолио. часть 2
- HTML/HTML 5
... поместим блок div с заголовком, текстом и кнопкой.
вставляем код целиком в наш html документ, после тега .
<section class="mops_bg">
<div class="wrap">
<div ...
- 301. как сделать карточку товара на css
- CSS/CSS3
... браузера. сама карточка – это тег div с классом card. разумеется, что в данном примере мы могли бы и не присваивать класс тегу div, ведь он у нас один на странице. ...
- 302. исключения в python: понятное руководство по try/except/else/finally с примерами
- Python/Основы Python
... число')
можно группировать несколько типов:
try:
result = 10 / int('0')
except (zerodivisionerror, valueerror) as e:
print('ошибка вычислений:', e)
блоки else и finally
else выполняется, ...
- 303. адаптивное мобильное меню для сайта (часть 2)
- JavaScript/JavaScript Основы
... линий кнопки под блоком с навигационным меню.
<div id="menu-toggle" class="menu-icon">
<div class="menu-icon-line"></div>
</div>
кнопка гамбургер ...
- 304. стилизация select на css
- CSS/CSS3
... тег select поместим внутри тега div с классом select. создадим две опции, между которыми и должен происходить выбор.
<div class="select">
<select> ...
- 305. анимированное круговое меню на javascript
- JavaScript/JavaScript Основы
... названиями нужных иконок и две ссылки на саму библиотеку.
<div class="menu">
<div class="toggle"><ion-icon name="add-outline"></ion-icon></div>
<li ...
... вашей странице
<link rel="stylesheet" href="animate.css">
создайте блок с class=box
<div class="box"></div>
зададим ему какие-нибудь базовые стили
.box {
background: cornflowerblue; ...
- 307. отправка ajax-запроса на другой домен
- JavaScript/JavaScript Основы
... }
};
}
</script>
<div>
<input type="button" value="отправить" onclick="send()" />
<div id="yandex"></div>
</div>
а теперь файл test.php, ...
- 308. адаптивная форма обратной связи
- CSS/CSS3
... ввода имени и е-майла пользователя и кнопка отправить.
<div class="wrapper">
<div id="newsletter">
<h2>подпишитесь на наши новости</h2> ...
- 309. пример анимации движения в js
- JavaScript/JavaScript Основы
... нужные html и css заготовки - создадим в разметке кнопку и блок.
<div class="btn">запускай!</div>
<div class="box"></div>
оформим красиво внешний вид элементов. ...
- 310. выноски в стиле комиксов
- CSS/CSS Основы
... классы (thought и speech).
<div class="bubble thought">выноска в стиле комиксов для иллюстрации мыслей персонажа, напоминающая «пузырёк».</div>
<div class="bubble speech">выноска ...
- 311. анимация - увеличение числа на js
- JavaScript/JavaScript Основы
... создадим в html файле блок, где будет выводится данное число.
<div id="out" class="out-num">0</div>
2) создадим две переменные:
time - общее время отработки ...
- 312. анимация при скролле
- JavaScript/JavaScript Скрипты
... атрибут data-aos со значением - название выбранной анимации.
<div data-aos="fade-in"></div>
полный список названий анимаций, есть на github.
как добавлять ...
- 313. создаем новостной блог с python и django
- Python/Основы Python
... <div class="jumbotron" style="color:black">
<h1 style ="color:white">
get the latest news on our website
</h1>
</div> ...
- 314. отзывчивый "липкий" подвал сайта.
- CSS/CSS Основы
... <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
this is the content
</div>
<footer>
<div class="wrapper">
...
- 315. чем отличается box-shadow от drop-shadow?
- CSS/CSS Основы
... одного элемента.
текст с тенью
<div class="container">
<h2 class="text1">box shadow</h2>
</div>
.container{
position: relative;
width: ...
- 316. скошенный блок при помощью clip-path
- CSS/CSS Основы
... class="header">
<div class="brand">
<img src="logo.svg" alt="logo" style="height: 32px;">
</div>
<div class="text"> ...
- 317. создание движка на mvc. продолжаем работу над чатом.
- PHP/PHP Основы
... {
for(var i = 0; i < o.length; i++) {
$('#listinserts').append('<div>' + o[i].text + '</div>');
}
}, 'json');
теперь в index.php нашей dashboard пропишем ...
- 318. логирование в 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__": ...
- 319. простой footer у веб-сайта
- CSS/CSS Основы
... пункты меню навигации.
<footer>
<div class="waves">
<div class="wave" id="wave1"></div>
</div>
<ul ...
... баннера пустой блок. во втором блоке расположиться контент.
<div class="banner"></div>
<div class="content">здесь будет контент</div>
css код
растянем ...
- 321. выезжающее боковое меню. часть 1.
- CSS/CSS3
... бургер-иконку, копируем код и вставляем между тегами span,.
<div class="wrapper">
<div class="menu">
<a href="#" class="menu-icon">
<span><i ...
- 322. создание и применение шорткодов в wordpress
- Софт/Софт для создания сайтов
... function funcetsy(){ /* функция funcetsy без параметров */
return '<a href="#"><div class="etsy"></a></div>'; /* возвращает блок с классом etsy */
}
итого код целиком ...
- 323. адаптивное меню для сайта. часть 1
- CSS/CSS3
... понятная, внутри тега section будет находится шапка сайта header, внутри которой блок div с логотипом и навигационная панель nav. она будет использоваться, как ...
- 324. динамическая подгрузка данных для select
- JavaScript/JavaScript Основы
... }
};
}
</script>
<form name="myform" action="#" method="post">
<div>
<select name="countries" onchange="changecountry(this.value)">
...
- 325. градиентная тень у блока на css
- CSS/CSS Основы
... контейнер body и установим нужный свойства.
//html код
<div class="card">
<h2>gradient</h2>
</div>
<div class="card">
<h2>shadow</h2> ...
... icon, вставим, ссылку на svg иконку, посредством тега object.
<div class="box">
<div class="icon">
<object type="image/svg+xml" data="sedan-car-front.svg" ...
- 327. вертикальный текст на css
- CSS/CSS Основы
... и подходит для любого варианта.
<section>
<div class="container">
<div class="box">
<h2>css</h2>
<h3>vertical</h3> ...
- 328. введение в строковые шаблоны в javascript es6
- JavaScript/JavaScript Основы
... `<article>
<header>
<h1>${title}</h1>
</header>
<section>
<div>${intro}</div>
<div>${body}</div>
</section>
<footer>
<ul>
${tags.map(tag ...
- 329. круговой индикатор выполнения с использованием только html и css
- CSS/CSS Основы
... страницы и вставить после тега body следующую разметку:
<div class="circle-wrap">
<div class="circle">
</div>
</div>
стили css ...
- 330. события drag-and-drop в js
- JavaScript/JavaScript Основы
... потянуть за него, то создастся полупрозрачная копия.
// html
<div class="elem" draggable="true">тяни</div>
<div class="area">бросай</div>
// css
.elem {
width: ...
- 331. анимация на jquery
- JavaScript/jQuery
... в jquery, служащих для стандартной анимации:
<div id="block" style="background-color: #ccc; height: 200px; width: 200px;">блок</div>
<span id="fade_out">скрыть блок (через изменение ...
- 332. обработка событий на jquery
- JavaScript/jQuery
... обрабатывать следующим образом:
<span id="add">добавить в блок span</span>
<div id="block"></div>
<script type="text/javascript">
$("span#add").bind("click", function() {
$("#block").append("<span>добавленный ...
- 333. плавная кнопка "наверх" на jquery
- JavaScript/jQuery
... узнаете из этой статьи.
для начала разберёмся с html-кодом:
<div id="content">контент</div>
<div id="top">наверх</div>
перейдём к стилям:
#content {
...
- 334. 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: ...
- 335. как сделать красивые уведомления на jquery.
- JavaScript/jQuery
... функцию очереди, установите значение true
template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
animation: {
...
- 336. как изменить шапку сайта (часть 1)
- CSS/CSS3
... с классом top-header, поместим три флекс-элемента – абзацы с текстом.
<div class="top-header">
<p>массажный салон для вашего здоровья и красоты</p> ...
- 337. как добавить новость на сайт c помощью php. часть 2
- PHP/PHP Основы
... <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="container py-4">
<nav aria-label="breadcrumb"> ...
- 338. получение координат курсора мыши на js
- JavaScript/JavaScript Основы
... выводится значения текущих координат курсора.
<div class="block">
move the mouse
</div>
<div class="coords">
x: <span class="x"></span><br> ...
- 339. таймер обратного отсчета в 18 строк кода javascript.
- JavaScript/JavaScript Основы
... наш таймер. во-первых, создайте следующую html структуру для часов:
<div id="clockdiv"></div>
затем напишите функцию, которая будет отображать данные ...
- 340. атрибуты 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>
теперь, кликнув ...
- 341. выгрузка товаров на сайт (jquery + json)
- JavaScript/jQuery
... выводится наши товары, как в обычном интернет-магазине.
<div id="items">
// здесь будут товары
</div>
js код
писать наш код мы будем в javascript файле, ...
- 342. как сделать прогресс бар на чистом 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> ...
- 343. drag and drop загрузка файлов на сервер. часть 3.
- JavaScript/JavaScript Основы
... <body>
<p>загруженные файлы:</p>
<div id="uploads">
<ul>
</ul>
</div>
<div class="dropzone" id="dropzone">перетащите файлы ...
- 344. создание каркаса react приложения
- JavaScript/JavaScript Основы
... <!-- контейнер, в котором будет размещено react приложение -->
<div id="app"></div>
</body>
</html>
, а также файл index.js:
import react from 'react'; ...
- 345. скрытый текст на 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 ...
- 346. защита страницы с помощью модального окна и пароля в javascript
- JavaScript/JavaScript Скрипты
... cursor: pointer;
}
</style>
</head>
<body>
<div id="mymodal" class="modal">
<div class="modal-content">
<form id="passwordform"> ...
- 347. как прижать футер к низу
- CSS/CSS Основы
... сайтов.
допустим, есть такой html-код:
<body>
<div id="main">
<p>текст</p>
</div>
<div id="footer">
<p>подвал</p> ...
- 348. радио кнопки в виде слайдера.
- JavaScript/jQuery
... $(document).ready(function() {
$("#radios").radiostoslider();
});
</script>
<div id="radios">
<input id="option1" name="options" type="radio">
<label for="option1">1<br>выбор</label> ...
- 349. использование семантических тегов в html5
- HTML/HTML 5
... семантических тегов. однако многие разработчики по-прежнему используют div для всего подряд, не осознавая преимущества новых тегов section и article. в ...
- 350. рисуем иконку пользователя на css
- CSS/CSS Основы
... блок с классом user отвечает за разметку самой иконки.
<div class="wrapper">
<div class="user"></div>
</div>
css стили
стандартный набор ...
- 351. css анимация секции с эффектом волны
- CSS/CSS Основы
... внутри (теги span) и контентную часть с заголовком.
<section>
<div class="wave">
<span></span>
<span></span> ...
- 352. css flexbox для начинающих: практическое руководство с примерами
- CSS/CSS Основы
... class="header">
<a class="logo">brand</a>
<nav>...</nav>
<div class="header__spacer"></div>
<button>войти</button>
</header>
3) ряд карточек, который ...
- 353. плагин для табов для frontend разработчика
- JavaScript/jQuery
... дефолтного, но тогда не забудьте изменить это название и в jquery коде.
<div id="tab-container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a ...
- 354. иконки для меню сайдбара
- CSS/CSS3
... (сайдбар) с пунктами меню и иконками (тег i), находящиеся внутри ссылок.
<div class="sidebar">
<a href="#"><i class="fas fa-fw fa-home"></i> главная</a>
...
- 355. css эффект пикселизации изображения
- CSS/CSS Основы
... и сохраним под новым именем female_pixel.jpg.
<div class="box">
<img src="female.jpg">
</div>
<div class="box pixel">
<img src="female_pixel.jpg"> ...
- 356. разница между innerhtml и textcontent
- JavaScript/JavaScript Основы
... его вместе с тегами форматирования в html-страницу.
// html разметка
<div class="container">
<p class="text-example">как изменять существующие ...
- 357. дизайн и верстка страницы contact us. часть #3
- HTML/HTML Основы
... background:#0e3959;/*цвет фона*/
}
.info h3 {
color: #fff;/*цвет подзаголовка*/
}
.infobox div{
display: flex;/*flexbox сетка*/
align-items: center;/*вертикальное ...
- 358. шаблонные строки в js (интерполяция)
- JavaScript/JavaScript Основы
... <h1>${title}</h1>
</header>
<section>
<div>${desc}</div>
<div>${body}</div>
</section>
</article>` ...
- 359. bootstrap 4. контейнеры и ключевые точки.
- CSS/CSS Основы
... статьях, и пропишем там следующий код:
<div class="container" style="background: skyblue">
<h1>фиксированный контейнер</h1>
</div>
<div class="container-fluid" style="background: ...
- 360. пример верстки блог-секции на css grid #5
- CSS/CSS Основы
... class="section-blog">
<!-- контейнер -->
<div class="container">
<!-- обертка для блоков -->
<div class="blog-wrap grid">
<!-- первый ...
- 361. как прижать футер к низу страницы
- CSS/CSS Основы
... контейнер container
шапка header
контент в центральной части main
подвал footer
<div class="container">
<header class="header">header</header>
<main class="content"> ...
- 362. выпадающее изображение из ссылки на javascript
- JavaScript/JavaScript Скрипты
... <div id="float_1" style="display: none; position: absolute;">
<img src="foto5.jpg" alt="фото 1" />
</div>
</td> ...
- 363. комментарии в виде пузырька.
- 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 ...
- 364. плавающая кнопка на reactjs
- JavaScript/JavaScript Основы
... <link rel="stylesheet" href="floatingbutton.css">
</head>
<body>
<div id="root">руддщ</div>
<script type="text/babel">
/** ...
- 365. отображение маршрута между двумя точками на карте
- JavaScript/JavaScript Основы
... <h1>фильтр объектов на карте</h1>
<div class="controls">
<input type="text" id="search" placeholder="введите название..."> ...
- 366. как сделать интерактивное сравнение двух фотографий на jquery.
- JavaScript/jQuery
... создадим контейнер с двумя фотографиями
<div id="container1">
<img src="sample-before.png">
<img src="sample-after.png">
</div>
когда картинки будут загружены, ...
- 367. сортируемая таблица на 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>
...
- 368. функция requestanimationframe
- JavaScript/JavaScript Основы
... // html разметка
<button class="btn">запуск анимации</button>
<div class="wrapper">
<div class="box"></div>
</div>
найдем оба элемента по селектору ...
- 369. простая пагинация на python и flask
- Python/Основы Python
... </head>
<body>
<div class="container">
<h1>list of 200 items</h1> ...
- 370. рисуем сердечко на css
- CSS/CSS Основы
... с классом wrapper для выравнивания сердечка по центру.
<div class="wrapper">
<div class="heart"></div>
</div>
заготовка для сердечка
...
- 371. цифровая лупа на 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)" ...
- 372. drag and drop загрузка файлов на сервер. часть 1.
- JavaScript/JavaScript Основы
... <body>
<p>загруженные файлы:</p>
<div id="uploads">
<ul>
</ul>
</div>
<div class="dropzone" id="dropzone">перетащите файлы ...
- 373. проверка на заглавные буквы с javascript
- JavaScript/JavaScript Основы
... capslock.
html разметка
для примера создадим простенькую html разметку.
<div class="wrap">
<label for="input">пароль:</label>
<input ...
- 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. эффект рваной бумаги вокруг картинки
- CSS/CSS Основы
... разметке, значит оно будет на нижнем слое.
<section>
<div class="bg"></div>
...
</section>
*{
margin: 0;/*обнуление ...
- 376. анимация набора текста на css
- CSS/CSS3
... классом wrapper и из блока самого текста с классом text.
<div class="wrapper">
<div class="text">анимация набора текста на css</div>
</div>
...
- 377. всплывающее окно popup на jquery (часть 1)
- JavaScript/jQuery
... уровня, параграф с текстом и форма с одним полем ввода и кнопкой.
<div id="popup">
<div class="popup-box">
<span class="popup-close">×</span>
<h2>подписывайтесь ...
- 378. навигационное меню с иконками + hover эффект
- CSS/CSS Основы
... <li>
<a href="#">
<div class="icon">
<i class="fa fa-home" aria-hidden="true"></i> ...
- 379. как сделать блок с отзывами на html
- CSS/CSS3
... поскольку для них хотим задать больший размер шрифта, чем остальной текст.
<div class="container">
<img src="avatar-female.png" alt="avatar">
<p><span>марина ...
- 380. что такое состояние в react и как им управлять
- JavaScript/JavaScript Основы
... }
</style>
</head>
<body>
<div id="root"></div>
<!-- load react. -->
<!-- note: when deploying, replace "development.js" with "production.min.js". --> ...
- 381. как вставить видео на 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> ...
- 382. адаптивное меню на css flexbox
- CSS/CSS3
... <header class="header">
<div class="logo">
<a href="#"><img src="img/logo.png" alt=""></a>
</div>
<nav class="menu">
<ul> ...
- 383. как сделать всплывающее окно с затемнением
- 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> ...
- 384. пример использования 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> ...
- 385. переключатель для бокового меню
- JavaScript/JavaScript Основы
... области переключателя запустится функция togglemenu().
<div class="toggle" onclick="togglemenu();"></div>
оформление и позиционирование переключателя ...
- 386. имитация праздничной ленты на карточке
- CSS/CSS Основы
... обойтись без графики и все сделать на чистом css.
создание карточки
в теге div мы создадим карточку. обычно тег i используется для выделения части ...
- 387. замок по шаблону на javascript.
- JavaScript/jQuery
... src="patternlock.js"></script>
создайте блок div с id=patterncontainer и затем ниже проинициализируйте плагин, как показано на сайте
<div id="patterncontainer"></div>
<script> ...
- 388. как добавить фильтры к фотографиям на css.
- CSS/CSS Основы
... добавить фильтр, используйте следующую структуру:
<div class="cssco cssco--c1">
<img src="image.png"/>
</div>
в классе у div блока укажите нужный вам фильтр. ...
- 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. ajax запросы с помощью методов $.post() и $.get().
- JavaScript/jQuery
... <input type="text" id="b">
<button id="submit">отправить!</button>
<div id="block"></div>
</body>
</html>
теперь напишем наш скрипт
$(document).ready(function(){ ...
- 391. эффект бегущей волны на чистом css
- CSS/CSS Основы
... заданных рамок. создадим блок div с классом wavy, разместим его в центре страницы и временно окрасим бокс в белый цвет.
<div class="wavy"></div>
*{
margin: ...
- 392. как сделать выезжающее меню на jquery.
- JavaScript/jQuery
... понятнее, посмотрите демки.
для чего использовать?
например, у вас есть div, который вы хотите анимировать выезжающим эффектом с области за пределами ...
- 393. отправка асинхронных запросов на jquery.
- JavaScript/jQuery
... <input type="text" id="b">
<button id="submit">отправить!</button>
<div id="block"></div>
</body>
</html>
html до безобразия прост: 2 текcтовых поля, блок, ...
- 394. атрибут data-* в html5.
- HTML/HTML 5
... данный атрибут можно использовать, чтобы стилизовать элементы.
<div data-name="myname"></div>
<style>
div[data-name=myname] {
width: 100px;
height: 100px;
...
- 395. плавные переходы в css3.
- CSS/CSS3
... практике. для этого анимируем div.
html разметка
<html>
<head>
<title>transition</title>
<meta charset="utf-8">
</head>
<body>
<div class="block">кнопка клац!</div> ...
- 396. как сделать поля с плавающими метками на javascript.
- JavaScript/JavaScript Скрипты
... выставьте нужные классы.
<div class="floatl">
<label class="floatl__label">first name</label>
<input class="floatl__input" placeholder="first name" type="text"></div>
</div>
создайте ...
- 397. share buttons. красивые кнопки соц. сетей.
- JavaScript/JavaScript Скрипты
... margin: 100px auto;
}
</style>
</head>
<body>
<div class="share"></div>
<script>
new share(".share", {
networks: {
...
- 398. js библиотека для построения графиков
- JavaScript/JavaScript Основы
...
html код
создайте div с идентификатором myfirstchart, внутри которого построится svg график и укажите нужную высоту.
<div id="myfirstchart" style="height: 250px;"></div> ...
- 399. плагин для создания архива на jquery.
- JavaScript/jQuery
... src="tinytools.periodselector.min.js"></script>
создайте элемент div с каким-нибудь id или классом. например, пусть будет #archive
<div id="archive"></div>
чтобы запустить наш скрипт, ...
- 400. создание форм в html
- HTML/HTML Основы
... html.сначала создайте простейшую html-страницу, в которую добавьте контейнер (тег <div>), выравнивающий своё содержимое по центру. надеюсь, что вы с этим без ...
- 401. как сделать экскурсию по сайту на jquery.
- JavaScript/jQuery
... тур по любому элементу на странице. давайте, к примеру, создадим div с id=block
<div id="block">какой-то текст. неважно какой. тут может быть все, что угодно</div> ...
- 402. создание приложения на react
- JavaScript/JavaScript Основы
... приложение на react
1) создадим блок, в котором будет работать react
<div id="content"></div>
2) укажем, что результат работы будет выводиться в ранее ...
- 403. новые функции в php 5.5.
- PHP/PHP Основы
... нет. посмотрим на примере.
function div($n) {
if(!$n) {
throw new exception("деление на ноль");
}
return 1/$n;
}
try {
div(3);
div(0);
} catch($e) {
echo "ошибка: ...
- 404. изменение внешнего вида курсора при наведении
- JavaScript/JavaScript Основы
... создадим меню, используя теги списков. для кастомного курсора создадим div с классом cursor.
<ul>
<li><a href="#">home</a></li>
<li><a ...
- 405. преобразование excel-файла в php класс
- PHP/PHP Скрипты
... public $fundsofclientsnoncreditorganizations;
public $depositsofindividuals;
public $debtobligationsissued;
public $iterestpaymentoobligations; ...
- 406. эффект серого оттенка на css.
- CSS/CSS3
... href="style.css">
</head>
<body>
<div class="profile">
<img src="images/profile.png" alt="эффект серого оттенка">
</div>
</body>
</html>
css
.profile img { ...
- 407. меню для мобильной версии сайта
- CSS/CSS3
... ссылок навигационного меню navlinks, а так же иконка гамбургер.
<div class="mobile-wrap">
<div class="nav-wrap">
<a href="#home" class="active">логотип</a>
<nav ...
- 408. выбор из выпадающего списка в html
- HTML/HTML 5
... общий контейнер div. тег form должен присутствовать обязательно, если данные впоследствии будут отправляться на сервер.
<body>
<div class="box">
<form> ...
- 409. создание pixelart на html и js
- JavaScript/JavaScript Скрипты
... display: inline-block;
}
</style>
</head>
<body>
<div id="canvas"></div>
<button onclick="savepixelart()">сохранить</button> ...
- 410. переключение меню гамбургер, используя js
- CSS/CSS Основы
... весь html код состоит из одного div с идентификатором toggle. разместим toggle в центре экрана и зададим ему цвет.
<div id="toggle"></div>
*{
margin: ...
- 411. как использовать jquery ui slider
- JavaScript/jQuery
... <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
давайте изменим стили в этой строке и посмотрим на результат. ...
- 412. как менять картинку при наведении курсора мыши
- CSS/CSS Основы
... появлялась красная рамка вокруг картинки.
html-код очень простой:
<div class="img"></div>
теперь css-код:
.img {
background: url("image_1.jpg") no-repeat; // подставляем ...
- 413. анимация при загрузке страницы.
- JavaScript/jQuery
... скачать с помощью bower или кнопок на сайте библиотеку.
создайте div на странице
<div id="fakeloader"></div>
подключите стили
<link rel="stylesheet" href="yourpath/fakeloader.css"> ...
- 414. jquery события мыши
- JavaScript/jQuery
... mouseout.
$(function () {
$("div").hover(onin, onout);
});
// функция которая отработает при наведении курсора на элемент
function onin() {
$("div").html("навести");
}
...
- 415. как сделать кнопку "наверх"
- HTML/HTML Основы
... идентификаторов.
давайте сразу приведу код, и вы всё поймёте:
<div id="top"></div>
<!-- много контента -->
<a href="#top">наверх</a>
соответственно, ...
- 416. создаем простой чат с использованием swoole php и javascript
- PHP/PHP Основы
... }
</style>
</head>
<body>
<div id="chat"></div>
<input type="text" id="message" placeholder="type a message..."> ...
- 417. как использовать секционные элементы в html5.
- HTML/HTML 5
... main.
пример использование тега main ниже.
<body>
<header>
<div id="logo">rocking stone</div>
<nav>...</nav>
</header>
<main role="main">
<h1>guitars</h1> ...
- 418. создание прелоадера для сайта на css
- CSS/CSS3
... простенький html-код, состоящий из одного пустого тега div с классом loader, не считая конечно тега body.
<div class="loader"></div>
в файле стилей пропишем весь ...
- 419. ассоциативный массив в js
- JavaScript/JavaScript Основы
... разметку в html-документе, куда и будет выводиться данный массив.
<div id="box_out"></div>
код вывода вместе с циклом в js
// получили элемент c id="box_out" ...
- 420. как вывести записи в wordpress
- Софт/Софт для создания сайтов
... y'); ?<</small<
давайте выведем саму статью - контент, внутри тега div:
<div class="entry">
<?php the_content(); ?>
</div>
внимание! ничего не вывелось. ...
- 421. как сделать анимацию загрузки на чистом css3.
- CSS/CSS3
... css3 очень легко! давайте разберемся, как.
для начала создадим блок div в html
<div class="spinner"></div>
теперь перейдем к стилям
@keyframes spin {
100% {
...
- 422. обработка ошибок и исключений в python. часть 1
- Python/Основы Python
... следующий код вызовет исключение.
print(1/0)
# вывод
# zerodivisionerror: division by zero
так как невозможно разделить 1 на 0, то программа ...
... exit;
<?php
// profile.php
session_start();
if ($msg = flash('success')) {
echo '<div class="alert alert-success">' . htmlspecialchars($msg) . '</div>';
}
мини-пример: корзина на сессиях
<?php
session_start(); ...
- 424. css эффект при наведении на ссылку
- CSS/CSS3
... необходимые отступы, оборачиваем меню навигации в div с классом container. вот и все, html разметка создана.
<div class="container">
<nav class="link-up">
<a ...
- 425. анимация svg вектора на примере
- JavaScript/jQuery
... на сайте, в нужном месте в файле index.html вставляем div с id demo, где будет происходить анимация.
<div id="demo"></div>
css свойства вы задаете подходящие ...
- 426. как изменить курсор мыши на javascript
- JavaScript/JavaScript Основы
... создается внешний вид курсора, затем скрывается дефолтный курсор и созданный div следует за скрытым курсором по всей странице. иными словами новый курсор ...
- 427. градиент поверх фоновой картинки в css
- CSS/CSS3
... контейнером для фоновой картинки, а тег div с классом header_box – контейнером для двух заголовков.
<header>
<div class="header_box">
<h1>the ...
- 428. как добавить социальные кнопки на wordpress
- Софт/Софт для создания сайтов
... wp_enqueue_script('ya-share2', 'https://yastatic.net/share2/share.js' );
}
вторая часть кода – это блок div с классом 'ya-share2' и выбранные вами соцсети. его, то вы и будете вставлять ...
- 429. css-эффект при наведении курсора на элемент списка
- CSS/CSS Основы
... разметка состоит из элементов маркированного списка, внутри блока div.
<div class="list">
<h2>list item hover effect</h2>
<ul> ...
- 430. верстка формы входа (часть 3)
- CSS/CSS3
... разметку для кнопки, обернем тег input в блок с классом form__button. зачем нужен блок div? тег input является строчным элементом, поэтому он проигнорирует свойство, ...
- 431. pug – это не мопс, тогда кто?
- JavaScript/JavaScript Основы
... обычном html и с pug.
html
<div>
<h1>pug</h1>
<p>html</p>
<p>шаблонизатор</p>
</div>
pug
div
h1 ...
- 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 Основы
... href="#"><i class="fa fa-globe" aria-hidden="true"></i></a></li>
<div class="cursor"></div>
</ul>
стилизация иконок
*{
margin: ...
- 434. иконки 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 ...
- 435. анимированный мяч на css
- CSS/CSS3
... именем index.html. внутри блока head добавляем тег style. в блоке body
добавим блок div с классом .ball. далее добавим стилей к блоку body. и сделаем наш мяч
видимым, ...
- 436. эффект расширяющегося облака на css
- CSS/CSS3
... <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cloud"></div> <!-- этот div представляет изображение облака --> ...
- 437. загрузка изображений c python и selenium
- Python/Основы Python
... img = browser.find_element(by.xpath,
'//*[@id="islrg"]/div[1]/div[' +
str(i) + ']/a[1]/div[1]/img') ...
- 438. изучаем sass. основы.
- CSS/CSS Основы
... добавить его в файле app.scss
@import 'framework/layout';
и создайте div с классом wrapper в файле index.html
<div class="wrapper">content</div>
ну, что же, на этом все. увидимся ...
- 439. как создать to do list на чистом css (часть 1)
- CSS/CSS Основы
... метки с полем типа checkbox, наименования пункта списка и пустой тег span.
<div class="list">
<h2>to do list</h2>
<ul>
<li>
<label> ...
- 440. функция calc() в css3.
- CSS/CSS3
... умножение
/ - деление
рассмотрим конкретный пример
<div class="alert">this is an alert! be accurate!</div>
теперь добавим немного стилей
.alert {
width: 100%;
...
- 441. валидация email в форме с помощью js
- JavaScript/JavaScript Основы
... прохождении валидации - зеленым.
<form id="form" action="#">
<div class="inputbox">
<input type="text" id="email" placeholder="enter email ...
- 442. верстаем админку на css grid
- HTML/HTML Основы
... <body>
<!-- главный контейнер -->
<div class="container">
<!-- заголовок -->
<header class="dashboard-header"> ...
- 443. уменьшение фоновой картинки при скролле страницы
- JavaScript/JavaScript Основы
... дальнейшем поместим фоновую картинку и секцию с длинным текстом.
<div id="header"></div>
<section>
<h2>background size change into small when scrolling</h2> ...
- 444. эффект появления рамки при наведении
- CSS/CSS Основы
... button и родительского контейнера.
<div class="container">
<button type="button">отправить</button>
</div>
предвосхищая вопрос новичков ...
- 445. индикатор загрузки на javascript.
- JavaScript/JavaScript Скрипты
... indicator</title>
<script src="spin.min.js"></script>
</head>
<body>
<div id="loading"></div>
<script>
var opts = {
lines: 13, // число линий для ...
- 446. как вывести на страницу текущую дату на js
- JavaScript/JavaScript Основы
... которых будет выводиться текущая дата (число, день недели, месяц и год).
<div class="calendar">
<p id="monthname"></p>
<p id="dayname"></p> ...
- 447. создаем эффект неонового текста с css
- CSS/CSS Основы
... <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="neontext">
welcom! ...
- 448. css grid. практические примеры #5
- CSS/CSS Основы
...
десктопная версия:
мобильная версия:
html разметка:
<div class="container">
<header>шапка</header>
<article> ...
- 449. как сделать онлайн-трансляцию вашей веб-камеры на чистом 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> ...
- 450. как задавать градиенты в css3.
- CSS/CSS3
... создадим блок, на примере которого будем рассматривать примеры.
<div class="container"></div>
css
.container {
width: 400px;
height: 300px;
float: left;
margin: 40px; ...
- 451. заглушка для изображений на сайте
- HTML/HTML Основы
... приложение работает как надо.
пример создания галереи
//html
<div class="gallery">
<a href="#"><img src="https://via.placeholder.com/200x150" alt=""></a> ...
- 452. поиск dom элемента с помощью getelementbyid
- JavaScript/JavaScript Основы
... (дословно: получить элемент по идентификатору).
// html код
<div class="container">
<h1 id="heading">урок по javascript #1</h1>
<p ...
- 453. отображение html формы в django
- Python/Основы Python
... <h1>posts</h1>
</header>
<div class="container">
{% block content %}
# здесь окажется код с дочерних файлов ...
- 454. как сделать многоуровневое меню-аккордион на css3.
- CSS/CSS3
... элемента мы можем использовать псевдо-класс :checked и смежный селектор(div + div), чтобы изменить свойство display для ul с none на block.
шаг за шагом: прежде ...
- 455. анимированный блик у кнопки на чистом css
- CSS/CSS Основы
... кода (кнопка + ссылка) в html разметке.
<div class="container">
<a href="#" class="button">button</a>
</div>
по умолчанию кнопка прижата к левому ...
- 456. поиск нескольких элементов по названию класса
- JavaScript/JavaScript Основы
... безопаснее работать с уникальными классами, чем с тегами.
// html код
<div class="container">
<h1 id="heading">комплексы для дома</h1>
<p ...
- 457. градиент для текста на css
- CSS/CSS3
... технологию flexbox.
// html код
<div class="container">
<h1 class="title">
gradient
</h1>
</div>
// css код
.container {
...
- 458. имитация пара над чашкой с горячим чаем
- CSS/CSS Основы
... animation-delay: calc(var(--i) * -0.5s) вместо переменной i, подставятся её значения.
<div class="vapour">
<span style="--i:1;"></span>
<span style="--i:7;"></span> ...
- 459. изменение значений атрибутов у картинок и ссылок
- JavaScript/JavaScript Основы
... одну картинку на другую и ссылку, используя знания о dom и javascript?
<div class="container">
<h1 id="heading">польза фруктов</h1>
<p ...
- 460. анимация подчеркивания ссылок на css
- CSS/CSS Основы
... разными классами и поместим их в родительский контейнер links.
// html
<div class="links">
<p class="left">
<a href="#">подчеркивание ...
- 461. изменение стилей через javascript
- JavaScript/JavaScript Основы
... заголовка отвечают css стили.
//html код
<div class="container">
<h1 id="heading">польза ананасов</h1>
</div>
//css код
.container {
width: ...
- 462. сборка react проекта с помошью parcel
- JavaScript/JavaScript Основы
... <title>онлайн магазин</title>
</head>
<body>
<div id="app"></div>
<script src="./main.js"></script>
</body>
</html>
...
- 463. свойство css3 - box-sizing.
- CSS/CSS3
... высоты блоков. к примеру, у нас есть блок с шириной и высотой 70px.
<div class="block"></div>
.block {
width: 70px;
height: 70px;
}
теперь давайте добавим к ...
- 464. изменение css классов через javascript
- JavaScript/JavaScript Основы
... этом параграфе цвет, толщину и шрифт у текста.
//html разметка
<div class="container">
<h1 id="header">мудрая цитата</h1>
<p ...
- 465. dog ear effect, или эффект загнутого уголка на css.
- CSS/CSS Основы
... rel="stylesheet" href="style.css">
</head>
<body>
<div class="box dog-ear">здесь какой-то длинный текст в нашем блоке...</div>
</body>
</html>
html структура написана. ...
- 466. как сделать эффект вдавленного текста на css3.
- CSS/CSS3
... <title>вдавленный текст</title>
</head>
<body>
<div class="wrapper">
<p>вдавленный текст</p>
</div>
</body>
</html>
но и css код не сложнее ...
- 467. счетчик символов в реальном времени на js
- JavaScript/JavaScript Основы
... записаны инструкции для браузера, что конкретно нужно делать.
<div class="container">
<h3>счетчик символов</h3>
<textarea ...
- 468. как сделать фотографию с вашей веб-камеры на 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 ...
- 469. nodejs. как создать "список дел". часть 3.
- JavaScript/JavaScript Основы
... href="/assets/styles.css">
</head>
<body>
<h1>список дел</h1>
<div id="todo-table">
<form>
<input type="text" name="item" placeholder="добавьте ...
- 470. как сделать счетчик обратного отсчета на jquery.
- JavaScript/jQuery
... href="css/jquery.classycountdown.min.css" />
создайте блок там, где вы хотите вывести счетчик.
<div class="countdown"></div>
и запустите плагин
$('.countdown').classycountdown({
theme: "flat-colors", ...
- 471. как сделать привлекательный чеклист с перелистыванием свайпами.
- JavaScript/JavaScript Скрипты
... модуля.
angular.module('myapp', ['swipeli']);
директива
создайте директиву
<div
swipe-li
class="item"
disabled=""
intent="true"
accept="done(item)"
reject="skip(item)" ...
- 472. как сделать слияние полей у формы поиска
- CSS/CSS Основы
... полей input и тега select.
вот что должно получиться в итоге:
html код
<div class="box">
<h2>input search form</h2>
<form>
<input ...
- 473. как обернуть элемент в макет браузера или устройства.
- JavaScript/jQuery
... javascript код должны выглядеть так:
<div class="selector">
<!-- какое-то содержание(блоки, картинки, фреймы...) -->
</div>
$('.selector').devicemock({
type ...
- 474. как сделать 3d модель объекта на javascript.
- JavaScript/JavaScript Основы
... файл или внизу html страницы. далее, создайте структуру следующего вида:
<div id="myturntable" class="turntable">
<ul>
<li data-img-src="images/mypic1.jpg"></li> ...
- 475. как создать "выскальзывающее" меню на 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 ...
- 476. как динамически получать комментарии из базы данных.
- JavaScript/JavaScript Основы
... document.getelementsbytagname('body')[0];
var elem = document.createelement('div');
elem.classname = 'comments';
...
- 477. новинки в php7. часть 5.
- PHP/PHP Основы
... разработчики языка php придумали функцию intdiv().
давайте рассмотрим, как теперь это будет выглядеть:
intdiv(10, 3) = 3
вот и все! казалось бы, мелочь, а ...
- 478. анимированный 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"); ...
- 479. 10 полезных sass миксинов.
- CSS/CSS Основы
... смотрите ниже пример использованя миксина без каких-либо аргументов.
div::after {
@include pseudo;
top: -1rem; left: -1rem;
width: 1rem; height: 1rem;
}
отзывчивое ...
- 480. визуализация данных и рисование на javascript.
- JavaScript/JavaScript Основы
... </head>
2) создайте контейнер для диаграммы:
<body>
<div id="container" style="width: 500px; height: 400px;"></div>
</body>
3) создайте диаграмму. поместите тег <script> ...
- 481. делаем красивые графики на javascript с помощью chartist.js.
- JavaScript/JavaScript Скрипты
... необходимые скрипты и стили, подключите их.
сделайте разметку
<div class="ct-chart ct-perfect-fourth"></div>
создайте объект с настройками, проведите линию с этими ...
- 482. ошибки новичков при верстке сайтов #3
- CSS/CSS Основы
... легко можно допустить ошибку и даже ее не заметить.
// html
<div class="box-icon ">..</div>
<h1>документация</h1>
// css
.box-icon {
padding: ...
- 483. рамки вокруг элементов в css3
- CSS/CSS3
... классом element черную сплошную рамку толщиной 5 пикселей.
// html
<div class="element"></div>
// css
.element {
width: 150px;
height: 150px;
background-color: ...
- 484. как анимировать элементы при прокрутке страницы.
- JavaScript/JavaScript Основы
... добавьте data-scroll атрибут в html-элемент, который вы хотите анимировать.
<div data-scroll></div>
когда вы прокручиваете страницу и элемент становится видимым ...
- 485. события на мобильных устройствах
- JavaScript/JavaScript Основы
... странице простой блок для взаимодействия.
// html код
<div class="box">
touch me!
</div>
// css код
.box {
width: 200px;
height: ...
- 486. как сделать интерактивный 3d объект на jquery.
- JavaScript/jQuery
... html-структуру и загрузите картинки:
<body>
...
<div id="interactive_3d">
<img src="images/frame_1.png">
</div>
...
</body>
теперь вызовите функцию ...
- 487. svg hover эффект для кнопки
- CSS/CSS Основы
... без заливки и с позиционированием от верхнего левого угла браузера.
<div class="button">
hover me
<svg width="150" height="75" viewbox="0 0 150 ...
- 488. как сделать закругленную шапку сайта
- CSS/CSS Основы
... заголовок.
<section>
<div class="content">
<h2>curved header</h2>
</div>
</section>
css код
на данный ...
- 489. сборка javascript модулей с помощью webpack
- JavaScript/JavaScript Основы
... <title>webpack</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
далее нам нужно установить сам webpack ...
- 490. создаем эффект мерцания с css
- CSS/CSS Основы
... <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="neontext">
welcome to! ...
- 491. как размыть фон под блоком, используя svg
- CSS/CSS Основы
...
<div class="blur-block">
<h1>лимон</h1>
<span>полезен в любой сезон года. это гибрид цитруса и горького апельсина.</span>
</div> ...
- 492. почему нужно использовать svg графику на сайтах
- HTML/HTML Основы
... свойства.
<div class="container">
<svg class="tag-icon">
<use xlink:href="#tag"></use>
</svg>
</div>
например ...
- 493. варианты использования 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: ...
- 494. как сделать видео на заднем фоне с помощью 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>
также, вы можете сделать ...
- 495. как выравнять по центру блок переменной ширины.
- CSS/CSS Основы
... <head>
<meta charset="utf-8">
<title>navigation</title>
</head>
<body>
<div class="pagination">
<ul>
<li><a href="#">1</a></li>
...
- 496. как сделать треугольники на чистом css.
- CSS/CSS Основы
... <meta charset="utf-8">
<title>test</title>
</head>
<body>
<div class="box"></div>
</body>
</html>
теперь добавим стилей.
.box {
width: 100px;
...
- 497. делаем спиннер на html-css
- HTML/HTML Основы
... }
</style>
</head>
<body>
<div class="spinner">
<span class="spinner__animation"></span> ...
- 498. фильтр категорий товаров на javascript (часть 1)
- JavaScript/JavaScript Основы
... нужен для стилизации кнопок по цвету.
<header class="header">
<div class="filter">
<button class="button button_all">all</button> ...
- 499. эффект с текстом при движении мыши
- JavaScript/JavaScript Основы
... <h2>summer<br><span>sales</span></h2>
<div class="summer"></div>
</section>
//css
* {
margin: 0;
padding: ...
- 500. библиотека react router
- JavaScript/JavaScript Основы
... следующий компонент:
function navbar() {
return (
<div>
<link to="/">главная</link>
<link to="/about">о нас</link> ...
- 501. эффект скользящего индикатора на js
- JavaScript/JavaScript Основы
... линию с нулевой шириной и стилизуем ее.
<nav>
<div id="marker"></div>
...
</nav>
nav #marker {
position: absolute;
left: ...
- 502. адаптивное боковое навигационное меню
- JavaScript/JavaScript Основы
... href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
...
</head>
<div class="navigation">
<ul>
<li>
<a ...
- 503. транслит текста на javascript
- JavaScript/JavaScript Основы
...
<input type="text" id="trtext" value="" />
<div id="result"></div>
<script>
let el = document.queryselector("#trtext"); ...
- 504. анимация при скролле на wordpress
- CSS/CSS3
... wow, к любому блочному элементу на сайте.
<div class="wow bounceinup">здесь ваш текст, картинка, видео..</div>
после всех выполненных шагов, анимация ...
- 505. свойства css3 - box-ordinal-group и box-orient.
- CSS/CSS3
... порядке должны отображаться дочерние блоки на странице.
вот его синтаксис:
#div {
box-ordinal-group: 3;
}
те блоки, у которых число меньше, будут отображаться ...
- 506. создание изображения по тексту на html canvas
- JavaScript/JavaScript Скрипты
... <button onclick="generateimage()">создать изображение</button>
<br>
<div id="imagecontainer"></div>
<script>
function generateimage() { ...
- 507. jquery эффекты
- JavaScript/jQuery
... применяемых для создания различных эффектов и стилизуем его.
<div id="test"></div>
#test {
background:#bdfa02;
height:100px;
width:200px; ...
- 508. скрипт, показывающий сколько времени займет чтение статьи
- PHP/PHP Скрипты
... }
}
добавляем где-то в начале статьи следующий код:
<div class = "estimated-time">
<?php $post_content = "..."; // содержимое статьи ?> ...
- 509. изучаем javascript: перемещение по dom-дереву
- JavaScript/JavaScript Основы
... <title>перемещение по dom-дереву</title>
</head>
<body>
<div id="container">
<h1>пример html-документа</h1> ...
- 510. генератор резюме на html и js
- HTML/HTML 5
... }
</style>
</head>
<body>
<div class="container">
<header>
<h1>генератор резюме</h1> ...
- 511. как сделать чат
- PHP/PHP Основы
... расширяя возможности вашего чата.
теперь необходимо вывести html-код:
<div id="chat">
<table>
<tr>
<td>имя</td> ...
- 512. отправка post-запросов через javascript
- JavaScript/JavaScript Основы
... }
}
};
}
</script>
<div>
<input type="text" name="a" id="a" />
<br />
<input type="text" name="b" id="b" /> ...
- 513. как выделить блок текста на css
- CSS/CSS3
... стилями, заменяя exam_01 на соответствующие классы (exam_02, exam_03, exam_04, exam_05).
<div class="exam_01">
красивое оформление важных блоков с текстом привлекает ...
- 514. как сделать горячие клавиши на сайте
- JavaScript/JavaScript Основы
... document.getelementbyid("key").innerhtml = id;
}
</script>
и html-код:
<body onkeyup="hotkey(event)">
<div id="key"></div>
</body>
результатом данного скрипта и html-кода будет изменение ...
- 515. создание шаблона пагинации на html, css и javascript
- HTML/HTML 5
... </style>
</head>
<body>
<div class="pagination">
<!-- ссылки на страницы -->
</div>
<script>
// javascript для обработки кликов по ссылкам пагинации ...
- 516. bxslider - настройки и примеры
- JavaScript/jQuery
... отдельный слайд с картинкой. этот список мы поместили в контейнер bx-slider.
<div class="bx-wrap">
<ul class="bx-slider">
<li><img src="images/stil_01.jpg" title="скандинавский ...
- 517. как запретить посетителю сохранять картинки
- HTML/HTML Основы
... выводится через css с помощью свойства background:
<div style="background: url('image.jpg') no-repeat; width: 100px; height: 100px;"></div>
данный способ спасёт уже от всех, кто не знаком ...
- 518. анимация кнопки меню гамбургер
- JavaScript/jQuery
... полоски, стилизовав теги span.
<div class="gamburger">
<span></span>
<span></span>
<span></span>
</div>
идея в том, что убрав среднюю ...
- 519. выдвигающаяся форма поиска по клику
- JavaScript/jQuery
... иконку.
<body>
<div class="wrap">
<input type="text" class="input" placeholder="поиск">
<i class="fas fa-search" aria-hidden="true"></i>
</div>
</body>
...
- 520. оптимизация кода python: использование словарей вместо условных операторов
- Python/Основы Python
... return lambda x, y: x * y
elif operator == 'divide':
return lambda x, y: x / y
else: ...
- 521. создание простого списка дел (to-do list) на html, css и javascript
- JavaScript/JavaScript Основы
... }
</style>
</head>
<body>
<div class="container">
<h1>список дел</h1> ...
- 522. адаптивное меню для сайта. часть 2
- CSS/CSS3
... поставили в html файл, после закрывающего тега nav.
<div>
<a href="#" class="menu-trigger">меню</a>
</div>
задали ей стили и сразу спрятали.
.menu-trigger ...
- 523. 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"> ...
- 524. как изменить цвет выделенного текста в css.
- CSS/CSS Основы
... }
</style>
</head>
<body>
<div class="content">
это просто текст, который меняет свой стиль при выделении. посмотрите как этот пример ...
- 525. эффект светящегося блока на css
- CSS/CSS Основы
... }
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
- 526. как установить радио на сайт
- HTML/HTML Основы
... нажать на "получить код".
после этого вы получите примерно следующее:
<div align="center" style="max-height:250px; overflow:auto;">
<a href="http://radiopotok.ru/" id="rp_link">онлайн ...
- 527. верстка формы входа (часть 1)
- CSS/CSS3
... и маленький
<section class="form-section">
<div class="form">
// форма
</div>
</section>
на макете фон секции затемнён, применим ...
- 528. стилизация 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> ...
- 529. создаем расширение для браузера на 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> ...
- 530. простейший слайдер на чистом javascript
- JavaScript/JavaScript Скрипты
... }
</style>
</head>
<body>
<div id="slider-container">
<button id="previous">предыдущее</button> ...
- 531. загрузка файлов на сервер с помощью 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"> ...
- 532. функция $() в jquery
- JavaScript/jQuery
... давайте разберём простой пример использования функции $() в jquery:
<div id="block">блок</div>
<script type="text/javascript">
$("#block").hide();
//аналог: jquery("#block").hide(); ...
- 533. angularjs. введение.
- JavaScript/JavaScript Основы
... type="checkbox" ng-model="showmytext">
<div ng-show="showmytext">текст, который появится сразу после того, как пользователь активирует checkbox.</div>
на чистом javascript у ...
- 534. как сделать мультилендинг
- PHP/PHP Основы
... тега img.
<div>
<img src="img/<?php if (!empty($utm_term)) {
echo $utm_term;
} else { echo 'kettle'; }?>.jpg" alt="">
</div>
в случае ...
- 535. как создать элемент video с помощью javascript
- JavaScript/JavaScript Основы
... <title>document</title>
</head>
<body>
<div id="box"></div>
<script src="index.js"></script>
</body>
</html> ...
- 536. pagination на php
- PHP/PHP Основы
... < 1) $start = 1;
}
?>
<!-- дальше идёт вывод pagination -->
<div id="pagination">
<span>страницы: </span>
<?php if ($active ...
- 537. плавная смена изображения в 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" ...
- 538. css анимация при прокрутке страницы
- CSS/CSS3
... прописываете wow и название анимации.
было так:
<div id="item" class="animated pulse">
а стало так:
<div id="item" class="wow pulse">
теперь анимация запускается ...
- 539. html 5 структурные элементы
- HTML/HTML 5
... занимались вёрсткой html-документа, то неоднократно использовали тег <div>, причём этот тег вам приходилось ставить везде: в начале и в конце ...
- 540. календарь на 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'>"); ...
- 541. 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тарифам">написать ...
- 542. текст на волнах в javascript
- JavaScript/JavaScript Скрипты
... settimeout("dowave(\"" + text + "\", " + (n + 1) + ")", 50);
}
</script>
код html (вставлять между тегами <body onload="dowave('myrusakov.ru', 1)"> и </body>):
<div id="wave"></div>
- 543. таблицы в html: понятное руководство для начинающих с примерами и адаптивными паттернами
- HTML/HTML Основы
... горизонтальная прокрутка (простой и надёжный способ)
<div class="table-wrap">
<table>...ваша таблица...</table>
</div>
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; ...
... хотите продолжить?</p>
<div class="actions">
<button value="cancel">отмена</button>
<button value="ok" class="primary">ok</button>
</div>
</form>
</dialog>
<style> ...
- 545. изоображение на волнах в javascript
- JavaScript/JavaScript Скрипты
... settimeout("doimagewave(\"" + count + "\", " + (n + 1) + ")", 80);
}
</script>
код html (вставлять между тегами <body onload="doimagewave(8, 1)"> и </body>):<div id="imagewave"></div>
- 546. открытие изображения в новом окне
- JavaScript/JavaScript Скрипты
... код html (вставлять между тегами <body> и </body>):
<div>
<img src = 'images/javascript/foto4.jpg' alt = 'фотография' width = '200' onclick = 'openimagewindow(this.src);' />
</div>
- 547. как сделать поиск по сайту на html
- CSS/CSS3
... <a href="#">услуги</a>
<a href="#">контакты</a>
<div class="search-box">
<form action="#">
<input type="text" placeholder="поиск.." ...
- 548. адаптивная сетка на 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>
...
- 549. как установить минимальную длину строки в javascript?
- JavaScript/JavaScript Основы
... ниже (для демонстрационных целей я выбрал произвольную дату):
<div id="app"></div>
var app = document.queryselector('#app');
// получение текущей даты
...
- 550. скрипт галереи на javascript
- JavaScript/JavaScript Скрипты
... foto.src;
}
</script>
код html (вставлять между тегами <body> и </body>):<div>
<p style = 'text-align: center;'>
<img id = 'bigimg' src = 'gallery1.jpg' height = ...
- 551. как использовать файлы tpl
- PHP/PHP Основы
... где используется шаблонизатор {username} (пусть файл называется user_panel.tpl):
<div>
<p>здравствуйте, <b>{username}</b>!</p>
<p><a href = 'editprofile.php'>редактировать ...
- 552. custom post type в wordpress
- Софт/Софт для создания сайтов
... $loop->have_posts() ) : $loop->the_post();
the_title();
echo '<div class="entry-content">';
the_content();
echo '</div>';
endwhile;
?>
аналогичный действия надо ...
- 553. оптимизация маршрута с javascript и osrm api
- JavaScript/JavaScript Основы
... #map { height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// инициализация карты ...
- 554. динамическое обновление маршрута с помощью javascript и leaflet
- JavaScript/JavaScript Основы
... <!-- контейнер для карты -->
<div id="map"></div>
<!-- подключаем скрипт leaflet --> ...
- 555. адаптивная шапка сайта (float vs flex)
- CSS/CSS3
... прилипать к логотипу.
<header>
<div class="wrap-logo">
<a href="#logo" class="logo">логотип сайта</a>
</div>
<nav>
<a ...
- 556. отображение маршрута между двумя точками на карте
- JavaScript/JavaScript Основы
... <h1>отображение маршрута на карте</h1>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> ...
- 557. добавление пользовательских меток и всплывающих окон на карту c javascript и leaflet
- JavaScript/JavaScript Основы
... <h1>карта с пользовательскими метками</h1>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> ...
- 558. как отобразить своё местоположение на карте с помощью javascript
- JavaScript/JavaScript Скрипты
... <input type="button" value="показать карту" onclick="showmap()">
<div id="ymapsid" style="width:600px;height:400px; margin-top: 20px;"></div>
</body>
</html>
как это работает? ...
- 559. применение assert в python
- Python/Основы Python
... условия, которые должны выполняться.
пример использования в функции
def divide(a, b):
assert b != 0, 'делитель не может быть равен нулю' ...
- 560. как получить input в javascript (1 часть)
- JavaScript/JavaScript Основы
... у инпутов текстовым, для возможности ввода, как чисел, так и строк.
<div class="form-group">
<h3>умножение чисел</h3>
<label for="inp_1">введите число ...
- 561. использование assert в php
- PHP/PHP Основы
... которые должны выполняться.
пример использования в функции
<?php
function divide($a, $b) {
assert($b != 0, 'делитель не может быть равен нулю'); ...
- 562. как сделать затемнение фона через css
- CSS/CSS Основы
... <td>1</td>
<td>2</td>
</tr>
</table>
<div id="tb_overlay"></div>
здесь я добавил одну таблицу, в качестве тестового контента, ...
- 563. как сделать кнопку для плавного прокручивания страницы наверх?
- JavaScript/JavaScript Основы
... <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="content">
<!-- длинный контент страницы --> ...
- 564. введение в объектно-ориентированное программирование на python
- Python/Основы Python
... def multiply(self, a, b):
return a * b
def divide(self, a, b):
if b != 0:
return a / b ...
- 565. введение в процедурное программирование на python
- Python/Основы Python
... return a - b
def multiply(a, b):
return a * b
def divide(a, b):
if b != 0:
return a / b ...
- 566. метод queryselectorall в javascript
- JavaScript/JavaScript Основы
... непосредственный
элемент img, содержащийся внутри его родительского div , я могу написать
queryselector ("div + img").
а как насчет getelementbyid, getelementsbytagname, getelementsbyclassname? ...
- 567. создание проекта 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%);"> ...
- 568. работа с массивами в html-форме
- PHP/PHP Основы
... встречаемый. создадим html-форму:
<form name="name" action="index.php" method="post">
<div>
<input type="text" name="user[name]" />
<br />
<input ...
- 569. вставка видео в видеоплеер (html+css)
- HTML/HTML Основы
... video с элементами управления controls)
<section class="smart_tv">
<div class="player">
<img src="smart-tv.png" alt="">
<video ...
- 570. стильная кнопка при наведении (графика + css)
- CSS/CSS Основы
... ссылки с текстом read more.
<div class="container">
<a href="#">read more</a>
<a href="#">read more</a>
</div>
для наглядности, временно ...
- 571. получение данных из html формы используя цикл for..of
- JavaScript/JavaScript Основы
... <div>
<label>
email:
<input type="email" name="email" value="email">
</label>
</div> ...
- 572. 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> ...
- 573. креативная трансформация радиокнопок
- CSS/CSS Основы
... потом их прятать? без них никак не обойтись, но об этом чуть позже.
<div class="container">
<p>you have a dog?</p>
<label>
<input ...
- 574. плавная анимация движения на css
- CSS/CSS Основы
... примера создадим фигуру и заставим её двигаться вниз и вправо.
<div class="square"></div> // html
// css
.square {
width: 200px;
height: 200px; ...
- 575. дизайн и верстка страницы 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" ...
- 576. множественные фоны в css3.
- CSS/CSS3
...
<title>multibackgrounds</title>
<meta charset="utf-8">
<body>
<div class="block"></div>
</body>
</html>
и простые стили, чтобы увидеть наш блок, в ...
... классом, вводите только название класса и точку .box.
<div class="box"></div>
если нужен какой-то другой тег с классом, то соответственно ...
- 578. css селекторы выбирают стиль
- CSS/CSS3
... будет применяться к тегу <i>.
дочерний селектор
div > span {..}
тег span является ребенком, а div – родителем. значение стиля всегда применяется ...
- 579. пример стилизации slick слайдера (часть 2)
- JavaScript/jQuery
... разметке и в js коде. добавляем класс multiple-items ко flex-контейнеру.
<div class="wedding multiple-items"></div>
копируем js код с базовыми настройками, который идет ...
- 580. многоколоночный текст на 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 ...
- 581. обратная связь на wordpress
- Софт/Софт для создания сайтов
... код в виджете:
<div id="customform" style="display:none;"> /* скрыть форму */
[contact-form-7 id="823" title="обратная связь"] /* шорткод */
</div>
где даем id произвольное ...
- 582. многослойный круг на градиентах и тенях
- CSS/CSS Основы
... которых можно создавать эффект многослойности.
<section>
<div class="circle">
<i></i>
<i></i> ...
- 583. плавный переход. css свойство transition
- CSS/CSS Основы
... качестве анимационного эффекта при наведении на кнопку.
<div class="button">hover effect</div>
.button {
color: #fff;
background-color: ...
- 584. адаптивное мобильное меню для сайта (часть 3)
- JavaScript/JavaScript Основы
... создадим контейнер mobile-nav для пунктов меню с ссылками на разделы сайта.
<div id="mobile-nav" class="mobile-nav">
<ul class="mobile-nav__list">
<li ...
- 585. простой роутер на 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> ...
- 586. эффект размытия и фокуса на css
- CSS/CSS Основы
... <img src="img/airline.png" alt="airline" class="airline">
<div class="bg"></div>
</section>
css стили
по умолчанию для всех элементов родителем ...
- 587. показать и скрыть элемент на js
- JavaScript/JavaScript Основы
... кнопке.
<button class="btn" type="button">
показать элемент
</button>
<div class="content hidden">
товарищи! постоянное информационно-пропагандистское ...
- 588. человек с потрескавшейся кожей на чистом css
- CSS/CSS Основы
... портрет человека и текстура.
<div class="portrait">
<img src="women.jpg">
<img src="texture.jpg" class="texture">
</div>
css код
поместим ...
- 589. анимированный фон с плагином particlesjs
- JavaScript/JavaScript Основы
... создадим на html странице область для анимированного фона.
<div id="particles" class="particles"></div>
4) стилизуем данный блок по классу particles, задав ему ...
- 590. создаём сокращатель 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" ...
- 591. настройка галереи fancybox 3
- JavaScript/jQuery
... идентификатором.
// html
<div id="hidden-window">
<h2>привет!</h2>
<p>я модальное окно.</p>
</div>
// css
#hidden-window {
display: ...
- 592. проект на flask и jinja
- Python/Основы Python
... }
</style>
</head>
<body>
<div class="container">
<p>название сайта: {{my_string}}</p> ...
- 593. парсинг сайтов в python
- Python/Основы Python
... # и получаем нужный div блок с контентом
info = soup.find('div', {'class': 'block_cont'}) ...
- 594. создаём сокращатель 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'])) ...
- 595. вcплывающее окно на чистом css
- CSS/CSS Основы
... формой, которое будет появляться при клике по этой кнопке.
<div class="wrapper">...</div>
ограничим ширину контейнера и расположим его содержимое ...
- 596. блок со скошенным углом на css
- CSS/CSS Основы
... after). сделаем у блока правый верхний угол скошенным.
// html разметка
<div class="block">
<img class="icon" src="image.png" alt="">
<h2>иван ...
- 597. первая буква логотипа google
- CSS/CSS Основы
... разметке, а можно отобразить его с помощью псевдоэлемента before.
<div class="google_logo"></div>
рисуем синий блок
весь блок строится на бордерах (border). ...
- 598. drag and drop загрузка файлов на сервер. часть 2.
- JavaScript/JavaScript Основы
... перейдём к файлу index.html
<!-- остальной код -->
<div class="dropzone" id="dropzone">перетащите файлы сюда</div>
<script>
(function() {
var dropzone = document.getelementbyid("dropzone"); ...
... <html>
<section class="map">
<div class="container">
код карты
</div>
</section>
// css
.map {
padding: ...
- 600. выравнивание элементов формы на flex
- CSS/CSS3
... сложности у нас будет 4 ряда, в последнем из которых - кнопка (button).
<div class="form__wrapper">
<form>
<ul>
<li class="form__line">
<label ...
- 601. flex блоки на примере шапки
- CSS/CSS3
... оберткой.
<header>
<div class="wrap-logo">
<img src="logo.jpg" alt="">
</div>
<nav>
<ul>
<li><a ...
- 602. рейтинг со смайликами на чистом css
- CSS/CSS Основы
... скачаны с сайта flaticon. первая радиокнопка помечена, как checked (выбрана).
<div class="rating">
<input type="radio" name="star" id="star1" checked="">
<label ...
- 603. зумирование изображений на 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"> ...
- 604. счетчик обратного счета на javascript с возможностью рестарта
- JavaScript/JavaScript Скрипты
... cleartimeout(this.timerhandle);
};
используется так:
// div блок
let el = element.classlist.contains("div");
// внутрений текст "00:00:00" или "00:00" ...
- 605. многоуровневое меню на php и mysql
- PHP/PHP Основы
... выводим все дочерние элементы
}
echo "</li>";
}
?>
<div id="menu">
<h2>меню</h2>
<ul>
<?php
...
- 606. адаптивная таблица для мобильных устройств
- CSS/CSS3
... разметка
для управления таблицей, мы обернули её в блок с классом container.
<div class="container">
<table>
<thead>
<tr> ...
- 607. создание простейшего калькулятора на js
- JavaScript/JavaScript Основы
... происходит вычисление математического действия и вывод результата.
<div class="container">
<form class="calculator"name="calc">
<input class="value" ...
- 608. подключение яндекс.карт к сайту
- JavaScript/JavaScript Основы
... яндекс.карт. для начала напишем соответствующий html-код:
<div id="map" style="width: 400px; height: 300px"></div>
комментировать тут особо нечего, всё очень просто: ...
- 609. имитация клавиш у клавиатуры на css
- CSS/CSS Основы
... теней.
html код
каждый тег span - это отдельная клавиша у клавиатуры.
<div>
<span><i>c</i></span>
<span><i>s</i></span> ...
- 610. анимация на css3.
- CSS/CSS3
... <title>animation</title>
<meta charset="utf-8">
</head>
<body>
<div class="block"></div>
</body>
</html>
теперь напишем стили
@keyframes spin {
0% {
...
- 611. скрипт вывода новостей на php
- PHP/PHP Скрипты
... главное, его всегда соблюдать. дальше пишем скрипт вывода новостей на php:
<div id="news">
<?php
$news = file_get_contents("news.txt");
$news = explode("\n", $news);
for ($i ...
- 612. динамическая загрузка файлов на jquery
- JavaScript/jQuery
... <body>
<h1>загрузка файлов</h1>
<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form> ...
- 613. удаление параметров "x" и "y" у кнопки image
- PHP/PHP Основы
... method="get">
<div>
поиск: <input type="text" name="query" />
<br />
<input type="image" src="images/button.png" alt="" />
</div>
</form>
...
- 614. система лайков на php и ajax
- PHP/PHP Основы
... возникнуть не должно. теперь приступим к html-коду:
<div id="like" data-id="<?=$id?>"><?=$likes?></div>
здесь мы просто выводим данные на страницу. самому ...
- 615. установка тени для блока и текста в css
- CSS/CSS3
... 10px 15px rgba (235, 230, 230, 0.5);
пример тени для блока
// html разметка
<div class="block"></div>
// css код
.block {
width: 250px;
height: 150px; ...
- 616. анимированный переключатель меню на javascript
- JavaScript/JavaScript Основы
... нужные свойства.
<div class="toggle">
<span></span>
<span></span>
<span></span>
</div>
*{
margin: ...
- 617. примеры свойства transform в css
- CSS/CSS3
... разметки:
<div>
<a class="button_anime" href="#">заказать работу
<img src="settings.png" alt="">
</a>
</div>
в css ...
- 618. тени для текста и блоков.
- CSS/CSS3
... <meta charset="utf-8">
<title>box-shadow</title>
</head>
<body>
<div class="block"></div>
</body>
</html>
и зададим какие-нибудь первоначальные стили ...
- 619. замена картинки с искажением при наведении
- CSS/CSS Основы
... контейнер imgbx две фотографии.
<div class="imgbx">
<img src="img1.png">
<img src="img2.png">
</div>
девушка на фоне
поставим ...
- 620. закруглённые углы на css3.
- CSS/CSS3
... <title>border-radius</title>
<meta charset="utf-8">
</head>
<body>
<div class="block"></div>
</body>
</html>
теперь зададим базовые стили для нашего ...
- 621. адаптивность и анимация элементов сайта
- 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>
...
- 622. препроцессор less, начиная с простого
- CSS/CSS Основы
... как мы это делали в css, но вместо значений подставляем переменные.
less
div {
padding: 0;
font-family: roboto, sans-serif;
color: ...
- 623. показать пароль на js
- JavaScript/JavaScript Основы
... обоим присваиваем классы для получения этих элементов через javascript.
<div class="inputs">
<input type="password" class="password">
<label> ...
- 624. гамбургер меню на css или js? часть 2
- JavaScript/jQuery
... скрипты
2. вставляем в html файл между тегами div и ul строчку кода
<input id="menucss" type="checkbox">
3. заменяем тег div c классом .menuburger на label
<label class="menuburger" ...
- 625. как использовать псевдоклассы в css
- CSS/CSS3
... применяется к id, который указан в адресной строке браузера.
<div id="h1">заголовок раздела</div>
h1:target {
color: red;
font-weight: 500; ...
- 626. стоит ли использовать 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, ...
- 627. самые часто используемые сокращения в текстовом редакторе sublime text 2.
- Софт/Софт для создания сайтов
... данная возможность бывает полезна.
если у вас, к примеру, в html есть блоки div с каким-то содержимым, то вы можете свернуть те, которые вам мешают. для ...
- 628. создание интерактивного информационного окна на веб-странице с помощью javascript
- JavaScript/JavaScript Скрипты
... // создание информационного окна
const infobox = document.createelement('div');
infobox.textcontent = `наведен элемент с тегом: ${tagname}`; ...
- 629. свойство z-index и плеер youtube
- CSS/CSS Основы
... столкнуться. в мою задачу входило сделать всплывающее окно с помощью блока div, и оно должно быть, разумеется, поверх всего контента. я поставил нужный ...
- 630. просмотр html тегов в tkinter
- Python/Основы Python
... тегов.
[ 'a', 'b', 'br', 'code', 'div', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6','i', 'img', 'li', 'ul', 'ol', 'mark', 'p', 'pre', ...
- 631. автоматизация задач с помощью python: как оптимизировать повседневную работу
- Python/Основы Python
... soup = beautifulsoup(response.text, 'html.parser')
# извлечение нужной информации
temperature = soup.find('div', class_='temperature').text
print(f'temperature: {temperature}')
с помощью этого ...
- 632. удаление всплывающих окон через консоль браузера c javascript
- JavaScript/JavaScript Скрипты
... const tagname = prompt('введите тег для удаления всплывающих окон:', 'div');
if (tagname) {
removepopupbytag(tagname);
} else { ...
- 633. как нарисовать треугольник на css
- CSS/CSS Основы
... solid;
border-width: 10px 5px 0 5px;
height: 0;
width: 0;
}
далее к обычному блоку div можно применить класс triangle, в результате данный блок станет стрелкой ...
- 634. эффект анимированного неонового свечения у кнопки
- CSS/CSS Основы
... создание html-разметки
сделать кнопку можно разными способами: через тег button, div или a. я предпочитаю сделать это сразу через ссылку a, поскольку кнопка ...
- 635. как загружать файлы с 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: ...
- 636. объединяем изображения в видеофайл с 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) ...
- 637. калькулятор на c# и winforms. часть 2
- C#/Основы C#
... соответствующих арифметических операций
сложение - add
вычитание - sub
деление - div
умножение - mult
очистить - clear
точка - dot
равно - equal
при таком ...
- 638. что такое svg? поддержка старых браузеров.
- HTML/HTML Основы
... );
}
всё, что нам теперь осталось, это добавить svg в документ и блок div c id равным тому, что записан в нашем файле myimage.js в конструкторе raphael первым ...
... интерфейс. используйте пустой alt и, по возможности, роль презентации.
<img src='img/divider.svg' alt='' role='presentation' width='200' height='16'>
<!-- или скрыть иконку от ассистивных ...
- 640. приоритет и наследование в сss на практике
- CSS/CSS Основы
... атрибуты основного шрифта заранее в тег body (предок). то есть, все теги (p, div), что находятся внутри body, являются его потомками, они так же унаследуют ...
- 641. адаптивное навигационное меню с иконками
- 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>
...
- 642. показать скрытый текст на js
- JavaScript/JavaScript Основы
...
добавим ещё css стилей для красоты
body {
font-family: tahoma;
}
div {
background: #f2eaea;
margin: 0 auto;
max-width: ...
- 643. hover эффект для кнопки + псевдокласс :nth-child
- CSS/CSS3
... происходить в файле стилей. одна ссылка и два span, решили обойтись даже без div-а. сначала стилизуем гиперссылку, из которой и будет состоять наша кнопка. ...
- 644. fetch api: get и post запросы
- JavaScript/JavaScript Основы
... post запросы
а вот так можно отправить post запрос:
post('https://appdividend.com/api/v1/users', {user: 'krunal'})
.then(data => console.log(data)) // обрабатываем результат вызова response.json() ...
- 645. фильтры в jquery
- JavaScript/jQuery
... не имеют детей.
$("p:empty");
:parent – выберет элементы, имеющие детей.
$("div").filter(":parent");
:has – выбирает все заголовки с курсивным начертанием. ...
- 646. свойство css background-image в веб-дизайне
- CSS/CSS3
... только тегом body, а широко применяется в оформлении сайта, например для: div, li, p, table, header, footer.
рассмотрим пример:
<!doctype html>
<html>
<head>
<style> ...
- 647. многоколоночный текст (column-count)
- CSS/CSS3
... свойства и числа: column-count: 3;
просто задаем любому блочному элементу (p, div) с текстом - класс с заданным числом колонок. в результате текст автоматически ...
- 648. красивое оформление статьи на html
- HTML/HTML 5
... оборачиваем тегом blockquote, вместо него можно использовать теги <p> или </div>.
<blockquote>
..
</blockquote>
при стилизации тега blockquote, ...
... горизонтального
индикатора чтения. но вместо использования традиционных элементов div/span и
сложной, запутанной математики работы индикатора, мы будем использовать ...
- 650. как пользоваться advanced custom fields
- Софт/Софт для создания сайтов
... использую дефолтную тему twenty seventeen. вставьте код перед закрывающим тегом div с классом entry-content.
визуально, на сайте, вы увидите такие же списки, ...
... document в $(document).height(), мы можем
использовать такие элементы как section, article или div, которые содержат
контент**,** для вычисления более точной позиции индикатора ...
- 652. фильтр товаров на javascript
- JavaScript/JavaScript Основы
в эпоху процветания интернет-магазинов, как никогда востребованы разработчики, способные реализовать запросы владельцев магазинов. львиная ...
- 653. космические приключения с python и pygame. обработка столкновений
- Python/Основы Python
мы продолжаем создание игры про "космические приключения" с python и pygame. очень важной частью этой игры является возможность уничтожения вашего ...
- 654. как добавить логотип на wordpress-сайт
- Софт/Софт для создания сайтов
в базовых настройках wordpress в верхнем левом углу шапки сайта, выводится название сайта в виде текста. представьте, что вы взяли на фриланс-бирже ...
- 655. как сохранить файл в c# через windows form
- C#/Основы C#
опция сохранения на компьютере распространена повсюду. бывает что создавая приложение необходимо, чтобы оно обладало данной функцией.
создание ...
- 656. программное сворачивание окон с python и pyautogui
- Python/Основы Python
в сегодняшней статье мы рассмотрим создание скрипта для сворачивания всех окон на экране вашего компьютера. нам понадобится python и библиотека ...
- 657. как получить список статей с python и bs4
- Python/Основы Python
в сегодняшней статье мы рассмотрим способ получения списка статей, из определенной категории нашего сайта.
вот что нас интересует:
данный ...
- 658. псевдоэлементы after и before. примеры
- CSS/CSS Основы
в этой статье вы узнаете историю возникновения и использования псевдоэлементов after и before в css. рассмотрим несколько примеров, где они активно ...
- 659. кнопка-перевертыш с 3d-эффектом
- CSS/CSS Основы
в спокойном состоянии кнопка выглядит обычно, в стиле плоского дизайна. однако при наведении на нее мыши, происходит переворачивание с 3d-эффектом. ...
- 660. работа с миниатюрами записи в wordpress
- Софт/Софт для создания сайтов
миниатюра записи – это прикрепленная превью картинка, к анонсу записи в wordpress. в полной записи, этой картинки может и не быть или у неё будут ...
- 661. запрос из множества таблиц в sql
- MySQL/SQL
в сегодняшней статье мы рассмотрим как выбрать данные из несвязанных таблиц с sql и оператором join. для чего это нужно. прежде всего, скажем, что ...
- 662. космические приключения с python и pygame. перемещение астероидов
- Python/Основы Python
здравствуйте! в цикле статей по созданию космической аркады, с python и pygame, мы достигли того что на игровом поле отображается космический корабль ...
- 663. компилятор babel для js
- JavaScript/JavaScript Основы
babel преобразует новый синтаксис es6 в совместимый синтаксис со всеми браузерами es5. благодаря компилятору babel, программисты прямо сейчас могут ...
- 664. выпадающий список с tkinter и python
- Python/Основы Python
язык python имеет множество графических библиотек. одной из них является tkinter. и в сегодняшней статье мы рассмотрим как создать раскрывающийся ...
- 665. классы в javascript
- JavaScript/JavaScript Основы
класс в js - это расширяемый шаблон кода, заготовка для создания объекта. классы в js предназначены для упрощения создания объектов и организации ...
- 666. мой партнерский магазин. xml-фид. часть 1
- XML/XML Основы
идея создания собственного интернет-магазина, наполненного чужими товарами (своих у меня нет), уже давно не давала мне покоя. я постепенно шел ...
- 667. красивый эффект при наведении (:before и :after)
- CSS/CSS3
на этом уроке мы сделаем меню с красивым эффектом при наведении с использованием псевдоэлементов - :after и :before. что такое псевдоэлементы, мы очень ...
- 668. файл header.php в wordpress (фрилансеру)
- Софт/Софт для создания сайтов
шаблон wordpress, как и другие cms, состоит не из одного файла index.php, а из нескольких файлов. типичная блоговая структура, собирается из нескольких ...
- 669. виджет аккордеон библиотеки jquery ui
- JavaScript/jQuery
в статье работа с библиотекой jquery ui, мы подробно на примере виджета tooltip, разобрали, как подключить библиотеку, зачем она вообще нужна. сегодня, ...
- 670. установка базы данных mongodb
- JavaScript/JavaScript Основы
все базы данных делятся на два типа, с хранением данных в таблицах (mysql) и с хранением данных, в массивах (формат bson). mongodb – документо-ориентированная ...
- 671. анализ скорости загрузки сайта
- Софт/Софт для раскрутки сайтов
услуга по оптимизации скорости загрузки сайтов – весьма востребована на фриланс-биржах. вы спросите: "почему так много не оптимизированных ...
- 672. отложенная загрузка изображений
- JavaScript/JavaScript Основы
нас, веб-разработчиков, строгий google, уже давно убедил, что изображения на сайте, надо оптимизировать – уменьшать их вес. красный или оранжевый ...
- 673. всплывающие подсказки при наведении
- CSS/CSS3
на этом уроке мы сделаем всплывающую подсказку при наведении на иконку на чистом css. точно такой же принцип можно применить к картинке. перейдите ...
- 674. создание навигации в wordpress (фрилансеру)
- Софт/Софт для создания сайтов
бывает, что заказчики часто просят, сделать дополнительную навигацию на wordpress и вывести её, в указанном на скриншоте, месте (красными стрелочками). ...
- 675. система контроля версий git
- Софт/Софт для создания сайтов
пока вы сидели в одиночестве, вылавливая на фриланс-биржах, подходящие для себя заказы, офисные веб-разработчики, уже на полную катушку, использовали ...
- 676. что выбрать верстальщику - figma или photoshop?
- Софт/Софт для создания сайтов
немного предыстории. всем известный, adobe photoshop, изначально был задуман для обработки фотографий. но поскольку на тот момент не было других инструментов ...
- 677. плавное подчеркивание ссылки при наведении
- CSS/CSS3
на этом уроке я покажу вам как реализовать такой hover эффект, как плавное подчеркивание ссылки при наведении. подчеркивающая линия будет появляться ...
на github pages можно бесплатно разместить статичный html сайт, состоящий из html/css/js файлов, к которому можно подключать различные библиотеки – одним ...
- 679. распознавание текста на изображении с c# и tesseract
- C#/Основы C#
технология распознавания символов с изображения в редактируемый текст достаточно непростая задача. для подобных целей используется технология ...
- 680. портфолио верстальщика на конструкторе mobirise. часть 2
- Софт/Софт для создания сайтов
в статье "конструктор mobirise для верстальщика" была подробно раскрыта тема, чем полезен конструктор mobirise верстальщику. в этой статье, я прокомментирую ...
статья "бриф на разработку сайта" - ответила на вопрос, что такое бриф и кому он нужен. данная статья будет практическим руководством, как создать ...
- 682. делегирование событий в js
- JavaScript/JavaScript Основы
на прошлом уроке мы научились вешать обработчик события на одну кнопку в js. однако методы, хорошо работающие с единичными объектами, совершенно ...
- 683. анимация для меню с индикатором. часть #2
- JavaScript/JavaScript Основы
продолжим создание индикатора для меню навигации. здесь находится первая часть урока.
стилизация и hover-эффект меню
при наведении мыши, иконка ...
- 684. эффект печатающегося текста на js
- JavaScript/JavaScript Основы
как с пользой можно применить эффект печатающегося текста на сайтах? первое, что приходит в голову - для фиксирования внимания посетителей на ...
- 685. прототипы в js
- JavaScript/JavaScript Основы
прототип - это js объект, от которого другие объекты наследуют его свойства и методы. по умолчанию, у каждого объекта есть свой прототип и если ...
- 686. креативный кастомный чекбокс на css
- CSS/CSS Основы
состояние у переключателя включено|выключено, можно усилить с помощью css кастомизации и смайлика.
создание нативного чекбокса
сначала создадим ...
- 687. перебор массива в js - метод foreach
- JavaScript/JavaScript Основы
у языка javascript существует несколько методов для перебора массива, один из которых мы сейчас рассмотрим. речь идет о методе foreach, который может ...
- 688. эффект тени при наведении в css
- CSS/CSS3
на этом уроке, мы создадим красивый эффект тени при наведении, на чистом css. подобный эффект можно реализовать на любом блочном элементе. в нашем ...
- 689. эффект многослойного текста
- CSS/CSS Основы
для создания эффекта многослойного текста, нам потребуется атрибут data-text, два псевдоэлемента, прозрачный цвет и свойство text-stroke.
html разметка ...
- 690. как изменить цвет текста в python
- Python/Основы Python
выводить текст на консоли в разных цветах довольно удобно и практично, от создания причудливых сценариев сканирования до выделения различных ...
- 691. data атрибуты на jquery (часть 2)
- JavaScript/jQuery
в первой части, мы учились получать и изменять значение атрибута на jquery. во второй части, напишем программу на jquery - при клике по цветной кнопке, ...
- 692. получить значение из формы на jquery
- JavaScript/jQuery
сегодня мы научимся получать значения из формы на jquery, вводимые пользователем. рассмотрим на примере простого калькулятора. у него будет два ...
- 693. ключевое слово this в javascript
- JavaScript/JavaScript Основы
рассказать о том, как работает ключевое слово this, частый вопрос на собеседовании на позицию веб-разработчика. начнем, как всегда с теории, а чуть ...
- 694. работа с localstorage на примере
- JavaScript/JavaScript Основы
localstorage - это локальное хранилище данных прямо в браузере клиента. иногда нужно между перезагрузками страниц, сохранять пользовательские настройки, ...
- 695. портрет с текстовым эффектом
- CSS/CSS Основы
думаю, что многие из вас видели в интернете изображения, заполненные текстом. заполнить текстом можно любую фигуру. на этом уроке мы покроем ...
- 696. зачем сайту mysql? таблицы, строки, запросы
- MySQL/MySQL Основы
база данных в программировании – это хранилище разного рода данных в упорядоченном виде. если провести простую аналогию из жизни, то базу данных ...
- 697. cms для лендингов - textolite
- Софт/Софт для создания сайтов
официальный сайт: textolite.ru
textolite представляет собой простую систему управления статичным сайтом с бесплатной и платной расширенной версией. ...
в статье "бриф на разработку сайта" вы узнали что такое бриф и зачем надо анкетировать заказчика. вам крупно повезет, если у заказчика существует ...
- 699. объекты в js - сложный тип данных
- JavaScript/JavaScript Основы
object (объект) - это более сложный тип данных в js. хочу напомнить, что все остальные типы данных, являются примитивными, так как могут содержать ...
- 700. партнерский магазин на wordpress
- Софт/Софт для создания сайтов
если вам тяжело дается освоение разных языков программирования, верстки, то не отчаивайтесь, посмотрите в сторону заработка на собственном ...
- 701. как организовать файлы по расширению в python
- Python/Основы Python
организация файлов на компьютере может быть утомительной задачей, особенно когда это делается вручную. некоторые папки (например, папка "загрузки") ...
- 702. примеры prompt, alert и confirm в js
- JavaScript/JavaScript Основы
у браузеров есть замечательная опция - возможность взаимодействия с пользователем, через диалоговые (модальные) окна на js. достигается это с ...
- 703. создание словарей на python
- Python/Основы Python
словарь является типом данных (dist) в python и представляет собой неупорядоченную коллекцию, состоящую из пар "ключ-значение". словари в python очень ...
- 704. переменные в python
- Python/Основы Python
не один язык программирования не может обойтись без переменных и python здесь не исключение. переменная в программировании – это именованная ...
- 705. установка python 3.7.4 на windows
- Python/Основы Python
возможно, что после прочтения статьи python – как первый язык программирования, вам захочется познакомиться поближе с питоном (народное название). ...
- 706. боковая панель приложения на c# и windowsforms
- C#/Основы C#
в сегодняшней статье мы попробуем создать боковое меню с изменяющимися данными, при помощи c# и фреймворка windowsforms. для данного примера нам понадобится ...
- 707. программирование на php и mysql с нуля до гуру
- PHP/PHP Основы
приблизительно год назад вышла новая версия языка программирования php8. его можно смело назвать - языком номер один в веб-программировании на ...
- 708. конструктор mobirise для верстальщика. часть 1
- Софт/Софт для создания сайтов
это будет не просто очередная статья в стиле "копирайтеров-теоретиков" на тему, что такое "бесплатный конструктор сайтов mobirise". прежде, чем приступить ...
- 709. адаптивные картинки в css3
- CSS/CSS3
зачем обязательно надо делать картинки адаптивными? к сожалению, то счастливое время, когда можно было вставить картинку на веб-сайт и указать ...
- 710. число – тип данных в js
- JavaScript/JavaScript Основы
на этом уроке мы поговорим о числовом типе данных в javascript. в языке javascript как целые числа, так и числа с плавающей точкой относятся к одному типу ...
- 711. загрузка нескольких файлов на сервер в expressjs
- JavaScript/JavaScript Основы
продолжаем предыдущую статью, в которой рассказывалось как загрузить файл на сервер в expressjs.
в данной статье мы рассмотрим как загрузить сразу ...
- 712. поиск и замена строк в файле с regex на c# и winforms
- C#/Основы C#
здравствуйте. сегодня мы создадим простое оконное приложение, для замены строк в
файле, с помощью c#, winforms и модуля regex. для проекта понадобится ...
- 713. как сделать чекбокс на html/css
- CSS/CSS3
сегодня вы узнаете как сделать чекбокс на html и добавить ему css стилей для лучшей совместимости с дизайном сайта.
демонстрация
чекбокс на ...
- 714. примеры цикла for в javascript
- JavaScript/JavaScript Основы
начнем наше знакомство с циклом for в javascript, сразу с примеров и только в конце статьи пробежимся немного по теории.
представьте себе, что вы, ...
- 715. примеры if-else в javascript
- JavaScript/JavaScript Основы
примеры условных операторов if-else (если-иначе), нам не надо специально придумывать, они приходят из жизни. то, как мы себя ведем или какой делаем ...
- 716. что такое таксономия в wordpress
- Софт/Софт для создания сайтов
на прошлом уроке мы создали новый тип записи post type book более подходящий для продажи книг, а на этом уроке научимся создавать для него таксономию ...
- 717. как вывести результат в javascript (2 часть)
- JavaScript/JavaScript Основы
объявление переменных
для того, чтобы объявить в javascript переменную, пишут так:
var name;
где name – осмысленное название переменной, написанное ...
у нас есть схема структуры сайта с ключевыми словами, которые будут вставляться в статью, давая четкий сигнал поисковым машинам, на какой запрос ...
на прошлом уроке мы создали схему структуры сайта, на котором будет 6 категорий, одна из категорий будет состоять из двух подкатегорий. все категории ...
семантическое ядро – это список ключевых слов, по которым будут заходить пользователи на ваш сайт из поисковых систем.
сначала собирают семантическое ...
проверка на сезонность и перспективность
нам надо исключить, что выбранная ниша не имеет сезонности и нисходящего тренда. поскольку, это наш ...
проверка выбранной ниши по охвату аудитории
информационный сайт зарабатывает на пользователях, которые кликают по контекстной рекламе. нам ...
- 723. как сделать сайдбар на wordpress
- Софт/Софт для создания сайтов
из этой статьи вы узнаете как сделать сайдбар на wordpress. сайдбаром мы называем правую или левую колонку сайта, на которой размещены виджеты. виджеты ...
- 724. как изменить маркер списка
- CSS/CSS3
по умолчанию маркером списка ul, служит простая черная точка. я знаю, что многие начинающие верстальщики, используют маркированные списки для ...
- 725. как создать виджет на wordpress
- Софт/Софт для создания сайтов
на прошлом уроке вы научились создавать свой собственный сайдбар, а на этом уроке вы узнаете как создать свой виджет на wordpress. виджет - это модуль, ...
- 726. иконки для меню wordpress
- Софт/Софт для создания сайтов
на этом уроке мы научимся к меню wordpress добавлять шрифтовые иконки. согласитесь со мной, что иконки не только украшают сайт, но и делают его более ...
- 727. как подключить css, шрифт и скрипты на wordpress
- Софт/Софт для создания сайтов
данная статья научит вас, как подключать стили, шрифты и скрипты к сайту. дело в том, что верстальщик отлично знает, что такие вещи подключаются ...
- 728. псевдоэлемент after и псевдокласс last-child
- CSS/CSS Основы
для верстальщика псевдоэлементы и псевдоклассы – незаменимые помощники и я вам это сейчас докажу на примере фрагмента psd макета.
дизайнеры ...
- 729. видео фон для сайта
- HTML/HTML Основы
на этом уроке мы научимся устанавливать на сайт видео фон во всю ширину экрана. обычно такие видео фоны служат вместо статичного фона в верхней ...
- 730. импорт товаров в woocommerce
- Софт/Софт для создания сайтов
как сделать массовый импорт товаров в интернет-магазин, работающий на плагине wordpress – woocommerce? совсем недавно этого нельзя было сделать бесплатно, ...
- 731. оплата на сайте (яндекс.деньги)
- Софт/Софт для раскрутки сайтов
сервис яндекс.деньги позволяет любому физическому лицу (для юрлиц и ип есть яндекс.касса), разместить на сайте форму оплаты, даже владельцам ...
- 732. как отключить обновления на wordpress
- Софт/Софт для создания сайтов
разработчики клиентских сайтов на wordpress, часто сталкиваются с необходимостью восстанавливать сайт, после очередного обновления какого-нибудь ...
- 733. бесплатный обратный звонок на сайте
- Софт/Софт для раскрутки сайтов
тем, кто знает, что такое обратный звонок на сайте, предлагаю не читать, а перейти сразу к следующей главе. для остальных постараюсь объяснить, ...
- 734. ajax-форма без перезагрузки страницы
- JavaScript/jQuery
на этом уроке мы научимся отправлять форму без перезагрузки страницы, используя метод ajax, библиотеки jquery. как вообще происходит классический ...
- 735. как сделать alert кнопку в css
- CSS/CSS3
на сайтах кнопки alert (оповещение), используются для взаимодействия с пользователем. смысловая составляющая alert кнопок передается в основном ...
- 736. анимация текста в css
- CSS/CSS3
на этом уроке мы разберем основные правила css анимации на веб-странице, которые можно применить к любому элементу, а не только к тексту.
просто ...
- 737. ленивая загрузка изображений. часть 1
- JavaScript/JavaScript Основы
изображения являются важнейшей частью любого сайта. являются ли они
маркетинговыми баннерами, изображениями продуктов или логотипов, невозможно ...
- 738. перенос сайта на wordpress плагином duplicator
- Софт/Софт для создания сайтов
на этом уроке вы узнаете, как перенести свой сайт на wordpress с одного хостинга на другой или с локального сервера на реальный хостинг. для этой ...
- 739. смс заявка с сайта
- Софт/Софт для создания сайтов
как правило, владельцы сайтов для обратной связи с клиентами размещают на видном месте номер телефона и контактную форму. если с телефоном все ...
- 740. регистрация домена
- Регистрация сайта
регистрация доменовдомен ru - 99 рубдомен com - 350 рубзарегистрируй себе домен!имя: зона: rusucomnetorginfobiznamemobitv2domains.ruесли вы читаете эти строки, значит, ...
- 741. дочерняя тема wordpress
- Софт/Софт для создания сайтов
несмотря на то, что платных или бесплатных wordpress тем, создано уже огромное количество, редко кто использует их на своих сайтах так, как есть. даже ...
- 742. создать и вывести массив в js
- JavaScript/JavaScript Основы
для лучшего понимания, что такое массивы, сделаем вид, что их не существует, обойдемся пока без них. однако для проведения эксперимента, надо ...
- 743. файлы темы wordpress
- Софт/Софт для создания сайтов
лучше всего начать изучение структуру файлов темы wordpress на примере стартовой темы underscore. обычно разработку под wordpress начинают с этой базовой ...
- 744. верстка сайта по psd макету (часть 4)
- HTML/HTML 5
на прошлом уроке была сделана верстка секции по psd макету. сейчас наш сайт хорошо смотрится на больших и средних мониторах. но что произойдет, ...
- 745. выезжающее боковое меню. часть 2
- CSS/CSS3
продолжаем делать выезжающее боковое меню по клику, в первой части урока была сделана html-разметка, стилизованы все селекторы, теперь осталось ...
- 746. создаем простой синтезатор с c# и windowsforms
- C#/Основы C#
здравствуйте. сегодня мы создадим простой проект синтезатора на
windowsforms и c#. прежде всего нам понадобятся звуки нот в
формате wav.
перейдите ...
- 747. всплывающая форма подписки и бесплатная рассылка на wordpress
- Софт/Софт для создания сайтов
приветствую вас друзья! на этом уроке вы узнаете как создать всплывающую форму подписки для сбора базы подписчиков с последующей бесплатной ...
- 748. создание простейшего веб-сервера в c#
- C#/Основы C#
доброго времени суток! сегодня мы рассмотрим с вами как можно создать простейший веб-сервер в c#.
для создания данного сервера мы будем использовать ...
- 749. верстка сайта по psd макету (часть 3)
- HTML/HTML 5
на прошлом уроке была сделана html разметка для дальнейшей верстки psd макета. как и ожидалось все блоки и секции встали друг под друга - это и есть ...
- 750. верстка сайта по psd макету (часть 1)
- HTML/HTML 5
серия этих уроков ориентирована на абсолютных новичков, чтобы максимально подробно продемонстрировать, как происходит верстка сайта по psd ...
- 751. как ускорить wordpress
- Софт/Софт для создания сайтов
на фриланс биржах, можно часто увидеть заголовки с заданиями от заказчиков: "нужно ускорить загрузку сайта на wordpress". думаю, что эта тема будет ...
- 752. единицы измерения em, rem, vh, vw, vmin, vmax
- CSS/CSS3
сегодня мы рассмотрим редко используемые начинающими верстальщиками, относительные единицы измерения в css3, такие как, em, rem, vh, vw, vmin, vmax. в основном ...
- 753. вертикальное меню на css
- CSS/CSS3
вертикальное меню на css - это список ссылок, ведущих на разные страницы сайта. неплохо смотрится, когда список ссылок вместо простых маркеров, ...
- 754. прокрутка страницы вверх
- JavaScript/jQuery
у посетителя сайта, должна быть возможность, быстро вернуться наверх, если он дошел до конца страницы. обычно в правом нижнем углу браузера, ...
- 755. как сделать плавный якорь на jquery
- JavaScript/jQuery
сегодня мы поговорим о том, что такое якорь в html, как это работает, да так, чтобы действие произошло плавно.
якорь – это знак решетки, который ...
- 756. mobile first верстка
- JavaScript/jQuery
на прошлом уроке, мы привязали к кнопке гамбургер выезжающее меню при клике по ней. посмотрите демонстрационный пример прошлого урока, как ...
- 757. адаптивное меню гамбургер
- JavaScript/jQuery
на прошлом уроке, мы создали анимацию для кнопки гамбургер, без привязки к меню. на этом уроке привяжем к нашей кнопке адаптивное меню.
на мобильных ...
- 758. верстка кнопок на сайте
- HTML/HTML 5
какие кнопки обычно встречаются на сайте? я разделили бы их на два вида: кнопки внутри формы и кнопки-ссылки. и те и другие необходимо уметь верстать. ...
- 759. тестирование основных функций сайта с расширением selenium ide
- Софт/Софт для создания сайтов
здравствуйте. как известно, разработка web приложений это динамичный процесс, который требует постоянных доработок. в результате добавления ...
- 760. добавление класса по клику в javascript
- JavaScript/JavaScript Основы
на этом уроке, мы научимся добавлять элементу, по которому кликнул пользователь, класс, чтобы изменить его внешний вид, применяя стили, добавленного ...
- 761. обзор библиотеки jquery ui с примером
- JavaScript/jQuery
библиотека jquery ui (user interface) представляет собой набор шаблонных элементов для создания пользовательского интерфейса и является частью библиотеки ...
- 762. как изменить шапку сайта (часть 3)
- CSS/CSS3
в первой и второй части урока, мы заново создали шапку сайта, но этого не достаточно. при уменьшении ширины экрана до 1000 пикселей, элементы сайта ...
- 763. фильтрация по первым буквам на jquery
- JavaScript/jQuery
моему другу на собеседовании в одну it компанию, дали следующее задание: "как при помощи jquery отфильтровать данные из списка по первым буквам в ...
- 764. как установить utm метки на сайте через php. часть 1.
- PHP/PHP Основы
на этом уроке вы узнаете, что такое utm-метки, как установить их на сайте и как настроить получение данных из utm-меток на ваш e-mail.
что такое utm-метки? ...
- 765. циклы while и for в java
- Java/Java Основы
циклы в программировании – это повторяющиеся одинаковые действия. приведу пример из реальной жизни: "производственная машина на конвейере ...
- 766. основные операции в java
- Java/Java Основы
все представленные ниже операции на java пишутся внутри конструкции. данная конструкция автоматически генерируется netbeans-ом, при создании нового ...
- 767. типы переменных в java
- Java/Java Основы
в любом языке программирования переменная играет одинаковую роль и java здесь не исключение. переменная это ссылка на определенную ячейку в оперативной ...
- 768. введение и среда разработки для java
- Java/Java Основы
прежде чем начинать изучение java, нужно установить две программы: java developer kit (jdk) – это комплект для разработчика, включающий в себя компилятор, ...
для тех кто решил всерьёз заняться программированием, важно определиться для
какой платформы писать приложения. хотя кроссплатформенная разработка ...
- 770. как установить utm метки на сайте через php. часть 2.
- PHP/PHP Основы
на прошлом уроке мы узнали, что такое utm-метки и настроили get-запросы меток в скрытых полях формы. на этом уроке вы узнаете, как получить данные ...
в этой статье мы разберем основы ajax запросов. научимся настраивать и отправлять запрос, а также получать ответ от сервера.
классическая модель ...
- 772. манипуляции с атрибутами в jquery
- JavaScript/jQuery
метод attr() получает или устанавливает значение атрибута элемента на странице. если элемент не имеет такого атрибута, то возвращается значение ...
- 773. xml парсер строк
- XML/XML Основы
xml – расширенный язык разметки, описывающий какие-либо данные при помощи свободных тегов. это значит, что автор документа, придумывает названия ...
- 774. всплывающая подсказка в html
- HTML/HTML 5
использование всплывающих подсказок на html страницах, прекрасная возможность дать пользователю уточняющую информацию, в удобном для него виде ...
все устройства в интернете имеют свой уникальный адрес, который представляет из себя простой набор цифр. это можно сравнить с номером телефона. ...
- 776. верстка psd макета по bootstrap 4 сетке. часть 1
- CSS/CSS Основы
на этом уроке мы подготовимся к верстке сайта по psd макету, используя только сетку (grid system) от фреймворка bootstrap 4. научившись такому методу верстки, ...
- 777. настройка темы storefront для woocommerce
- Софт/Софт для создания сайтов
тема storefront специально разработана под плагин woocommerce и рекомендована к использованию под интернет-магазин самими авторами плагина. на чем основаны ...
- 778. svelte.js - фреймворк нового поколения
- JavaScript/JavaScript Основы
компонентный фреймворк svelte.js используется для создания интерфейсов без перезагрузки страницы и этим он очень похож на vue.js и react.js. но у него ...
регулярные выражения - это способ поиска совпадений шаблона с текстом для дальнейших манипуляций. наверняка многие из вас уже составляли простейшие ...
- 780. поиск числа фибоначчи
- JavaScript/JavaScript Основы
итальянский ученый леонардо пизанский вывел закономерную последовательность чисел, при которой каждое стоящее в ряду число, является результатом ...
- 781. автоматизация рутины с помощью python
- Python/Основы Python
все, кто хоть немного взаимодействуют с компьютером, неизбежно сталкиваются с однотипными задачами: скачивание видеороликов с youtube, переименование ...
- 782. css-эффект при наведении на меню
- CSS/CSS Основы
на чистом css можно создавать интересные и оригинальные "спецэффекты", один из которых мы сейчас подробно разберем. у нас есть список пунктов ...
- 783. введение в 3d преобразования c css
- CSS/CSS3
с введением css-преобразований элементы стало возможно сдвигать, поворачивать, наклонять, сжимать и растягивать. веб-дизайнеры наконец-то смогли ...
- 784. логические операторы в js
- JavaScript/JavaScript Основы
логические операторы используются вместе с ключевыми словами: for, if, while, do while и могут принимать только одно из двух значение true/false. всего в javascript ...
- 785. пример простого слайдера на javascript (#2)
- JavaScript/JavaScript Основы
в первой части урока мы нарисовали сам слайдер с использованием html и css, во второй части создадим кнопки prev / next и напишем javascript код для управления ...
- 786. как вставить изображение на веб-сайт
- HTML/HTML Основы
данная статья является логическим продолжением статьи «как уменьшить размер изображения без photoshop». доступность больших и качественных ...
- 787. как уменьшить размер изображения без photoshop
- HTML/HTML Основы
прежде чем использовать и публиковать изображения на веб-сайте, сначала их необходимо подготовить. подготовка включает в себя уменьшение веса ...
- 788. автоматическое создание резервной копии сайта на wordpress
- Софт/Софт для создания сайтов
сегодня вы узнаете о том, как настроить автоматическое резервное копирование сайта на wordpress. этот способ достаточно надежен и не зависит от ...
- 789. добавление иконок соцсетей на wordpress сайт
- Софт/Софт для создания сайтов
добавить иконки соцсетей на wordpress сайт можно с помощью обычного виджета text. находим в кастомайзере виджет text и добавляем его в первую колонку ...
- 790. анимированный градиент granim.js
- JavaScript/JavaScript Скрипты
на этом уроке мы научимся применять анимированные градиенты, используя javascript библиотеку – granim.js. вы увидите, как просто работать с этой замечательной ...
- 791. изменения темы storefront для разработчиков
- Софт/Софт для создания сайтов
я хочу вывести иконки социальных сетей в верхнем правом углу шапки сайта с помощью хуков. поскольку верхняя область у меня уже занята ссылками, ...
- 792. создание фильтров по атрибутам на woocommerce
- Софт/Софт для создания сайтов
в плагине woocommerce фильтрация товаров основана на атрибутах. атрибут - это разновидность товара по цвету, размеру, стилю, назначению. у разных товаров ...
- 793. варианты использования svg на сайтах. часть #2
- HTML/HTML Основы
создание svg круга
окружность рисуется при помощи svg элемента circle. атрибуты cx и cy указывают на x и y координаты центра круга. атрибут r равен радиусу ...
- 794. настройка yoast seo для магазинов на woocommerce. часть #2
- Софт/Софт для раскрутки сайтов
продолжаем разбирать настройки плагина yoast seo, здесь первая часть статьи.
отображение в поисковой выдаче / медиа
когда вы загружаете медиафайл, ...
- 795. как создать to do list на чистом css (часть 2)
- CSS/CSS Основы
4) позиционирование инпута и текста
.list ul label{
position: relative; / * относительное позиционирование * /
display: flex; / * отображать ...
- 796. настройка yoast seo для магазинов на woocommerce. часть #1
- Софт/Софт для раскрутки сайтов
на этом уроке разберем настройки популярного yoast seo плагина (версия 15.4) для использования в онлайн-магазинах, работающих на основе woocommerce плагина. ...
- 797. два плагина по оптимизации сайта на wordpress
- Софт/Софт для создания сайтов
robin image optimizer
плагин robin image optimizer один из немногих подобных плагинов, кто бесплатно оптимизирует (уменьшает вес) картинки на wordpress сайте. даже ...
- 798. css эффект потери фокуса и наоборот
- CSS/CSS Основы
весь эффект с фокусом строится на манипуляциях с фильтром blur. когда пользователь открывает страницу, то видит размытый фон и четкий заголовок. ...
- 799. похожие и сопутствующие товары на woocommerce
- Софт/Софт для создания сайтов
использование похожих и сопутствующих товаров в любом интернет магазине - это известный маркетинговый прием с целью выручить побольше денег. ...
- 800. 6 типов товаров на woocommerce
- Софт/Софт для создания сайтов
с помощью плагина woocommerce можно продавать 6 типов товаров:
простой товар
сгруппированный товар
внешний / партнерский товар
вариативный ...
- 801. ооп в javascript. инкапсуляция
- JavaScript/JavaScript Основы
инкапсуляция - это скрытие реализации какой-либо задачи в javascript коде не из вредности, а с целью защиты части кода от пользователя или программиста. ...
- 802. библиотека moment.js. работа с форматами
- JavaScript/JavaScript Основы
как вы поняли из прошлой статьи про диапазоны дат, что в нативном javascript неудобно работать с форматами дат. поэтому и была разработана библиотека ...
- 803. видеофон внутри текста на чистом css
- CSS/CSS Основы
как легко и оригинально оживить текст, не создавая никакой анимации? об этом вы узнаете на этом уроке. эффект красиво смотрится только на крупном ...
- 804. создаем круговую диаграмму с python и matplotlib
- Python/Основы Python
круговая диаграмма позволяет наглядно продемонстрировать доли разных значений в конкретном примере. имея форму пирога, она как нельзя лучше ...
- 805. как установить visual studio?
- C#/Основы C#
доброго времени суток! перед тем как начать программировать на c#, вам необходимо установить
интегрированную среду разработки visual studio community. ...
- 806. fetch запросы к серверу на javascript
- JavaScript/JavaScript Основы
для тестовых запросов, есть такой сервис jsonplaceholder. он имитирует фейковый сайт с базами данных, чтобы нам с вами было на чем потренироваться. отсюда ...
- 807. создаем круговую диаграмму с python и matplotlib. часть 2
- Python/Основы Python
как известно, людям всегда больше нравится интерпретировать картинки, чем текст. это подтверждается биологическим фактом, что 90% фактов, поступающих ...
- 808. варианты использования svg на сайтах. часть #3
- HTML/HTML Основы
svg текст
как работать с svg текстом? текст выводится внутри парного элемента text с указанием координат его отрисовки. управление внешний видом ...
- 809. создаем хаотичное движение объектов в игре с python и pygame
- Python/Основы Python
продолжаем совершенствовать игру asteroids c python и pygame. и на текущий момент, на игровом поле отображается один космический корабль, которым можно ...
- 810. проверка загрузки изображений с помощью javascript
- JavaScript/Java Основы
новички много раз уже слышали, что прежде чем загрузить изображения на сайт, то нужно их как следует сжать. поскольку не оптимизированная графика ...
- 811. canvas и javascript. кривые
- JavaScript/JavaScript Основы
в canvas можно нарисовать квадратичную кривую и кривую безье. скоро вы узнаете, что отличает эти кривые друг от друга, прочитав статью до конца. ...
- 812. sql запросы к базе данных. часть #1
- MySQL/SQL
мир в целом и интернет в частности, состоят из данных. в основе всех приложений лежат данные: социальные сети хранят данные о пользователях и ...
- 813. создаем игру с pygame и python. часть 2
- Python/Основы Python
в предыдущей статье мы начали создание проекта игры asteroids. для этого был создан базовый класс игры с конструктором и основными методами игры. ...
- 814. sql запросы к базе данных. часть #2.
- MySQL/SQL
агрегатные функции
когда нам нужно получить сумму, максимальное, минимальное или среднее значение хранящихся в базе данных чисел, то мы используем ...
- 815. sql запросы к базе данных. часть #3.
- MySQL/SQL
используя ключевой слово where и другие операторы, мы можем задавать условия для фильтрации строк. в фильтрах можно использовать следующие операторы: ...
- 816. создаем игру с pygame и python. часть 3
- Python/Основы Python
в предыдущей статье мы реализовали проект pygame, в результате чего на экран выводится окно с игровым полем, которое вы можете закрыть, нажав клавишу. ...
- 817. sql запросы к базе данных. часть #4
- MySQL/SQL
оператор join используется для объединения строк из нескольких таблиц в одну общую таблицу, на основе связанного столбца между ними. для таблиц ...
- 818. структуры данных на javascript
- JavaScript/JavaScript Основы
структурой данных называется способ организации или хранения данных для эффективного с ними взаимодействия. в программировании мы все время ...
- 819. продолжаем создание игры с pygame и python
- Python/Основы Python
в предыдущей статье мы создали и отобразили красивое игровое поле с помощью pygame и python. и на данный момент наша программа отображает фоновое ...
- 820. canvas и javascript. рисование фигур
- JavaScript/JavaScript Основы
тег canvas создает область на html странице, внутри которой можно рисовать разные фигуры и анимировать их при помощи javascript.
создание области для ...
- 821. создаем игру с pygame и python. реализация класса корабля
- Python/Основы Python
в предыдущих статьях про python и pygame мы создали и отобразили игровой объект в виде космического корабля. в сегодняшней статье мы создадим для ...
- 822. продолжаем создание космической аркады. управление кораблем
- Python/Основы Python
в прошлых статьях по созданию игры с python и pygame мы добились отображения корабля на фоне изображения космического пространства. но что можно ...
- 823. canvas и javascript. рисование линий
- JavaScript/JavaScript Основы
на этом уроке мы будем учиться рисовать линии, используя тег canvas и язык javascript. на предыдущем уроке мы рисовали геометрические фигуры. для начала ...
- 824. создаем игру с pygame и python. часть 7
- Python/Основы Python
продолжаем покорять космические просторы с python и pygame.в прошлой статье мы придали кораблю возможность управления с помощью клавиш.
в сегодняшней ...
- 825. canvas и javascript. дуги и окружности
- JavaScript/JavaScript Основы
сегодня мы научимся рисовать дуги и окружности. сделать это можно с помощью метода arc, который рисует дугу из центра в заданной точке с координатами ...
- 826. создаем игру с pygame и python. добавление границы игрового поля
- Python/Основы Python
в предыдущей статье мы добавили новые свойства к игровому объекту. в результате чего, наш космический корабль двигается и вращается! однако, ...
как преобразовать обычный список в массив, используя программу vscode и регулярные выражения? предположим вам нужно занести в базу данных сайта ...
- 828. canvas и javascript. анимация
- JavaScript/JavaScript Основы
замечательно то, что на canvas можно не только рисовать, но и анимировать объекты. для этого у javascript есть полный набор инструментов. вы узнаете, ...
- 829. canvas и javascript. пчела
- JavaScript/JavaScript Основы
на этом уроке нарисуем пчелу с помощью окружностей и анимируем ее так, чтобы она летала. создание анимации в javascript состоит из повторяющегося ...
- 830. счетчик обратного отсчета при помощи setinterval
- JavaScript/JavaScript Основы
например, по какой-то причине вам нужно перенаправить посетителей с одного сайта на другой. только сделать это без мгновенного редиректа в лоб, ...
- 831. обработчик события кнопки на javascript
- JavaScript/JavaScript Основы
на предыдущих уроках по javascript, мы научились получать и изменять элементы на страницах. но зачем это нужно, если можно сразу создать страницу ...
- 832. создание космической аркады с python и pygame. добавляем класс астероида
- Python/Основы Python
в предыдущей статье по python и pygame мы завершили создание логики для космического корабля. но корабль все еще один в пустом пространстве. пора добавить ...
- 833. ускоренное создание графичеких приложений в python. часть 1
- Python/Основы Python
чтобы создать графический интерфейс ваших окон в pyqt, вы можете выбрать два основных пути: можно использовать qt designer или вручную написать графический ...
- 834. создание анимации с python и pygame
- Python/Основы Python
создание анимации достаточно увлекательное занятие. и python как нельзя лучше подходит для этого. фреймворк pygame уже содержит встроенные методы ...
- 835. 5 полезных фишек google docs
- CSS/CSS Основы
google docs - это бесплатная альтернатива microsoft office, вполне удовлетворяющая потребности среднестатистического пользователя. google документы замечательны ...
- 836. пример верстки фотогалереи на css grid #2
- CSS/CSS Основы
на предыдущем уроке мы сверстали секцию с портфолио на css grid для десктопа. осталось сделать верстку адаптивной для различных мобильных устройств ...
распределение ширины сетки на фракции необязательно должно происходить в равных долях. если поставить вместо единицы цифру два, то мы удвоим ...
- 838. регулярные выражения в javascript #4
- JavaScript/JavaScript Основы
флаги в регулярных выражениях уточняют каким образом нужно искать, если это важно. в противном случае, флаги не обязательно добавлять к регулярному ...
- 839. регулярные выражения в javascript #3
- JavaScript/JavaScript Основы
термин квантификаторы в регулярных выражениях звучит пугающе, но по сути это специальные символы, задающие количество повторений. они призваны ...
- 840. регулярные выражения в javascript #2
- JavaScript/JavaScript Основы
продолжаем знакомиться с символьными классами у регулярных выражений.
символьный класс - слово:
\w - символ слова
символьный класс «\w» ...
- 841. регулярные выражения в javascript #1
- JavaScript/JavaScript Основы
принципы использования регулярных выражений в разных языках программирования более-менее одинаковые. на этом уроке мы посмотрим, как регулярные ...
- 842. клонирование объектов в javascript
- JavaScript/JavaScript Основы
из этой статьи вы узнаете, как создать клон объекта, то есть его точную копию. для примера создадим объект person, который нам нужно клонировать. ...
- 843. среда разработки anaconda для python
- Python/Основы Python
написание кода вручную, конечно же необходимое умение для программиста. то справедливо для начального этапа изучения языка, чтобы набить руку. ...
вы когда-нибудь задумывались, что происходит за кадром, когда вы открываете браузер и вводите адрес сайта url (унифицированный ресурсный указатель), ...
- 845. seo wordpress плагины
- Софт/Софт для создания сайтов
независимо от того делаете ли вы сайт на wordpress для себя или на заказ, базового функционала этой популярной cms будет явно недостаточно. перед нами ...
- 846. графическое приложение с таймером на c# и winform
- C#/Основы C#
управление таймером играет важную роль в разработке программ как на стороне клиента, так и на стороне сервера, а также в службах windows. с помощью ...
- 847. форма обратной связи на php с отправкой на e-mail
- PHP/PHP Основы
на этом уроке мы познакомимся с функцией mail (), на примере создания формы
обратной связи на php с последующей отправкой полученных данных на почту. ...
- 848. иконочные шрифты icomoon
- HTML/HTML Основы
сегодня мы поговорим о сервисе icomoon, который позволяет создавать шрифтовые иконки для различных проектов. что же это за шрифты и в чем их преимущества? ...
- 849. как сделать гифку из видео
- HTML/HTML Основы
на этом уроке я покажу, как буквально за считанные минуты можно бесплатно сделать гифку из видео с помощью онлайн-сервиса giphy. работать с данным ...
- 850. зачем нужен html тег code?
- HTML/HTML Основы
дорогие друзья! сегодня мы поговорим о html теге code. при написании конкретно этой статьи или любых других обучающих материалов, периодически необходимо ...
- 851. имитация капель дождя с помощью rainyday.js
- JavaScript/JavaScript Основы
больше не нужно ломать голову и писать много строчек кода для визуализации капель дождя, падающих на окно. замечательный скрипт на js rainyday.js представляет ...
- 852. как использовать свойство «float» в css
- CSS/CSS3
сегодня трудно себе представить современный сайт, при верстке которого не использовался бы элемент "float". для профессионала-верстальщика или ...
- 853. раскрывающийся список на javascript
- JavaScript/JavaScript Основы
когда мы имеем дело с большими вложенными списками, было бы хорошо сделать их как можно компактнее. javascript отлично справится с поставленной задачей. ...
- 854. как сделать текст по кругу на javascript
- JavaScript/JavaScript Основы
для создания текста по кругу, необходимо разбить текст на символы и применить к каждому символу свойство transform.
создание и стилизация текста ...
на этом уроке я покажу как установить и настроить статистику яндекс метрики на вашем wordpress сайте. наиболее простой и предпочтительный способ ...
- 856. свойство «float» на практике
- CSS/CSS3
эта статья является продолжением предыдущей статьи на тему использования свойства float. почему мы такое пристальное внимание уделяем этому ...
- 857. 6 лучших генераторов css-кода
- Софт/Софт для создания сайтов
как начинающие, так и опытные верстальщики не могли не заметить, что вместе с новыми возможностями в css3 технологиях, объем самого css-кода, существенно ...
- 858. css анимация падающих звезд
- CSS/CSS Основы
для создания анимации падающих звезд нам потребуется картинка зведного неба и сами звезды, созданные средствами html и css.
html-разметка и звездное ...
из этой статьи вы узнаете о 10 полезных онлайн-сервисах для веб-разработчиков, которые существенно упрощают работу с определенными рутинными ...
- 860. защита сайта на wordpress
- Софт/Софт для создания сайтов
на предыдущем уроке вы узнали какие seo плагины рекомендуется установить на любой wordpress сайт. на этом уроке вы узнаете как защитить ваш сайт и ...
- 861. шаблоны и флаги в js (регулярные выражения)
- JavaScript/JavaScript Основы
регулярные выражения нужны для поиска по тексту, для замены в тексте или для проверки на совпадение с неким шаблоном. это когда вы регистрируйтесь ...
- 862. вывод записей wordpress без плагина
- Софт/Софт для создания сайтов
приветствую вас друзья! на этом уроке мы научимся обращаться к базе данных wordpress-а и выводить на сайте нужную нам информацию, в нужном месте и ...
- 863. кто такие пользователи в wordpress?
- Софт/Софт для создания сайтов
большинство блоггеров или авторов, ведущие свои сайты на wordpress никогда не касаются вкладки в панели управления: "пользователи". по большому счету ...
- 864. типы полей ввода (html input)
- HTML/HTML 5
в статье про формы, тема полей ввода (input) умышленно осталась не затронутой, поскольку она обширная и заслуживает отдельного внимания. элемент ...
- 865. html теги и атрибуты форм
- HTML/HTML 5
пожалуй уже не один современный сайт не может обойтись без отправки данных пользователя на сервер. это может быть заявка на обратный звонок, ...
- 866. креативный css hover-эффект для меню навигации
- CSS/CSS Основы
чтобы пользователю было веселее переходить по ссылкам, веб-разработчики придумывают креативные hover-эффекты. зачастую хватает одного css, без ...
- 867. имитация печатной машинки при наведении на текст
- CSS/CSS Основы
пропишем внутри ссылок data*-атрибуты с названиями ссылок. это нужно для передачи этих названий в функцию attr для получения hover-эффекта.
<ul> ...
- 868. e-mail рассылка на wordpress
- Софт/Софт для создания сайтов
главнейшим инструментом для заработка в интернет-маркетинге является e-mail рассылка. совершенно не важно, продаете ли вы собственные товары ...
- 869. установка node + gulp для windows 10
- JavaScript/JavaScript Основы
первым делом нужно установить платформу node js, чтобы разработчикам были доступны команды npm. через команду npm, мы в дальнейшем установим и сам ...
- 870. создаем калькулятор на c# и winforms
- C#/Основы C#
в сегодняшней статье мы создадим простой калькулятор способный выполнять сложение, вычитание, умножение, а также деление. и все это мы реализуем ...
для популярного редактора vs code существует огромное количество плагинов для разных задач. цель данной статьи - составить чек лист самых нужных ...
- 872. фавикон для сайта
- HTML/HTML Основы
по умолчанию все браузеры ищут фавикон в корне сайта, но ничего не случиться, если мы поместим фавикон в папку с картинками и укажем пути в хедере ...
- 873. html теги для текста
- HTML/HTML Основы
в интернете мы то и дело ищем какую-нибудь информацию, чаще всего это текст и поэтому не случайно всех больше html тегов предусмотрено именно для ...
- 874. как сделать таблицу в html
- HTML/HTML Основы
бывалые вебмастера до сих пор с содроганием вспоминают времена, когда целые сайты верстались на таблицах. это вам не email-рассылку сверстать, ...
- 875. адаптивная верстка на flex (часть 2)
- CSS/CSS Основы
на прошлом уроке мы создавали html структуру для макета с блок постами, а на этом уроке расставим посты в соответствии с макетом, максимально используя ...
django - это python веб-фреймворк для бекенда, который позволяет быстро создавать безопасные сайты и приложения. фреймворк имеет набор готовых компонентов, ...
- 877. создаем оконное приложение для windows с c#
- C#/Основы C#
до сих пор мы создавали только консольные приложения.
но программисты на c# широко используют формы для создания пользовательских интерфейсов. ...
- 878. 3 способа удаления дубликатов из массива в js
- JavaScript/JavaScript Основы
существует три способа удаления дубликатов из массива. в данной статье рассмотрим каждый из них и выясним наиболее подходящий.
первый способ ...
- 879. javascript анимация на фоне
- JavaScript/JavaScript Основы
на всей странице будет происходить плавное движение вверх разноцветных квадратиков разного размера.
подготовка фона для анимации
создадим ...
- 880. автоматически загружаемый popup после загрузки страницы (часть #2)
- JavaScript/JavaScript Основы
наше popup окно необходимо снабдить крестиком, кликнув по которому, пользователь избавится от надоедливой рекламы.
.close{
position: ...
- 881. операции маскировки над изображениями с python и opencv
- Python/Основы Python
изображение есть набор данных, закодированных в числовой последовательности. извлекая числа, затем можно проводить с ними различные операции. ...
- 882. текст, обтекающий картинку нестандартной формы
- CSS/CSS Основы
все начинающие изучать css-свойства, уже наверняка слышали про свойство float, с помощью которого текст обтекает картинку справа или слева от нее. ...
- 883. таймер обратного отсчета на javascript
- JavaScript/Java Основы
на этом уроке, мы сделаем таймер обратного отсчета на javascript, используя уже готовую верстку на html и css. если на странице вашего сайта или лендинга ...
- 884. обработка изображений с помощью numpy
- Python/Основы Python
модуль numpy и python позволяют создавать массивы произвольной длины и заполнять их некоторыми значениями. так как изображение можно представить ...
- 885. как изменить полосу прокрутки на css
- CSS/CSS3
на сегодняшний день, можно очень простым способом изменить внешний вид всем надоевшей серой полосы прокрутки. и для этого не нужно подключать ...
- 886. фильтр категорий товаров на javascript (часть 3)
- JavaScript/Java Основы
что вообще должно происходить с этими кнопками и карточками товаров? при клике пользователя по черной кнопке, на сайте должны остаться только ...
у вас на руках есть готовый дизайн для футболки. что с ним делать дальше? как получить готовый продукт в свой интернет-магазин? для начала нужно ...
- 888. анимация с пузырьками на javascript
- JavaScript/JavaScript Основы
много реалистичные пузырьков разных размеров, с разной скоростью поднимаются вверх, лопаясь на ходу. как такое возможно сделать на javascript? перед ...
чтобы сделать свою версию этого дизайна, на первых порах вам не нужен photoshop и дизайнерские навыки. простые вещи можно сделать легко и быстро, ...
интригующее название «заработок на продаже товара, которого у вас нет нет» никакая не мошенническая схема, а вполне реальный бизнес. который ...
конструктор яндекс карт
независимо от этого куда вы в дальнейшем будете вставлять яндекс карту, первый шаг всегда начинается с конструктора ...
- 892. кастомизация иконок fontawesome
- CSS/CSS Основы
мне нравиться использовать шрифтовые иконки из библиотеки fontawesome, потому что их легко кастомизировать под любую цветовую гамму сайта.
html разметка ...
что такое a/b тестирование сайта
a/b тестирование - это сравнение двух страниц с разным дизайном, но в одинаковых условиях, чтобы выяснить какая ...
что такое копирайтинг?
копирайтинг - это умение написания текста, не ради выражения чувств или собственного мнения. а способность подбирать ...
- 895. практический пример использования функции attr в css
- CSS/CSS Основы
рассмотрим на примере анимации текста, как можно использовать css функцию attr.
создание, позиционирование и стилизация текста
data-text представляет ...
- 896. css grid layout #2 (позиционирование ячеек)
- CSS/CSS Основы
в css grid можно позиционировать отдельно взятую ячейку (grid item), как по оси x, так и по оси y. поэтому, все рассматриваемые css свойства будут относиться ...
- 897. как установить и настроить eslint
- JavaScript/JavaScript Основы
плагин eslint - это лучший помощник для отлавливания ошибок в процессе написания javascript кода. предупреждая нас о них прямо на лету в редакторе кода. ...
- 898. эффект стирания верхнего слоя на javascript
- JavaScript/JavaScript Основы
пользователь водит мышкой по экрану и автоматически стирается верхний слой. под верхним слоем находится фоновая картинка. немного движений ...
- 899. cоздание списка из массива на js
- JavaScript/JavaScript Основы
перед нами стоит задача создать и вывести на страницу список книг из массива, хранящегося в базе данных на сервере. на практике это значит, что ...
- 900. основы ооп в javascript
- JavaScript/JavaScript Скрипты
javascript является объектно-ориентированным языком (ооп) и главную роль в нем играет объект. он может в себе содержать методы, свойства, а также любой ...
- 901. сортировка массива на js
- JavaScript/JavaScript Основы
метод sort часто используется для сортировки массивов в js, но необходимо знать о некоторых нюансах при работе с данным методом. все дело в том, ...
- 902. быстрая сортировка массива в js
- JavaScript/JavaScript Основы
из этого урока вы узнаете об одном из самых популярных алгоритмов сортировки массивов – быстрая сортировка (quick sort).как работает алгоритм быстрой ...
- 903. стрелочные функции в js
- JavaScript/JavaScript Основы
стрелочные функции появились начиная с es6 и очень сильно изменили качество написания кода. так чем же они хороши? главная причина появления ...
- 904. map в javascript
- JavaScript/JavaScript Основы
map - это новая структура данных добавленная в es2015. объект map похож на js-объект, в том плане что он также состоит из пар ключ значение. карта map очень ...
- 905. использование переменных в css
- CSS/CSS Основы
css переменные призваны уменьшить дублирование кода в таблице стилей, улучшить его читаемость и придать больше гибкости. css переменные позволяют ...
- 906. set в javascript
- JavaScript/JavaScript Основы
set (множество) - это объект, в котором могут хранится только уникальные значения любого типа данных (примитивы и другие типы объектов).
создание ...
- 907. делаем вместе анимированное выпадающее меню на css3
- CSS/CSS3
в этом уроке мы научимся с вами делать горизонтальное анимированное выпадающее меню на
css3, при наведении курсором на его категории, будет меняться ...
- 908. css фреймворк materialize (установка)
- CSS/CSS Основы
materialize - это css фреймворк для создания сайтов, основанный на принципах material design. если сказать проще, то это набор инструментов для верстки и готовые ...
- 909. как установить и настроить jshint
- JavaScript/JavaScript Основы
при написании javascript кода, новички неизбежно допускают ошибки и это нормально. плагин jshint как раз позволяет вовремя увидеть все допускаемые ...
- 910. как использовать шорткоды woocommerce
- Софт/Софт для создания сайтов
шорткод woocommerce - это короткий код для вывода товаров, страниц и категорий. при запуске короткий код развернется в полноценный код. шорткоды woocommerce ...