时间戳

首页 > 解决方案 > 如何连接 HTML 和 CSS 并在浏览器中签入

html - 如何连接 HTML 和 CSS 并在浏览器中签入

问题描述

我使用 vs 代码在浏览器中运行以下代码。这没用。我今天刚开始学习 HTML。我试图将 CSS 连接到 HTML。

在添加头部 HTML 之前，以下代码仍在工作。

请你帮帮我好吗？

索引.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewprt" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Website</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body background="background.jpeg">
    <!--Navbar start-->
    <nav class="navbar fixed-top shadow-sm navbar-expand-lg bg-light navbar-light py-3 py-lg-0 px-lg-5">
        <a href="index.html" class="navbar-brand ml-lg-3">
            <h1 class="m-0 display-5"><span class="text-primary">Free</span>Folio</h1>
        </a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse px-lg-3" id="collapse" data-target="#navbarCollapse">
            <div class="navbar-nav m-auto py-0">
                <a href="#home" class="nav-item nav-link active">Home</a>
                <a href="#about" class="nav-item nav-link active">About</a>
            </div>
            <a href="" class="btn btn-menu d-none d-lg-block" stype="background-colour:#457efa; colour: #ffffff;"></a>
        </div>
    </nav>
    <!--Navbar End-->
</body>

</html>

索引.css

/* Navigation Menu*/

.navbar-light {
    display: none;
}

.navbar-light .navbar-nav .nav-link {
    padding: 25px 10px;
    color: #343a40;
    font-weight: 500;
    outline: none;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: #0BCEAF;
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link {
        padding: 10px 0;
    }
}

标签： htmlcss

解决方案

首先，您已navbar-light在顶部导航标签中添加，并且在 CSS 中其属性定义为display:none;. 因此，当您display:none;在父导航标签上设置属性时，您将看不到任何东西。

现在另一件事是，从您的代码中我可以看到您使用的类是基于Bootstrap. 因此，要查看此代码的实际运行情况，您也必须将其包含Bootstrap在您的项目中。复制下面的 cdn 链接以查看实际代码

<!--CSS Only-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewprt" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Website</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body background="background.jpeg">
    <!--Navbar start-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <h1 class="m-0 display-5"><span class="text-primary">Free</span>Folio</h1>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">About</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!--Navbar End-->

    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

您可以在此处阅读有关引导程序及其文档的更多信息 - https://getbootstrap.com/docs/5.0/getting-started/introduction/

推荐阅读