Я хочу сделать гиперссылку на два слова отдельно в нижнем колонтитуле без оформления текста или подчеркивания.Кто-нибудь знает HTML-код? - PullRequest
Новая
       23

Я хочу сделать гиперссылку на два слова отдельно в нижнем колонтитуле без оформления текста или подчеркивания.Кто-нибудь знает HTML-код?

0 голосов
/ 03 января 2019

Я пытаюсь сделать гиперссылку на два отдельных слова, которые находятся в любом углу нижнего колонтитула, и я не хочу никакого оформления текста (подчеркивание или изменение на синий).Однако я хотел бы, чтобы текст стал синим, когда я наведусь.

Мой код ниже неправильный, и я ищу это, чтобы исправить.

Кто-нибудь знает HTML-код для этого?

Спасибо !!!

<head>
<style type="text/css">
.footer {
position: fixed;     
text-align: left;
justify-content: space-between;
display: flex;
bottom: 10px; 
width: 100%;
font-family:Helvetica, sans-serif;
Font-size: 30px;
letter-spacing:0em;
line-height:1.1em;
color:#0000FF;
padding:1em;
}
.footer span a {
color: black;
text-decoration: none;
}
</style>
</head>
<div class="footer">
<span><a href="https://www.blank-site.com/Profile">NAME</span>
<span><a href="https://www.blank-site.com/Work">WORK</span>
</div>
</style></a></a>

Я хочу, чтобы оба слова 'ИМЯ' (левый угол) и 'РАБОТА' (правый угол) связывали отдельные страницы и становились синими, когда вы наводите курсор мыши, но черными, когда неактивны и без подчеркивания.

Ответы [ 2 ]

0 голосов
/ 03 января 2019

Мы можем взять NAME и WORK и переместить их влево и вправо.

Кроме того, text-align: left для класса нижнего колонтитула будет ненужным, поэтому я бы удалил его, если вы не собираетесьдобавьте больше текста в нижний колонтитул.

И если вы не планируете добавлять в нижний колонтитул больше гиперссылок, которые имеют цвет, то селектор для диапазона в ".footer span a" по большей части не нужен.

Кроме того, вы должны открывать и закрывать теги в правильном порядке и не забывать использовать и правильно, это то, что может вызвать наибольшее количество ошибок. 

<!DOCTYPE html>
    <head>
        <title>HTML is not a real language.</title>
        <style type="text/css">
            .footer {
            position: fixed;
            justify-content: space-between;
            display: flex;
            bottom: 10px; 
            width: 100%;
            font-family:Helvetica, sans-serif;
            font-size: 30px;
            letter-spacing:0em;
            line-height:1.1em;
            color:#0000FF;
            padding:1em;
            }
            .name-left {
            float: left;
            }
            .work-right {
            float: right;
            }
            .footer a {
            color: black;
            text-decoration: none;
            }
            .footer a:hover {
            color: blue;
            }
        </style>
    </head>
    <body>
        <div class="footer">
            <span class="name-left"><a href="https://www.blank-site.com/Profile">NAME</a></span>
            <span class="work-right"><a href="https://www.blank-site.com/Work">WORK</a></span>
        </div>
    </body>
</html>
<!--Tip on Opening and Closing Tags: <p><span>Text</p></span> is incorrect and <p><span>Text</span></p>
would be correct. Also, remember to use <html> and <body> and <style> correctly. (You had a style tag all the way down here.) Please proofread your code. EDIT: Irony 100-->
0 голосов
/ 03 января 2019

Попробуйте это: 

    <head>
    <style type="text/css">
    .footer {
        position: fixed;     
        text-align: left;
        justify-content: space-between;
        display: flex;
        bottom: 10px; 
        width: 100%;
        font-family:Helvetica, sans-serif;
        Font-size: 30px;
        letter-spacing:0em;
        line-height:1.1em;
        color:#0000FF;
        padding:1em;
        }
    .footer span a {
    color: black;
    text-decoration: none;
    }
.footer span a:hover {
    color: blue;
    text-decoration: none;
    }
.footer-item-1{
    float: left; }
.footer-item-2{
    float: right;
      color:black;
      text-decoration: none;}
      .footer-item-2:hover {
        color: blue;
      }
    </style>
    </head>
    <div class="footer">
    <span><a class="footer-item-1" href="https://www.blank-site.com/Profile">NAME</span>
    <span><a class="footer-item-2" href="https://www.blank-site.com/Work">WORK</span>
    </div>
    </style></a></a>
...