Question

我正在使用css网格，我试图找出为什么我一直在使用的代码不工作以下是什么是我的代码为html5

<div class="grid">
      <header class="nav--header">
        <nav class="nav--wrapper">
          <div class="nav--elm">
            <a href="./">
            <span class="nav--elmText"><img src="./assets/img/Rep-Center-Logo.svg"></span>
          </div>
        </nav>
      </header>
      <div class="sidebar">
      </div>
      <div class="content">
      </div>
      <footer class="nav--footer">
      </footer>
    </div>

然后我尝试使用css网格为网站创建布局，并在CSS中的grid-template-areas标记上获取无效的属性值这是我拥有的以下css：

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
    background: #efefef;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
/* GRID LAYOUT CSS */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas:
  "header header header header"
  "sidebar content content content"
  "content content content content"
  "footer footer footer footer";
}
.nav--header {
  grid-area: header;
  background: #2b849f;
}
.nav--header .nav--wrapper {
  display: grid;
}
.nav--header .nav--wrapper .nav--elm {
  display: inline-grid;
}
.nav--header .nav--wrapper .nav--elm .nav--elmText {

}
.nav--header .nav--wrapper .nav--elm .nav--elmText img {
 width: 60px;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.nav--footer {
  grid-area: footer;
}

如果有什么事情让你突出，为什么不正确请告诉我你的时间谢谢你。

Answer 1

错误大写：

grid-template-areas:
"header header header header"
"sidebar content content content"
"CONTENT content content content"
"footer footer footer footer";

您不能拥有不是单个矩形的网格区域。如果您这样做，它可以工作：

grid-template-areas:
"header header header header"
"sidebar content content content"
"sidebar content content content"
"footer footer footer footer";

通过进入并逐行添加所有内容以查看中断的位置，您的前两行有效，但它突破了第三行，这意味着这就是问题出在哪里，这通常最容易调试这些。在检查时，您可以看到问题。

Answer 2

您忘记在<a href="./">

之后使用std::map关闭超链接

无效的属性值CSS GRID

2 个答案: