Question

我对html和css略感新，想要创建自己的投资组合。我的课程有些问题。每当我尝试在css中调用它们时，它似乎都没有做它应该做的事情。

当我在不使用课程的情况下调用它时，它可以正常工作。

希望有人可以帮忙找到我的错误，提前谢谢。

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Xander Feliers - Portfolio</title>
        <meta name="description" content="Portfolio - Xander Feliers">
        <link rel="stylesheet" href="css/screen.css">
    </head>
    <body>
      <div>
        <nav>
            <ul class="header_nav">
                <li class="header_nav"><a href="contact.html">Contact</a></li>
                <li class="header_nav"><a href="projects.html">Projects</a></li>
                <li class="header_nav"><a href="about.html">About</a></li>
                <li class="header_nav"><a href="index.html">Home</a></li>
            </ul>
        </nav>
      </div>
  </body>
</html>

CSS

body{
  background-color: #f1f6fe;
}

.header_nav{
  list-style-type: none;
  margin: 0;
  padding: 25px;
  overflow: hidden;
  background-color:#78aefa;
  width: 250 px;
}

li.header_nav{
  float: right;
  padding-right: 20px;
}

a.header_nav {
  font-family: arial;
  display: block;
  color:white;
  text-align: center;
  padding: 14 px 16 px;
  text-decoration: none;
}

更新

更改了css但仍然无效。

Answer 1

这堂课不会奏效。您指向了与班级header_nav的链接。但你没有。

a.header_nav {
  font-family: arial;
  display: block;
  color:white;
  text-align: center;
  padding: 14 px 16 px;
  text-decoration: none;
}

应该是（在班级.header_nav内）链接

.header_nav a {
  font-family: arial;
  display: block;
  color:white;
  text-align: center;
  padding: 14 px 16 px;
  text-decoration: none;
}

<强>更新

我已经包含了该代码段。这是你想要的吗？

＆＃13;

body{
  background-color: #f1f6fe;
}

.header_nav{
  list-style-type: none;
  margin: 0;
  padding: 25px;
  overflow: hidden;
  background-color:#78aefa;
  width: 250 px;
}

li.header_nav{
  float: right;
  padding-right: 20px;
}

.header_nav a {
  font-family: arial;
  display: block;
  color:white;
  text-align: center;
  padding: 14 px 16 px;
  text-decoration: none;
}

＆＃13;

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Xander Feliers - Portfolio</title>
        <meta name="description" content="Portfolio - Xander Feliers">
        <link rel="stylesheet" href="css/screen.css">
    </head>
    <body>
      <div>
        <nav>
            <ul class="header_nav">
                <li class="header_nav"><a href="contact.html">Contact</a></li>
                <li class="header_nav"><a href="projects.html">Projects</a></li>
                <li class="header_nav"><a href="about.html">About</a></li>
                <li class="header_nav"><a href="index.html">Home</a></li>
            </ul>
        </nav>
      </div>
  </body>
</html>

＆＃13;

更新2 CSS中的顺序非常重要。如果要强制执行样式，可以在样式后使用!important。（虽然我看到这些文章被认为是不好的做法。）

.header_nav a {
  font-family: arial;
  display: block;
  color:white!important;
  text-align: center;
  padding: 14 px 16 px;
  text-decoration: none!important;
 }

Answer 2

我不确定你的期望是什么，但看来你的班级声明有点倒退。它应该是class，然后是元素，

.header_nav li { your styles }
.header_nav a { your styles }

Answer 3

进行以下更改：

来自

.header_nav a {

}

致：

body{
  background-color: #f1f6fe;
}

ul.header_nav_container {
    float:right;   
    padding: 20px;
}


ul.header_nav_container li.header_nav {
    list-style-type: none;
    float: left;
    padding: 0 20px
    
}

并且您也可以更改为html for easyiness

＆＃13;

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Xander Feliers - Portfolio</title>
        <meta name="description" content="Portfolio - Xander Feliers">
        <link rel="stylesheet" href="css/screen.css">
    </head>
    <body>
      <div>
        <nav>
            <ul class="header_nav_container">
                <li class="header_nav"><a href="contact.html">Contact</a></li>
                <li class="header_nav"><a href="projects.html">Projects</a></li>
                <li class="header_nav"><a href="about.html">About</a></li>
                <li class="header_nav"><a href="index.html">Home</a></li>
            </ul>
        </nav>
      </div>
  </body>
</html>

＆＃13;

m <- c(3,5,8,12,15,19,21,23,26,33,37,42,45,47,51,54,58,60)
n <- c(13,14,52,53,56,57)

＆＃13;

Answer 4

enter image description here 如果类不起作用，您可以指定id并以类似方式传递样式

CSS类不起作用

4 个答案: