AlexZaw

<div class="wrap"> <div class="block">item1</div> <div class="block">item2</div> <div class="block">item3</div> <div class="block">item4</div> </div> .wrap{ display: grid; grid-template-columns: repeat(4, max-content); justify-content: center; max-width: 900px; margin: 0 auto; border: 1px solid #000; } .block{ padding: 15px 30px; } .block:nth-child(1){ background-color: #31D9FF; } .block:nth-child(2){ background-color: #67B2FF; } .block:nth-child(3){ background-color: #C289FF; } .block:nth-child(4){ background-color: #FF81FF; } .block:nth-child(4n + 1), .block:nth-child(4n + 4) { position: relative; } .block:nth-child(4n + 1):before, .block:nth-child(4n + 4):before { content: ''; position: absolute; z-index: -1; top: 0; right: 100%; width: calc(100vw - 100%); height: 100%; } .block:nth-child(4n + 1):before{ background: inherit; } .block:nth-child(4n + 4):before { box-shadow: 100vw 0 0 0 #FF81FF; } See the Pen by Alexandr (@AlexZaw) on CodePen.

Прям захотелось чтобы мою работу так же по косточкам разобрали 🙂

Потому, что style.css не сохранен 🙂

Судя по указанному пути папка с вашим шрифтом лежит в одной папке с файлом css т.е. структура выглядит примерно так: . | index.html | style.css | \—fonts Lato-Italic.ttf так ли это на самом деле?

Потому, что ширина сайдбара в 330 пикселей это ширина вместе с margin-ами слева и справа по 10 пикселей. Ну а так как margin это внешний отступ и он не закрашивается фоном сайдбара, отсюда и расстояние

а я и не говорил что HTML описывает внешний вид, хотя у него и есть такие возможности. Пусть немного, но есть. Ну вот как минимум по этому критерию CSS не проходит в ЯП 🙂 Абсолютно эквивалентны и абсолютно во всех случаях можно заменить как универсальное свойство отдельными свойствами, так и наоборот. Другое дело что некоторые отдельные свойства не имеют смысла в отрыве от других, но заменить можно всегда

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

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

Назовите хоть один язык где ничего не надо зубрить и все интуитивно понятно 🙂 background-color можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона. Т.е. этот "гладкий" фон лежит под градиентом. Он там есть и работает, но его просто не видно так как его сверху закрывает градиент. В том, что ваш "гладкий" фон на самом деле присутствует можно убедиться задав полупрозрачный градиент. Градиенты это не цвет фона, это фоновое изображение Это как покрасить обои на стене и на них повесить картину. Фоном (background-color)будут являться обои, а картина будет градиентом, т.е. background-image Если вы поклеите обои поверх картины вы ведь не будете удивляться почему вдруг картины не стало видно? Так и здесь

Все удобно и логично если знать как он работает: Предупреждение: background-color можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона. https://developer.mozilla.org/ru/docs/Web/CSS/background

Потому, что слой с обычным фоновым цветом (другими словами это обычное свойство background-color) всегда находится в самом низу. А вот положением градиентов которые на самом деле задаются с помощью background-image мы можем управлять

Можно так: <div class="box">Some text</div> .box{ position: relative; margin: 50px; width: 400px; height: 200px; background: url(http://placekitten.com/50), #fff ; background-repeat: no-repeat; background-position: calc(100% - 10px) calc(100% - 10px); border: 15px dashed #000; background-clip: content-box; } .box:after{ position: absolute; content: ''; top: -15px; left: -15px; bottom: -15px; right: -15px; background-image: linear-gradient(to right, #361D10 50%, #E04E39 50%); z-index: -1; } или так: <div class="box2">Some text</div> .box2{ width: 400px; height: 200px; border: 15px solid transparent; border-image: linear-gradient(to right, #361D10 50%, #E04E39 50%); border-image-slice: 1; background-image: url(http://placekitten.com/50); background-repeat: no-repeat; background-position: calc(100% - 10px) calc(100% - 10px); }

Может он не верстает, может вы не верстаете, но это не значит что никто не верстает для инвалидов. Или они не люди? Вас уже носом в спеку ткнули, а вы продолжаете упорствовать.

Опять упс: Вопрос ведь и был про то, почему для UL атрибут type считается устаревшим, а для OL нет. А вы, зачем то, начали показывать результаты валидации которые и так были озвучены в первом сообщении 🙂

Упс:

Все верно, только если брать индексы, то indexOf(20, -2) ищет с 10 по 11

Roderen да нет, всегда все нормально было. Если переживаете, то можете заранее предупредить клиента, что перевод будет на другую фамилию. Ну или, если не проходили верификацию личности, заведите новый аккаунт на сайте.

Мне без всяких проблем переводили деньги на карту сестры. Просто уточняли правильно ли я указал данные. А вообще, если вам лучше уточнить возможность смены фамилии у администрации weblancer.

Все ваши рассуждения выше этой строки верны. Только не 30,а 10 Ведь вы ищете scores.lastIndexOf(10,-5) ,а так все правильно Нет. indexOf всегда ищет слева направо от указанного элемента или от начала массива, если второй параметр (в данном случае -2) не указан, до первого совпадения. Если совпадение не было найдено до конца массива то возвращает -1 lastIndexOf всегда ищет справа налево от указанного элемента (или от конца массива если не указан второй параметр) до первого совпадения. Если совпадение не было найдено до начала массива то возвращает -1 Да. Только не забывайте что поиск по строкам регистрозависимый. Т.е. 'Тестовая строка'.indexOf('тестовая') вернет -1 Тут видимо опечатка? 🙂 Если не указан индекс с которого начинать поиск то indexOf с начала идет вправо. Про lastIndexOf верно.

Отсчет идет с указанного элемента, т.е. в вашем случае со второго с конца. Причем указанный индекс включается в поиск. Например если бы вы искали в arrNames строку "Антон" начиная с минус второго элемента то вам бы вернулся индекс этого элемента (в вашем случае 7) так как он подходит под условие. Ну или применительно к scores использование и scores.indexOf(20, -2) и scores.lastIndexOf(20, -2) вернет вам цифру 20 которая встречается на 10 индексе Точно так же как если бы индекс был бы положительным. indexOf ищет совпадение слева направо начиная с указанного элемента до первого совпадения или до конца массива, lastIndexOf ищет совпадение справа налево начиная с указанного элемента до первого совпадения или до начала массива.

Значит либо вы что-то не так сделали, либо проблема где-то в другом месте. Описанный мной способ прекрасно работает для приведенного куска кода. .main-menu li li { padding-left: 15px; /* line-height: 40px; */ background-color: #ffffff; width: 190px; padding-top: 15px; /*новое*/ } .main-menu li li:last-child { padding-bottom: 15px; /*новое*/ } .main-menu > li { background-color: #2980b9; width: 200px; /* line-height: 40px; */ border-bottom: 2px solid #2c3e50; } .main-menu a { display: block; /* height: 40px; */ width: 190px; }

Уберите или уменьшите line-height у li и уменьшите высоту у ссылок.

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

innerHTML переписывает не документ полностью, а только содержимое конкретного элемента. Сама страница при этом остается прежней. Это маленько не так работает. Почитайте вот тут про навигацию по формам: https://learn.javascript.ru/form-elements не понял вопроса. У вас один вариант меняет содержимое, а второй просто получает элемент.

В данном случае отменяет действие браузера по умолчанию. По умолчанию, при нажатии кнопки submit браузер отправляет форму, return false отменяет это действие, из-за чего форма не отправляется и открытая страница остается прежней. Если по простому, то да. Естественно он подвиснет, ведь внешний цикл в таком случае выполняется 50000 раз, а внутренний аж (барабанная дробь) Оба способа прекрасно работают и делают именно то, что вы и написали. Просто вы не успеваете увидеть всю работу кода, так как он слишком быстро меняет содержимое <p id="result"></p> Вы при каждом проходе цикла заменяете содержимое result на последующий элемент массива. В чем легко убедиться расставив брейкпоинты в инструментах и прогнав цикл по шагам. Если хотите что-бы в строку выводился каждый элемент массива, то сделайте так: result.innerHTML += arr[i]; или так: document.getElementById("result").innerHTML += arr[i]; Не понял вопроса про форму и просто <p> Способов вывода информации существует несколько, и все они правильные 🙂 Можно с помощью innerHTML просто писать текст и теги (и причем теги будут работать как будто они написаны в html), можно использовать textContent который выведет теги просто как текст, а можно создавать создавать элементы с помощью createElement, цеплять их к другим элементам и потом выводить на экран целыми блоками 🙂 Все зависит от ситуации.