时间戳

首页 > 解决方案 > 在 html 中的链接中查找问题不起作用

html - 在 html 中的链接中查找问题不起作用

问题描述

<body >
    <div class="outer-container">
        <div class="container">
            <div class="header">
               <a href="#">HOME</a>
               <a href="#">ABOUT</a>
               <a href="#">CONTACT</a>
               <a href="">RESUME</a>
            </div>
            <div class="big-heading">
                <h2 style=color:white>
                   I'm Ankit Soni.
                </h2>
            </div>

            <div class="social-media">
                    <a href="https://www.linkedin.com/in/ankit-soni-991495152/">
                    <i class="fa fa-linkedin"></i></a>
                    <a href="https://github.com/ankysony">
                    <i class="fa fa-github"></i></a>
                    <a href="mailto:ankit.soni.che16@iitbhu.ac.in">
                    <i class="fa fa-envelope"></i></a>
            </div>  
            <div class="scrolldown">
                <a href="">
                    <i class="fa fa-arrow-circle-down"></i>
                </a>
            </div>
        </div>
    </div>
</body>

我在其中找不到任何类型的错误，但其中的链接不起作用（没有光标指针，没有重定向）。只有最后一个带有箭头圆圈的工作。类社交媒体下的链接不是。

我得到了导致错误的 css 的一部分，请查看它并建议修复错误的可能方法。

.outer-container .container .big-heading
{
  height: 100%;
  width: 100%;
  display: flex;
  font-size: 3em;
  position: absolute;
  align-items: center;
  justify-content: center;
  margin-top: -50px;
}

整个CSS代码如下。

 *
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.outer-container
{
    height: 792px;
    width: 1440px;
}
h2{
    font-family: sans-serif;
}
html {
    background: url(../images/banner.jpg);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    overflow: scroll;
    overflow-x: hidden;
  }
.outer-container .container .header
{
    text-align: center;
    word-spacing: 100px;
    padding-top: 10px;
}
.outer-container .container .header a 
{
    font-family: sans-serif;
    text-decoration: none;
    color: white;
}
.outer-container .container .big-heading
{
  height: 100%;
  width: 100%;
  display: flex;
  font-size: 3em;
  position: absolute;
  align-items: center;
  justify-content: center;
  margin-top: -50px;
}
.outer-container .container .social-media
{
    height: 100%;
    width: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
} 
.outer-container .container .social-media i
{
    padding: 20px;
    margin: 20px;
    color: white;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 30px;
}
.outer-container .container .scrolldown
{
    height: 100%;
    width: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    margin-top: 300px;
}
 .outer-container .container .scrolldown i
{
    padding: 20px;
    margin: 20px;
    color: white;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 50px;
}

标签： htmlcss

解决方案

在header课堂上，您href不会将您重定向到任何地方，因为您只指定了href="#"，它既不指向另一个页面，也不指向页面上的任何特定 id。您应该添加您的 url 以导航到另一个页面（或者，在这种情况下，可能是您自己页面上的 id）：

href="www.site.com"

此外，似乎在social-media课堂上，您没有为链接指定任何文本，这就是它们没有出现的原因。您应该在开始和结束标签之间放置一些文本：

<a href="url">link text</a>

推荐阅读