0

我正在尝试自己创建一个目录应用程序（只是为了好玩和培训目的）。

我要解决的问题如下，我输入一个 ISBN 号，然后我从这个 ISBN 号中获取图像。然后我尝试用 css 网格显示图像，但我不知道如何。

下面是我的代码：（HTML）

document.getElementById('display_book').querySelector('p').style.display = 'none';
const display_section = document.getElementById('group_card');
const div = document.createElement('div');
display_section.appendChild(div);
div.setAttribute('class','book_card');
#group_card{
  display: grid;
  grid-template: "book_card" auto / 1fr 1fr 1fr ;
  padding: 10px;
}  
.book_card{
  grid-area: book_card;
  width: 100%;
  height: 150px;
  border: 2px solid black;
  display: inline-block;
}
<div id="main">
          <section id="insert_book">
              <header>
                  <ul>
                      <li><a href="">Home</li></a>
                      <li><a href="">About Us</li></a>
                      <li><a href="">Contact</li></a>
                 </ul>
              </header>
              <h1>Book directory</h1>
              <h3>Add books and retrieve them easily :)</h3>
              <form action="/book_directory_url" method="post">
                  <div id="label">
                      <label>Book name :</label></br>
                      <label>Subtitle :</label></br>
                      <label>Author :</label></br>
                      <label>Publishing house :</label></br>
                      <label>publishing date :</label></br>
                      <label>ISBN :</label></br>
                      <label>Collection :</label></br>
                      <label>Short description :</label></br>
                  </div>
                  <div id="input">
              <input class="empty" id="book_name" type="text" name="book_name" placeholder="Name of the book" onfocus="this.placeholder=''" onblur="this.placeholder='Name of the book'"></br>
              <input class="empty" id="subtitle" type="text" name="subtitle" placeholder="Subtitle of the book" onfocus="this.placeholder=''" onblur="this.placeholder='Subtitle of the book'"></br>
              <input class="empty" id="author" type="text" name="author" placeholder="Author" onfocus="this.placeholder=''" onblur="this.placeholder='Author'"/></br>
              <input class="empty" id="publishing_house" type="text" name="publishing_house" placeholder="Publishing house" onfocus="this.placeholder=''" onblur="this.placeholder='Publishing house'"></br>
              <input class="empty" id="publishing_date" type="number" name="publishing_date" placeholder="Publishing year" onfocus="this.placeholder=''" onblur="this.placeholder='Publishing year'"></br>
              <input class="empty" id="isbn" type="number" name="isbn" placeholder="ISBN" onfocus="this.placeholder=''" onblur="this.placeholder='ISBN'"/></br>
              <input class="empty"id="collection" type="text" name="collection" placeholder="Collection" onfocus="this.placeholder=''" onblur="this.placeholder='Collection'"></br>
              <textarea class="empty" id="description" cols="22" name="description" placeholder="Description" onfocus="this.placeholder=''" onblur="this.placeholder='Description'" style="resize: none;"></textarea>
          </div>
      </form>
      <input id="submit" type="submit" value="submit" />
      </section>
      <section id="display_book">
          <p id="">No book recorded</p>
          <div id="group_card">
          </div>
    </section>
</div>

4

0 回答 0