时间戳

首页 > 解决方案 > 想不通为什么

和

html - 想不通为什么

和

问题描述

我是前端新手，这将是我的第一个网站。我正在使用 HTML、CSS、Bootstrap 和 Flask。

我遇到的问题是，当下面的代码是纯文本时，它的样式就像一个链接。它是蓝色的，当我将鼠标悬停在它上面时，它会变成蓝色并带有下划线。

<div class="container col-md-6 col-lg-5">
    <hr>
    <p class="lead" id="repo-title">Welcome to the repository of my publications.</p>
    <p id="repo-intro">Introduction to repository. This is the sum of my work, from many different projects. It is listed in chronological order. Use the navigation on the left-side to filter through the repository by subject, project or publication format.</p>
</div>

我不相信我使用过任何可能导致这种情况的 Bootstrap 类。当我在 Firefox 中使用开发人员模式时，我注意到它继承了以下样式：

a:hover {
    color: #0056b3;
}

from _reboot.scss:13，这似乎是一个引导文件。虽然我没有注意到任何可能导致元素被下划线或光标变为小手的东西。

我试图用 CSS 样式来纠正这个问题，例如：

#repo-title, #repo-intro
{
    color:black;
}

#repo-title:hover, #repo-intro:hover
{
    text-decoration:none;
}

这改变了字体颜色，但没有删除下划线，光标悬停在文本上时也没有改变。

这是我的自定义 CSS 样式表，以防我在不知不觉中导致此问题：

body
{
    margin:0;
}  

#headline 
{
    font-size: 64px;
    color:white;
}
#headline:link, #headline:visited
{
    text-decoration: none;
}

#headline:hover, #headline:active
{
    color:white;
}

#top-banner
{
    margin-bottom: 0px;
    padding-bottom: 20px;
}

/*NAVVY*/

.navvy
{
    text-align: center;
    padding: 30px;
    overflow: hidden;
}

.navvy li
{
    display: inline;
}

.navvy li a
{
    text-decoration: none;
    font-size: 16px;
    color: rgb(0,123,255);
    padding: 10px;
    border-radius: 10px;
    font-weight: 200;
}

.navvy-link a:hover
{
    color: rgba(0, 0, 0, 0.822);
    text-decoration:none;
}

.navvy li a.active
{
    background-color:rgb(0,123,255);
    color:white;
}

.navvy .icon {
    display: none;
  }

  @media screen and (max-width: 768px) {
    .navvy-link, .active {display: none;}
    .navvy a.icon {
      float: right;
      display: block;
      font-size: 40px;
    }
    .navvy li a{width: 90%;}
  }

  @media screen and (max-width: 768px) {
    .navvy.responsive {position: relative;}
    .navvy.responsive .icon 
    {
        padding-top: 11px;
        padding-right: 4px;
        position: absolute;
        right: 0;
        top: 0;
    }
    .navvy.responsive a {
      float: none;
      display: grid;
      justify-content: center;
      padding: 25px;
    }

    .navvy.responsive li
    {
        display: grid;
        justify-content: center;
    }
  }
hr
{
    margin-top: 0;
    margin-bottom: 30px;
}
/*HOME*/
img#bust
{
    width:75%;
    height: auto;
}



/*REPOSITORY*/


#main-content
{
    display:flex;
    padding:2rem;
}

#repo-nav
{
    order:1;
}

#repo-cards
{
    flex:1;
    order:2;
}



/*EVENTS*/
.container.news
{
   display: grid;
   justify-content:center;
}
.news
{
   justify-self:center;
}

提前致谢。

标签： htmlcssbootstrap-4

解决方案

  1. 使用诸如 submlime text 或 webstorm 之类的 ide 来检查未关闭的标签和代码错误，可能您没有使用正确的标签形式或在某处丢失。

  2. 使用简单的 html 表单创建新页面以检查所有页面上是否出现问题

  3. 在浏览器中使用 ctrl+u 来检查错误（缺少的标签和错误以红色文本显示）

  4. 禁用所有浏览器扩展并使用隐身模式

  5. 对于覆盖引导样式代码，您可以使用！important。

前任：

#repo-title:hover, #repo-intro:hover
{
    text-decoration:none !important;
}

推荐阅读