LabEx
ВходРегистрация

Отключить выбор содержимого с помощью CSS

Beginner

This tutorial is from open-source community. Access the source code

Введение

В этом лабе мы углубимся в программирование CSS и исследуем свойство user-select. Эта лабораторная работа旨在教您如何禁用网页中某些元素的选择功能，这在防止用户复制内容方面可能会很有用。在本实验结束时，您将更好地理解如何使用user-select属性及其对网页设计的影响。

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 88%. Он получил 100% положительных отзывов от учащихся.

Отключить выбор

В ВМ уже предоставлены index.html и style.css.

Чтобы сделать содержимое элемента невыбережаемым, добавьте в селектор CSS свойство user-select: none. Однако этот метод не является полностью безопасным для предотвращения копирования содержимым пользователями.

Пример:

<p>You can select me.</p>
<p class="unselectable">You can't select me!</p>

.unselectable {
  user-select: none;
}

Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили лабораторную работу "Отключить выбор". Вы можете практиковаться в других лабораторных работах в LabEx, чтобы улучшить свои навыки.