Question

使用此编辑器进行编码非常新。

建立一个新网站并设置其样式已成为一个问题。我正在使用Atom。 html看起来好像很好，但是当我尝试编辑导航栏以更改边框时，似乎什么也没有发生。

任何建议将不胜感激。

谢谢

我尝试将css添加到边框：

.main{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap:0px;
    border: 10px solid black;  //<--------------

只是测试。

然后我也尝试将其添加到导航栏中：

.main .nav1, .nav2, .nav3, .nav4{
    background:blue;
    padding: 0px;
    margin: 0px;
    font-size: 4em;
    line-height:100px;  
    border: 10px solid red; //<------------------
}

以下是相关的CSS：

body{
     color: white;
    background: grey;
}

.main{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap:0px;
    border: 10px solid black;  //<----------
}


}
.nav1{
    grid-column: 1;
}

.nav2{
    grid-column: 2;
}

.nav3{
    grid-column: 3;
}

.nav4{
    grid-column: 4;
}

.main .nav1, .nav2, .nav3, .nav4{
    background:blue;
    padding: 0px;
    margin: 0px;
    font-size: 4em;
    line-height:100px;  //centers text up and down
    border: 10px solid red;<----------------------------------
}

我要做的就是更改边框的颜色和大小（并最终更改边距）。这本来是一个测试，现在已经成为我无法解决的问题。

更新：是的，边距是错字。

为澄清起见，这是html代码：

index.html for homepage

这是html：

index.css for homepage

网站看起来还不错（显然正在进行中）

但是由于某些原因没有边界：

Priceless Martial Arts

希望这会有所帮助。

更新：

以为我想出了办法，所以我去在Codepen上设置边距样式：

Codepen Top Nav

只想运行一个新测试，但是现在第一个选项卡的左边距没有任何显示。

感谢帮助。

Answer 1

这是因为CSS中的注释！

.main .nav1, .nav2, .nav3, .nav4{
  background:blue;
  padding: 0px;
  margin: 0px;
  font-size: 4em;
  line-height:100px;  //centers text up and down
  border: 5px solid black;
}

使用浏览器的开发人员工具，您可以了解它的失败方式：

该样式的注释在CSS中无效，并且已将其破坏。您应该使用“ block”语法添加注释：

.main .nav1, .nav2, .nav3, .nav4{
  background:blue;
  padding: 0px;
  margin: 0px;
  font-size: 4em;
  line-height:100px;  /* centers text up and down */
  border: 5px solid black;
}

为什么不应用我的边框样式？

1 个答案: