Question

<!Doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>IBAE-Information Library</title>
        <link rel="stylesheet" href="/Users/jeevabharathi/Desktop/Project.css">
        <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
    </head>
    <body>
        <nav>
            <h1 style="font-family:Helvetica;">
                <ul class="cf">
                    <li><a href="#">Menu 1</a>
                        <ul>
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                    <li><a class="dropdown" href="#">Menu 2</a>
                        <ul>
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                        <li><font size="+4", color="white">TITLE</font> <br></li>
                    <li><a href="#">Menu 3</a>
                        <ul>
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu 4</a>
                        <ul>
                            <li><a href="#">Sub-menu Item 1</a></li>
                            <li><a href="#">Sub-menu Item 2</a></li>
                            <li><a href="#">Sub-menu Item 3</a></li>
                        </ul>
                    </li>
                </ul>
            </h1>
        </nav>

        <script   src="https://code.jquery.com/jquery-3.3.1.js"   integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="   crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    </body>>

</html>

这是我的HTML代码。 Bootstrap和bootstrapcdn导致突出显示的蓝色和带下划线的文本。两个最新。我试图在项目中使用淡入效果和平滑滚动效果。在理论上使用Bootstrap似乎更容易，所以我为我的项目选择了它。如何避免突发事件发生？

编辑：此处的CSS

    nav{
    text-decoration: none;
}
nav h1 
    {
        margin:-10px;   
        background-color: rgb(0, 0, 0);
        border: 25px solid rgba(0, 0, 0, 0);
        text-align: center;
        position: fixed;
        position: top;
        min-width: 100%;

    }
nav ul 
{
    -webkit-font-smoothing:antialiased;
    text-shadow:0 1px 0 rgba(255, 255, 255, 0);
    background: rgb(0, 0, 0);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
nav li 
{
    float: left;
    margin: 0;
    padding: 0; 
    position: relative;
    min-width: 20%;
}
nav a 
{
    background: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    display: block;
    font: bold 15px/50px helvetica;
    padding: 0 25px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
            transition: all .25s ease;
}
nav .dropdown:after 
{
    content: '';
}
nav .dropdown:hover:after
{
    content:''
}
nav li:hover a 
{
    background: rgb(0, 0, 0);
}
nav li ul 
{
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
            transition: all .25s ease;
}
nav li:hover ul 
{
    opacity: 1;
    top: 50px;
    visibility: visible;
}
nav li ul li 
{
    float: none;
    width: 100%;
}
nav li ul a:hover 
{
    background: rgb(255, 0, 0);
}

/* Clearfix */

.cf:after, .cf:before 
{
    content:"";
    display:table;
}
.cf:after 
{
    clear:both;
}
.cf 
{
    zoom:1;
}

Answer 1

因为Bootstrap的CSS文件中包含自己的样式。

您可以通过更改自己的CSS中的样式来解决此问题，并在必要时将!important添加到CSS声明中。

将其添加到nav a以覆盖Bootstrap的text-decoration：

nav a {
  text-decoration: none !important;
}

并将其添加到nav li:hover a以将颜色更改为白色：

nav li:hover a {
  color: white;
}

这是一个JSFiddle演示，其中包含我上面所做的更改。

Answer 2

蓝色和下划线只是链接的默认值。如果我只是输入以下代码：

<a href='www.google.com'>Google</a>

它将加下划线和蓝色。

所以它不是那个给你的引导程序。事实上，你的第一个问题是你甚至没有导入bootstrap css。在导入自己的自定义CSS之前，请将其放在右侧：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

当我使用bootstrap时，我的导航栏项目以蓝色突出显示并加下划线。为什么？

2 个答案: