Как исправить эту проблему <a href>?
Я пытаюсь создать свой собственный веб-сайт. Я новичок в html/css, и я уже некоторое время занимаюсь этой проблемой. Всякий раз, когда я пытаюсь создать интерактивный текст, он не работает. Я хочу, чтобы по нему можно было щелкнуть, чтобы открыть другой html-файл, но он вообще не работает, какой-нибудь совет?
Итак, кажется, что вкладки работают и ведут к другому html-файлу только тогда, когда css не связан с основным html, я не знаю, почему это так.
.Home {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
top: -140px;
padding-left: 800px;
font-size: 15px;
text-decoration: none;
}
.Projects {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
top: -160px;
padding-left: 900px;
font-size: 15px;
text-decoration: none;
}
.About {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
top: -180px;
padding-left: 1025px;
font-size: 15px;
text-decoration: none;
}<!DOCTYPE html>
<html lang = "en">
<head>
<title>Portfolio</title>
<link rel = "stylesheet" href = "Home_css.css" />
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
</head>
<body>
<div class = "Home"> <a href = "Home.html"><b>HOME</b></a></div>
<div class = "Projects"><a href = "Projects.html"><b>PROJECTS</b></a></div>
<div class = "About"><a href = "About.html"><b>ABOUT</b></a></div>
</body>
</html>Я ожидал, что вкладки будут интерактивными и приведут к другому html-файлу, но ни одна из них не отвечает, может быть, я сделал что-то не так в css?
Да в чем проблема? Вы не видите эти вкладки? Или щелчок не реагирует?
Еще один важный совет — переместить все реплицированные стили в общий класс и использовать «именованные» классы для обеспечения определенного позиционирования: jsfiddle.net/jwxyoace .
@Jon P, чтобы ты знал, что я занимаюсь html уже неделю.
@Ashokan Sivapragasam я их вижу, но не могу нажать на них
Отправьте нам скриншот вашей html-страницы
Не могли бы вы предоставить код, который воспроизводит проблему. Предоставленный код в основном работает. См. jsfiddle.net/z4nyr7v3 . Мне пришлось удалить позиционирование top, чтобы мы могли видеть ссылки. Укажите минимальный воспроизводимый пример . Происходит еще кое-что, чего вы нам не представили.
Ответы 3
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Portfolio</title>
<link rel = "stylesheet" href = "Home_css.css" />
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
</head>
<body>
<div class = "Home"> <a href = "Home.html" target = "_blank"><b>HOME</b></a></div>
<div class = "Projects"><a href = "Projects.html" target = "_blank"><b>PROJECTS</b></a></div>
<div class = "About"><a href = "About.html target = "_blank""><b>ABOUT</b></a></div>
</body>
</html>
.Home a, .Home a:link {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
font-size: 15px;
text-decoration: none;
}
.Projects a, .Projects a:link {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
font-size: 15px;
text-decoration: none;
}
.About a, .About a:link {
position: relative;
font-family: 'open sans', sans-serif;
color: black;
font-size: 15px;
text-decoration: none;
}
Пожалуйста, проверьте ссылку Проверьте здесь
Это действительно работает, но есть одна небольшая проблема: все вкладки открывают один и тот же html-файл (contact.html).
Вы не можете открыть страницу в окне в современных браузерах. Вы можете открыть в новой вкладке, используя свойство target = "_blank".
Но люди, использующие браузер, могут внести изменения в свойства браузера, чтобы открыть страницу в новом окне или на новых вкладках, если он хочет. Затем свойство target = "_blank" решает открыться в новом окне или на новых вкладках в зависимости от настроек браузера.
Скорее всего у вас есть еще один элемент над ссылками. Щелкните правой кнопкой мыши неисправную ссылку и выберите «Проверить элемент». Это откроет панель инструментов разработки вашего браузера с выбранным элементом, который вы щелкнули правой кнопкой мыши.
Выбранный элемент будет либо якорем, либо другим элементом. Если это не якорь, это означает, что элемент, находящийся над якорем, препятствует прохождению вашего клика.
Из-за значений top:-140px и отрицательный мы не можем видеть элементы div
Также установите низкие значения padding, чтобы не нужно было прокручивать страницу.
Не соответствует аспекту «кликабельности», но ваше позиционирование крайне странное. Почему вы перемещаете их из верхней части страницы с отрицательным значением
topи сильно сдвигаете вправо с высокими значениями отступа слева?