javascript - 如何将内容放入布局

我从 https://www.layoutit.com/grid#clear 创建了一个布局对于我的网页。

但我想删除那些框中央的这些文本。我尝试了一些方法但不幸的是没有用。这是我尝试过的

html, body { margin: 15; height: 100% } 
.grid-container * {  }
.grid-container div:after {
    content: attr(class);
    color: #888;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #2A2A2A;
}
.grid-container {  display: grid;  height: 100%;  
                   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
                   grid-template-rows: 1fr 1fr 1fr 1fr; 
                   grid-gap: 10px 10px;  
                   grid-template-areas: 'box1 box1 box2 box2 box3 box4' 'box5 box5 box6 box6 box6 box7' 'box5 box5 box6 box6 box6 box8' 'box9 box10 box11 box12 box13 box14';}
.box1 { grid-area: box1; 
        
}
.box2 { grid-area: box2; }
.box3 { grid-area: box3; }
.box4 { grid-area: box4; }
.box5 { grid-area: box5; }
.box6 { grid-area: box6; }
.box7 { grid-area: box7; }
.box8 { grid-area: box8; }
.box9 { grid-area: box9; }
.box10 { grid-area: box10; }
.box11 { grid-area: box11; }
.box12 { grid-area: box12; }
.box13 { grid-area: box13; }
.box14 { grid-area: box14; }

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

<head>
  <meta charset="UTF-8">
  <title>New Pen!</title>
      <link rel="stylesheet" href="css/style.css">
</head>
<body body bgcolor="black">
    <div class='grid-container'>
        <div class='box1'></div>
        <div class='box2'></div>
        <div class='box3'></div>
        <div class='box4'></div>
        <div class='box5'></div>
        <div class='box6'></div>
        <div class='box7'></div>
        <div class='box8'></div>
        <div class='box9'></div>
        <div class='box10'></div>
        <div class='box11'></div>
        <div class='box12'></div>
        <div class='box13'></div>
        <div class='box14'></div>
    </div>
   </body>
</html>

我也尝试过将名称放入 div，但它不起作用。我将在这些框内放置一些内容而不是名称。我不允许更改框内容，我无法理解这些名称写在哪里(box1，盒子2，盒子3)

最佳答案

attr将从相关的 dom 中获取属性，在这种情况下会将其添加到内容中。

将 content: attr(class); 替换为 content: '';

html,
body {
  margin: 15;
  height: 100%
}

.grid-container * {}

.grid-container div:after {
  content: '';
  color: #888;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #2A2A2A;
}

.grid-container {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 10px 10px;
  grid-template-areas: 'box1 box1 box2 box2 box3 box4' 'box5 box5 box6 box6 box6 box7' 'box5 box5 box6 box6 box6 box8' 'box9 box10 box11 box12 box13 box14';
}

.box1 {
  grid-area: box1;
}

.box2 {
  grid-area: box2;
}

.box3 {
  grid-area: box3;
}

.box4 {
  grid-area: box4;
}

.box5 {
  grid-area: box5;
}

.box6 {
  grid-area: box6;
}

.box7 {
  grid-area: box7;
}

.box8 {
  grid-area: box8;
}

.box9 {
  grid-area: box9;
}

.box10 {
  grid-area: box10;
}

.box11 {
  grid-area: box11;
}

.box12 {
  grid-area: box12;
}

.box13 {
  grid-area: box13;
}

.box14 {
  grid-area: box14;
}

<body body bgcolor="black">
  <div class='grid-container'>
    <div class='box1'></div>
    <div class='box2'></div>
    <div class='box3'></div>
    <div class='box4'></div>
    <div class='box5'></div>
    <div class='box6'></div>
    <div class='box7'></div>
    <div class='box8'></div>
    <div class='box9'></div>
    <div class='box10'></div>
    <div class='box11'></div>
    <div class='box12'></div>
    <div class='box13'></div>
    <div class='box14'></div>
  </div>

关于javascript - 如何将内容放入布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52293091/

javascript - 如何将内容放入布局

上一篇：CSS - 带有透明文本的按钮

下一篇：javascript - 您如何将文本样式设置为分数？