Верхний правый угол на сайте: главные фишки и советы по использованию

В верхнем правом углу какого элемента или страницы? Если речь идет о веб-странице, то в верхнем правом углу обычно располагается кнопка "Вход"/"Выход", "Регистрация"/"Авторизация" или иконка пользовательского профиля.

Пример кода для реализации кнопки "Вход"/"Выход" в верхнем правом углу веб-страницы:

HTML:

  Войти

CSS:

.user-login {
  position: fixed;
  top: 0;
  right: 0;
  padding: 10px;
}
.user-login a {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
}
.user-login a:hover {
  background-color: #286090;
  border-color: #204d74;
}

Кнопка "Вход" будет расположена вверху и справа на странице с ссылкой на страницу логина. При наведении курсора на кнопку изменится фоновый цвет.

Авторизованный пользователь может также увидеть кнопку "Выйти", а для неавторизованных пользователей эта кнопка будет скрыта. Пример можно реализовать с помощью JavaScript или PHP. Например, для JavaScript можно использовать следующий код:

JS:

var userStatus = false; // Флаг авторизации пользователя
var loginBtn = document.querySelector('.user-login a');
if (loginBtn) { // Проверяем, что кнопка существует
  if (userStatus) { // Если пользователь авторизован, меняем текст кнопки на "Выйти"
    loginBtn.textContent = 'Выйти';
    loginBtn.addEventListener('click', function() {
      // Реализация выхода из системы
    });
  } else { // Если пользователь неавторизован, скрываем кнопку
    loginBtn.style.display = 'none';
  }
}

Этот код проверяет статус пользователя и в зависимости от него меняет текст кнопки и вызывает соответствующий обработчик события.

Также можно реализовать кнопку авторизации/регистрации с помощью модального окна, которое будет открываться при нажатии на кнопку. Пример кода для реализации модального окна можно посмотреть, например, здесь: https://www.w3schools.com/howto/howto_css_modals.asp.