Question

我最近一直在一个网站上工作。我刚开始，但无法使style.css工作。我已经非常艰苦地研究了互连网以寻找解决方案，但是我看起来还不够努力。为了得到它，这是我的index.html代码。

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
    <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/
fontawesome/4.7.0/css/fontawesome.min.css">
    </head>
    <body>

    <!-- Load an icon library -->

    <div class="navbar">
    <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a> 
    <a href="#"><i class="fa fa-fw fa-search"></i> Search</a> 
    <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a> 
    <a href="#"><i class="fa fa-fw fa-user"></i> Login</a>
    </div>

因此，当我访问我的网站（halifaxdevelopers.dx.am）时，我检查了Inspect Element，发现由于某种原因，我的东西被移到了<body>中。

无论如何，这是我的style.css

/* Style the navigation bar */
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}

/* Navbar links */
.navbar a {
float: left;
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}

/* Navbar links on mouse-over */
.navbar a:hover {
background-color: #000;
}

/* Current/active navbar link */
.active {
background-color: #4CAF50;
}

/* Add responsiveness - will automatically display the navbar vertically 
instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}

|我希望你们能帮助我。

Answer 1

将您的html结构更改为以下内容：

<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/fontawesome.min.css">
  <link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
....
</body>
</html>

Answer 2

您的代码应类似于以下我分享的代码：

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css" media="screen">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

  <!-- Load an icon library -->

  <div class="navbar">
    <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
    <a href="#"><i class="fa fa-fw fa-search"></i> Search</a>
    <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>
    <a href="#"><i class="fa fa-fw fa-user"></i> Login</a>
  </div>

</body>

</html>

输出将完全像这样：

Answer 3

您似乎链接了“ stylesheet.css”而不是“ style.css”

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/>

到

<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>

尝试将网站链接到我的样式表

3 个答案: