Я создал две кнопки css и хочу переместить их ниже активности клиента прогноза заголовка. Я использовал кодировку css с некоторыми styles , поэтому код может выглядеть больше. Пожалуйста, потратьте немного времени и дайте мне решение. Я делюсь своим кодом ниже.
Я получаю результат как: Пожалуйста, помогите мне переместить кнопки под кампанией с forecast customer activity курсом. Я хочу, чтобы результат был следующим:
Vinoth Kumar 26 окт. 2016, в 15:50
Поделиться
У вас есть некоторые проблемы с форматом вашего HTML. В некоторых местах у вас отсутствуют закрывающие теги. Дополнительные закрывающие теги в других. В нескольких открывающих тегах отсутствует закрывающий тег> в конце. Я бы сначала все исправил, а потом посмотрел, где ты.
user1289451 26 окт. 2016, в 13:55
Черт возьми . с этим кодом положение кнопки — наименьшая из ваших проблем ..
Lidaranis 26 окт. 2016, в 13:55
Кроме того, почему в вашем коде есть блок , и при этом все же выполняются встроенные стили? Не то чтобы один из них был отличным вариантом, но почему вы делаете оба?
Как переместить кнопку в html
Мне нужно переместить кнопки в правую часть header, уже перепробовал много способов, ничего не получается, прошу о помощи. HTML:
Про нас
Буду очень признателен!
Отслеживать
задан 25 фев 2022 в 8:05
5 1 1 серебряный знак 5 5 бронзовых знаков
Можно поподробнее в чем конкретно проблема?
25 фев 2022 в 8:11
@tomato-magnet-regulato Я хочу переместить кнопку «О нас» и «Управление БД» влево. Но не получается, уже и в css и в html дописывал код, ничего не получается
25 фев 2022 в 8:19
@tomato-magnet-regulato ты что-нибудь понял??
25 фев 2022 в 8:20
@ПростаMiha Ну извините, я плохо объясняю
25 фев 2022 в 8:20
Кароче проблема в том что кнопка не хочет перемещаться влево
25 фев 2022 в 8:21
Отслеживать
ответ дан 25 фев 2022 в 8:21
3,522 1 1 золотой знак 4 4 серебряных знака 22 22 бронзовых знака
Нет, вот так: Rassel Studio_____________»О нас» «Управление БД»
25 фев 2022 в 8:22
я переделал, может так?
25 фев 2022 в 8:24
Да!! Именно так!
25 фев 2022 в 8:24
Спасибо большое!
25 фев 2022 в 8:24
господи сколько сложного css 🙂 а просто float: right нонче не в почете? 🙂
– user467825
25 фев 2022 в 8:25
html
css
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как переместить кнопку в html?
Хочу переместить кнопку в право, но как это делать? И как ещё убрать линии на кнопке? P.s хотел ещё спросить. Как сделать задний фон этой шапки другим цветом? допустим красным
Вопрос задан более трёх лет назад
6051 просмотр
Комментировать
Решения вопроса 2
Арсений Матыцин @ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
С помощью CSS. В данном кейсе для смещения кнопки отлично подойдет flex, с марджином или space-between-ориентацией.
А фон просто через background-color.
Ответ написан более трёх лет назад
Кнопка «Наверх»: как создать с CSS и jQuery
Кнопка «Вверх к началу» — это то, что многие из вас, вероятно, видели на многих веб-сайтах. Это стрелка, которая появляется в правом нижнем углу веб-страницы при ее прокрутке. Когда вы нажимаете, она возвращает вас к началу страницы. Если вы хотите добавить кнопку «Наверх» в процессе разработки сайта, или просто интересуетесь, как вы можете создать её самостоятельно, добро пожаловать на борт!
Вернуться наверх
CSS стили для кнопки
Добавляем иконку
Добавляем функциональность с jQuery
Появление и исчезновение кнопки
Подъём наверх
Демо
Наш код будет состоять из двух частей, стилей CSS и маленького скрипта jQuery. Давайте начнем с CSS.
CSS стили для кнопки
Мы начнем с создания стилей и разметки для нашей кнопки. Вот часть HTML:
Кнопка будет состоять только из одного якорного тега с id кнопка. Мы также включаем ссылку на библиотеку FontAwesome, чтобы можно было использовать значок для нашей кнопки.
Поскольку кнопка является элементом связки, а связки по умолчанию являются встроенными элементами, нам нужно изменить свойство display на встроенный блок, чтобы мы могли назначать ему размер.
Давайте сделаем квадратную кнопку 50х50 px с закругленными углами в 4px. Мы придадим ей ярко-оранжевый цвет и по 30px с каждой стороны. Фиксированная позиция всегда позволяет нашей кнопке оставаться в том же месте, когда мы прокручиваем страницу, а z-index очень большого значения, что кнопка всегда перекрывает другие элементы веб-сайта. Когда мы наводим курсор на кнопку, курсор меняется на указатель, а фон становится темно-серым. Чтобы сделать переход плавным, мы назначим переход на 0,3 секунды для свойства background-color. Также, когда мы нажимаем кнопку, цвет фона также изменяется и становится немного светлее.
Добавляем иконку
Сейчас наша кнопка пустая, давайте добавим на неё иконку. Мы делаем это, добавляя : :after псевдо=элемент типа этого:
Мы собираемся выбрать значок из самой популярной библиотеки шрифтов FontAwesome. Начнем с иконкой Chevron Up.
Чтобы отобразить её в псевдоэлементе, установите значение FontAwesome для тега font-family и назначьте значение Unicode для вашего значка в content.
Также убедитесь, что высота вашей линии равна высоте вашего значка, если вы хотите, чтобы он был центрирован по горизонтали.
Добавляем функциональность с jQuery
В этом подразделе мы поговорим о том, как собственно сделать кнопку рабочей. Самый простой способ это сделать — использовать JavaScript библиотеку jQuery. Для начала нам нужно добавить jQuery в HTML разметку. Добавьте эту строку прямо перед тем как закрыть тег body.
Сейчас мы можем написать наш скрипт используя синтаксис jQuery. Добавьте этот скрипт после строки jQuery:
Давайте поближе посмотрим на этот скрипт. Вы, наверно, заметили первую строку кода:
jQuery(document).ready(function()
Запускать код внутри этой функции стоит только в том случае, если документ полностью загружен. Это отличный способ предотвратить ошибки, если ваш код JavaScript хочет внести изменения в части веб-страницы, которые не полностью загружены в браузере. Код, который мы запускаем после документа, полностью загружен и состоит из двух основных блоков кода, каждый из которых выполняет свою собственную работу. Первая часть скрипта заставляет нашу кнопку появляться и исчезать после того, как прокрутка страницы достигает определенной точки. Вторая часть делает прокрутку страницы вверх после нажатия на кнопку. Давайте рассмотрим каждый из них подробно.
Появление и исчезновение кнопки
Вот код, который отвечает за эту функцию:
var btn = $('#button'); $(window).scroll(function() < if ($(window).scrollTop() > 300) < btn.addClass('show'); >else < btn.removeClass('show'); >>);
Сначала мы объявляем переменную btn и назначаем ей ID button, так что нам будет легче обратиться к нему позже в коде. Также это помогает JavaScript быстрее выполнять вычисления. Как только мы сохраним элемент в переменной, JavaScript не будет нуждаться в поиске по всей странице много раз, когда нам нужно будет использовать ее снова в нашем коде.
В jQuery есть удобная функция .scroll().
Она связывает кусок кода, который будет выполняться каждый раз, когда происходит прокрутка на вашей веб-странице. Она принимает один параметр функции, которая выполняется каждый раз при прокрутке страницы. Вы можете применить его к любому прокручиваемому элементу, например фреймам и элементам с дополнительными свойствами, установленным для прокрутки. Обычно мы применяем его к элементу окна, так как в большинстве случаев там происходит прокрутка, включая наш пример.
$(window).scroll(function()
Внутри функции мы постелили утверждение if/else:
if ($(window).scrollTop() > 300) < btn.addClass('show'); >else
То, что мы пытаемся сделать здесь, это проверить вертикальное положение полосы прокрутки и сделать, чтобы наша кнопка появлялась, когда прокрутка ниже определенной точки, и исчезала, когда она находится выше этой точки.
Чтобы получить текущую позицию полосы прокрутки, мы собираемся использовать встроенный метод jQuery .scrollTop(). Он просто возвращает несколько пикселей, которые скрыты над прокручиваемой областью.
Таким образом, каждый раз, когда мы прокручиваем страницу, JavaScript проверяет, сколько пикселей скрыто, и сравнивает их с числом. В нашем случае это количество до 300, но вы можете изменить его, если хотите.
Если мы пройдем 300px, то мы добавим класс show к нашей кнопке, который заставит её появиться. Если число меньше 300, мы удаляем этот класс. Добавление и удаление классов является еще одной причиной популярности jQuery. Мы можем сделать это с помощью двух простых методов addClass() и removeClass(). Однако у нас пока нет класса show в нашем CSS, поэтому добавим его:
if ($(window).scrollTop() > 300) < btn.addClass('show'); >else
По умолчанию ваша кнопка будет скрыта, поэтому нам нужно добавить еще несколько правил в элемент #button:
Первый метод jQuery, который мы видим здесь это .on(). Его первым параметром является «click» JavaScript-событие, которое происходит каждый раз, когда мы кликаем мышей в нашем браузере. Второй параметр — это функция обработки, которая запускается, как только происходит событие.
Функция обработки принимает параметр события. Мы можем назвать все, что захотим, но обычно предпочтительнее e или event. Нам нужен параметр события, чтобы передать его функции и использовать для метода preventDefault().
Метод e.preventDefault() предотвращает случайное действие события, например, ссылка не приводит нас к следующей странице. В нашем случае это не имеет решающего значения, поскольку наш якорный элемент не имеет атрибута href и в любом случае не приведет нас к новой странице, но всегда лучше дважды проверить.
Метод jQuery .animate() — это тот, который выполняет весь трюк.
$('html, body').animate(0>, '300');
Первый параметр метода .animate() — это список свойств, которые мы должны анимировать. Наше свойство называется scrollTop, и мы хотим, чтобы оно имело значение 0. Тип этого параметра является простым объектом, поэтому нам нужно использовать фигурные скобки и записывать наши значения, используя синтаксис парой ключ / значение.
Второй параметр — это скорость, с которой мы хотим, чтобы наша анимация запускалась. Он измеряется в миллисекундах, и чем выше число, тем медленнее анимация. Значение по умолчанию — 400, но изменим его на 300.
Наконец, мы применяем метод animate к HTML и элементам body на нашей странице.
Теперь каждый раз, когда мы нажимаем кнопку, это возвращает нас в начало страницы.
Демо
Финальную версию вы можете посмотреть в демо CodePen. Я также добавила примеры текста для демонстрации.
Завершение
Кнопка «Наверх» полезный инструмент в дизайне интерфейса страницы. И если на вашем сайте будет такая, она сделает взаимодействие посетителей с сайтом намного удобнее. Этот гайд поможет вам разобраться в CSS и JavaScript, даже если вы не веб-разработчик. Надеюсь, что пост был вам полезен и у вас непременно получится сделать такую кнопку!
Часто задаваемые вопросы
Что такое кнопка «Наверх»?
Это значок в форме стрелки, который обычно располагается в правом нижнем углу экрана. Когда вы нажмете - страница прокручивается вверх.
Зачем мне нужна кнопка «Наверх»?
Это действительно удобно для пользователя, особенно если страница длинная и содержит много контента. Кнопка «Вернуться к началу» улучшает опыт взаимодействия и делает посещение вашего сайта более приятным для пользователя.
Как сделана кнопка «Вернуться вверх»?
Она состоит из двух частей: дизайна CSS и небольшого скрипта jQuery, который заставляет его работать.
Читайте также:
Копирайтер и человек, который отвечает за локализацию сайта TemplateMonster на русский и украинский языки. Любит читать и созерцать. Обучалась Анна на филологическом факультете в Черноморском Национальном Университете им. Петра Могилы. Владеет несколькими иностранными языками, такими как английский и немецкий. Обожает путешествовать, в свободное время описывает лайфхаки и гиды для путешественников. Личность с активной жизненной позицией, позитивный и ответственный работник.
