Ответы пользователя по тегу HTML
  • Как сделать так, чтобы при нажатии не исчезало?

    Метод называется checkbox hack.
    Мы на самом деле используем checkbox и его превосходное свойство работать даже при нажатии на метку, которая с ним ассоциирована. Таким образом мы скрываем сам нативный checkbox, а его метку стилизуем так, как нам надо, хоть в виде кнопки, хоть в виде чего угодно. И вместо :active у кнопки проверяем :checked у чекбокса
    https://css-tricks.com/the-checkbox-hack/

    А вот ещё набор идей
    https://codepen.io/
    В поиске наберите "toggle-switch"

    И вот что-то похожее на ваш случай
    Ответ написан
    7 комментариев
  • Нужны ли везде дивы и как должна выглядеть верстка?

    Бри́тва О́ккама (иногда ле́звие О́ккама) — методологический принцип, в кратком виде гласящий: «Не следует множить сущее без необходимости» (либо «Не следует привлекать новые сущности без крайней на то необходимости»).

    Это главный принцип и верстки, и программирования.

    1. Оборачивайте элемент в div (или другой контейнер), если вы точно знаете, зачем вы это делаете, и без этого нельзя обойтись.

    2. Не вставляйте везде бездумно div. Почитайте про семантическую вёрстку, и используйте разные элементы-обёртки для разных типов контента.

    https://htmlacademy.ru/blog/html/semantics
    Ответ написан
    1 комментарий
  • Как правильно делать большие сайты? обязательно ли писать каждую страницу по отдельности?

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

    Итого, есть три пути:

    1. Беспроигрышный. Это Wordpress. Берете, делаете, все счастливы. Туториалов миллиарды, плагинов ещё больше, всё будет зашибись. Проблема одна: если надо будет тонко настраивать, то надо будет хоть немного изучить PHP.

    2. Когда надо быстро что-то добавить, даже с мобилы или с компьютера девушки, и чтобы оно сразу отобразилось на сайте, то либо смотрим в сторону п.1, либо если не хотите изучать PHP, выбираете себе CMS на базе Javascript. Есть даже так называемые headless cms, которые генерируют вам только JSON, а вы у себя на фронтенде сами его обрабатываете и рисуете всё на основе полученных данных.

    Это самый сложный вариант из трёх

    Вот список некоторых из таких CMS
    https://jamstack.org/headless-cms/

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

    Сразу посоветую вам Astro https://astro.build/

    Прелесть Astro в том, что новый контент вы можете писать в Markdown. Это такой простейший язык разметки текстовых документов. Вы сможете его выучить за час, не больше. Там всё настолько интуитивно и просто, что больше времени вам не понадобится. При этом формат мощный, убедиться в этом можно, посмотрев почти любой репозиторий на Гитхабе. Практически каждый из них имеет файл README.MD, где как раз всё написано в Markdown (MD)

    В Astro вам надо будет создать несколько шаблонов astro (html). Шаблон хедера, футера, сайдбара, основного контента, разных типов страниц (статья, список статей, и т.д.). И в этих шаблонах будет указано, где нужно выводить сгенерированный из Markdown контент. И далее новые странички вы будете добавлять путём добавления в соответствующие папки файликов с Markdown разметкой. Это очень просто, быстро и не напряжно.

    После добавления этих файликов вы запустите генерацию сайта, и Astro сгенерирует вам кучу готовых html страничек, которые вы просто зальёте на сервак. Профит!

    Берите youtube, набирайте там "Astro markdown", и изучайте туториалы. Процесс всего этого чрезвычайно прост, вы много времени не потеряете, зато сэкономите себе массу времени на создании новых материалов на сайте

    Можете посмотреть и другие генераторы статических сайтов тут https://jamstack.org/generators/
    Ответ написан
    Комментировать
  • Почему автоматически добавляется закрывающий тег?

    Дело в том, что инструменты разработчика оперируют не разметкой, а DOM.

    Как браузер отображает вам страницу?
    Браузер парсит текст HTML, превращая этот текст в программные объекты, которые уже записывает в память, чтобы можно было с этими объектами быстро работать прямо в памяти.
    Структура этих объектов в памяти называется DOM - Document Object Model. Т.е. это программная модель того, что вы там понаписали в HTML-тексте.
    Фактически браузер уже забывает о самом тексте, и работает с этими объектами.
    Так же, браузер знает, с кем он имеет дело, поэтому "старается" по максимуму "исправить" все ваши ошибки в HTML, пытается понять, что вы имели ввиду и хоть что-нибудь вывести на экран.

    А когда вы открываете Инструменты разработчика, то браузер берет эти объекты из памяти и просто отображает их в виде знакомых человеку тегов HTML. Оригинальный текст уже давно забыт. Поэтому все теги в инструментах будут закрыты, все лишние символы пропущены, всё будет красивенько и чистенько.

    Насколько мне известно, поделать с этим ничего нельзя
    Ответ написан
    Комментировать
  • Как найти иконки OK и VK в CSS content: "\f14b";?

    Вижу, что у вас это при помощи шрифта сделано.
    Можете используемый шрифт скачать и посмотреть, что там внутри. fa - это скорей всего font awesome.
    f263: https://fontawesome.com/v4/icon/odnoklassniki
    f189: https://fontawesome.com/v4/icon/vk

    Вы можете также:
    - Найти другой шрифт, в утром есть все нужные вам иконки
    - Сделать такой шрифт самостоятельно. Это не так сложно. Вы просто находите SVG изображения социальных сетей, а потом на каком-то сервисе типа https://icomoon.io/, https://fontello.com/ (тут, похоже, уже есть нужные иконки) генерируете из этих иконок кастомный шрифт. И в CSS там где нужно показать иконку, указываете этот шрифт.
    Ответ написан
    Комментировать
  • Кнопка - переключатель на jQuery?

    Вот идея кастомного чекбокса на CSS без всякого JS.
    https://codepen.io/vitiok78/pen/pmbyzE
    Ответ написан
    Комментировать