CSS /图片下的描述

Question

我为一家网上书店做了几个“封面”，但是我想在我放的每一张图片下添加描述(这将是书的描述)。但是我不希望它在我加了一个长的指令的时候一直往下走！我希望描述的最大尺寸为10 px0px300px(底部)在底部不超过300 0px，如果我做了一个长的描述，我希望这个描述在书封面下的填充中，而不是一直向下走，这样人们就可以向下滚动来阅读描述，但是页面不应该滚动！基本上，长的书描述，说明可以滚动，但不是页面！而Desc应该留在书的页面里！

就像普通的网上书店一样！谢谢!

​

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/index_bg.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-left: 10%;
  padding-right: 10%;
}

.logo {
  color: white;
  font-size: 28px;
}

.span1 {
  color: white;
  font-size: 20px;
  background-color: #ea1538;
  border-radius: 30px;
  padding: 5px 8px;
}

span {
  color: #ea1538;
}

nav ul li {
  list-style-type: none;
  display: inline-block;
  padding: 10px 20px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: 0.5s;
}

nav ul li a:hover {
  color: white;
  transition: 0.3s;
  border-radius: 30px;
  background-color: #ea1538;
  padding: 8px 12px;
}

#active {
  color: white;
  background: #ea1538;
  padding: 5px 8px;
  border-radius: 30px;
}

button {
  border: none;
  background: #ea1538;
  padding: 12px 40px;
  border-radius: 30px;
  color: white;
  font-weight: bold;
  font-size: 15px;
  transition: 0.5s;
  outline: 1px solid #ea1538;
}

button:hover {
  transform: scale(1.2);
  transition: ease 0.5s;
  cursor: pointer;
  outline: 3px solid #ea1538;
  outline-offset: 3px;
}

.button {
  text-align: center;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.footer {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -o-flex;
  display: flex;
  flex-flow: row wrap;
  padding: 50px;
  color: white;
  background: #262626;
}

.footer>* {
  flex: 1 100%;
}

.l-footer {
  margin-right: 1.25em;
  margin-bottom: 2em;
}

h2 {
  font-weight: 900;
  font-size: 16px;
}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer li {
  line-height: 2em;
}

.footer a {
  text-decoration: none;
}

.footer a:hover {
  background-color: #ea1538;
  padding: 3px 5px;
  border-radius: 30px;
  transition: ease 0.3s;
  color: white;
  font-weight: bold;
  letter-spacing: 1px;
}

.r-footer {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -o-flex;
  display: flex;
  flex-flow: row wrap;
}

.r-footer>* {
  flex: 1 50%;
  margin-right: 1.25em;
}

.box a {
  text-decoration: none;
  color: #999;
}

.h-box {
  column-count: 2;
  column-gap: 1.25em;
}

.b-footer {
  text-align: center;
  color: #999;
  padding-top: 50px;
}

.l-footer p {
  padding-right: 20%;
  color: #999;
}

@media screen and (min-width: 600px) {
  .r-footer>* {
    flex: 1;
  }
  .features {
    flex-grow: 2;
  }
  .l-footer {
    flex: 1 0px;
  }
  .r-footer {
    flex: 2 0px;
  }
}

.box1 {
  float: left;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-left: 20px;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
  box-sizing: border-box;
}

.box1:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover1 {
  width: 100%;
  height: 100%;
}

.box2 {
  display: inline-block;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-left: 17%;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
}

.box2:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover2 {
  width: 100%;
  height: 100%;
}

.box3 {
  float: right;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-right: 20px;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
}

.box3:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover3 {
  width: 100%;
  height: 100%;
}

.box4 {
  float: left;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-left: 20px;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
}

.box4:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover4 {
  width: 100%;
  height: 100%;
}

.box5 {
  display: inline-block;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-left: 17%;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
}

.box5:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover5 {
  width: 100%;
  height: 100%;
}

.box6 {
  float: right;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-right: 20px;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
}

.box6:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover6 {
  width: 100%;
  height: 100%;
}

.box7 {
  float: left;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-left: 20px;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
}

.box7:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover7 {
  width: 100%;
  height: 100%;
}

.box8 {
  display: inline-block;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-left: 17%;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
}

.box8:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover8 {
  width: 100%;
  height: 100%;
}

.box9 {
  float: right;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-right: 20px;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
}

.box9:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover9 {
  width: 100%;
  height: 100%;
}

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="Styles/style.css" />
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://fonts.googleapis.com/css2?family=FAMILY_NAME:wght@WEIGHT_OR_RANGE&display=swap" rel="stylesheet" />

  <title>myPage</title>
</head>

<body>
  <!-- Navbar and Logo -->
  <div class="hero">
    <nav>
      <h2 class="logo">
        Be <span>Smart</span> <br />
        <span class="span1">Technologies</span>
      </h2>
      <ul>
        <li><a href="index.html" id="active">Home</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
      <button type="button"><a href="#" class="button">Subscribe</a></button>
    </nav>
  </div>

  <div class="box1">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover1" />
    <h3 class="desc1">This is Book Cover 1</h3>
  </div>

  <div class="box2">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover2" />
    <h3>This is Book Cover 2</h3>
  </div>

  <div class="box3">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover3" />
    <h3>This is Book Cover 3</h3>
  </div>

  <div class="box4">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover4" />
    <h3>This is Book Cover 4</h3>
  </div>

  <div class="box5">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover5" />
    <h3>This is Book Cover 5</h3>
  </div>

  <div class="box6">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover6" />
    <h3>This is Book Cover 6</h3>
  </div>

  <div class="box7">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover7" />
    <h3>This is Book Cover 7</h3>
  </div>

  <div class="box8">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover8" />
    <h3>This is Book Cover 8</h3>
  </div>

  <div class="box9">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover9" />
    <h3>This is Book Cover 9</h3>
  </div>

  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <!-- Footer and Properties -->
  <footer class="footer">
    <div class="l-footer">
      <h1>
        Be <span>Smart</span> <br /><span class="span1">Technologies</span>
      </h1>
      <br />
      <p>
        Be Smart Technologies or <em>BSS</em> is a company that creates websites, portfolios, responsive pages and designs!
      </p>
    </div>
    <ul class="r-footer">
      <li>
        <h2>Explore</h2>
        <ul class="box">
          <li><a href="#">Home</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </li>
      <li class="features">
        <h2>Need Help?</h2>
        <ul class="box h-box">
          <li><a href="#">Blog</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Sales</a></li>
          <li><a href="#">Certifications</a></li>
          <li><a href="#">Customer Services</a></li>
        </ul>
      </li>
      <li>
        <h2>Legal</h2>
        <ul class="box">
          <li><a href="#">Privacy Policy</a></li>
          <li><a href="#">Terms of Use</a></li>
          <li><a href="#">Contract</a></li>
        </ul>
      </li>
    </ul>

    <div class="b-footer">
      <p>All Rights Reserved by &copy;BeSmart Technologies 2022</p>
    </div>
  </footer>
</body>

</html>

​

Answer 1

可以使用css max-height和overflow-y:scroll。

目前，我直接标记所有的div标记，但是您可以标记从box1到box9的所有框，或者将类分配给它们。

​

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/index_bg.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

div{
max-height:300px;
overflow-y:scroll;

}
div::-webkit-scrollbar {
    display: none;

}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-left: 10%;
  padding-right: 10%;
}

.logo {
  color: white;
  font-size: 28px;
}

.span1 {
  color: white;
  font-size: 20px;
  background-color: #ea1538;
  border-radius: 30px;
  padding: 5px 8px;
}

span {
  color: #ea1538;
}

nav ul li {
  list-style-type: none;
  display: inline-block;
  padding: 10px 20px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: 0.5s;
}

nav ul li a:hover {
  color: white;
  transition: 0.3s;
  border-radius: 30px;
  background-color: #ea1538;
  padding: 8px 12px;
}

#active {
  color: white;
  background: #ea1538;
  padding: 5px 8px;
  border-radius: 30px;
}

button {
  border: none;
  background: #ea1538;
  padding: 12px 40px;
  border-radius: 30px;
  color: white;
  font-weight: bold;
  font-size: 15px;
  transition: 0.5s;
  outline: 1px solid #ea1538;
}

button:hover {
  transform: scale(1.2);
  transition: ease 0.5s;
  cursor: pointer;
  outline: 3px solid #ea1538;
  outline-offset: 3px;
}

.button {
  text-align: center;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.footer {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -o-flex;
  display: flex;
  flex-flow: row wrap;
  padding: 50px;
  color: white;
  background: #262626;
}

.footer>* {
  flex: 1 100%;
}

.l-footer {
  margin-right: 1.25em;
  margin-bottom: 2em;
}

h2 {
  font-weight: 900;
  font-size: 16px;
}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer li {
  line-height: 2em;
}

.footer a {
  text-decoration: none;
}

.footer a:hover {
  background-color: #ea1538;
  padding: 3px 5px;
  border-radius: 30px;
  transition: ease 0.3s;
  color: white;
  font-weight: bold;
  letter-spacing: 1px;
}

.r-footer {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -o-flex;
  display: flex;
  flex-flow: row wrap;
}

.r-footer>* {
  flex: 1 50%;
  margin-right: 1.25em;
}

.box a {
  text-decoration: none;
  color: #999;
}

.h-box {
  column-count: 2;
  column-gap: 1.25em;
}

.b-footer {
  text-align: center;
  color: #999;
  padding-top: 50px;
}

.l-footer p {
  padding-right: 20%;
  color: #999;
}

@media screen and (min-width: 600px) {
  .r-footer>* {
    flex: 1;
  }
  .features {
    flex-grow: 2;
  }
  .l-footer {
    flex: 1 0px;
  }
  .r-footer {
    flex: 2 0px;
  }
}

.box1 {
  float: left;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-left: 20px;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
  box-sizing: border-box;
}

.box1:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover1 {
  width: 100%;
  height: 100%;
}

.box2 {
  display: inline-block;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-left: 17%;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
}

.box2:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover2 {
  width: 100%;
  height: 100%;
}

.box3 {
  float: right;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-right: 20px;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
}

.box3:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover3 {
  width: 100%;
  height: 100%;
}

.box4 {
  float: left;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-left: 20px;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
}

.box4:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover4 {
  width: 100%;
  height: 100%;
}

.box5 {
  display: inline-block;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-left: 17%;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
}

.box5:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover5 {
  width: 100%;
  height: 100%;
}

.box6 {
  float: right;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-right: 20px;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
}

.box6:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover6 {
  width: 100%;
  height: 100%;
}

.box7 {
  float: left;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-left: 20px;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
}

.box7:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover7 {
  width: 100%;
  height: 100%;
}

.box8 {
  display: inline-block;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-left: 17%;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
}

.box8:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover8 {
  width: 100%;
  height: 100%;
}

.box9 {
  float: right;
  color: white;
  font-weight: 100;
  background-color: rgba(234, 21, 56, 0.3);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  border: 3px solid red;
  width: 300px;
  margin-right: 20px;
  margin-top: 40px;
  transition: ease 0.5s;
  padding: 100px 10px;
}

.box9:hover {
  transition: ease 0.5s;
  transform: scale(1.1);
}

#cover9 {
  width: 100%;
  height: 100%;
}

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="Styles/style.css" />
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://fonts.googleapis.com/css2?family=FAMILY_NAME:wght@WEIGHT_OR_RANGE&display=swap" rel="stylesheet" />

  <title>myPage</title>
</head>

<body>
  <!-- Navbar and Logo -->
  <div class="hero">
    <nav>
      <h2 class="logo">
        Be <span>Smart</span> <br />
        <span class="span1">Technologies</span>
      </h2>
      <ul>
        <li><a href="index.html" id="active">Home</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
      <button type="button"><a href="#" class="button">Subscribe</a></button>
    </nav>
  </div>

  <div class="box1">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover1" />
    <h3 class="desc1">This is Book Cover 1</h3>
     An encyclopedia (American English), encyclopædia (archaic spelling), or encyclopaedia (British English) is a reference work or compendium providing summaries of knowledge either from all branches or from a particular field or discipline.[1] Encyclopedias are divided into articles or entries that are often arranged alphabetically by article name[2] and sometimes by thematic categories. Encyclopedia entries are longer and more detailed than those in most dictionaries.[2] Generally speaking, encyclopedia articles focus on factual information concerning the subject named in the article's title; this is unlike dictionary entries, which focus on linguistic information about words, such as their etymology, meaning, pronunciation, use, and grammatical forms.
  </div>

  <div class="box2">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover2" />
    <h3>This is Book Cover 2</h3>
  </div>

  <div class="box3">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover3" />
    <h3>This is Book Cover 3</h3>
  </div>

  <div class="box4">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover4" />
    <h3>This is Book Cover 4</h3>
    An encyclopedia (American English), encyclopædia (archaic spelling), or encyclopaedia (British English) is a reference work or compendium providing summaries of knowledge either from all branches or from a particular field or discipline.[1] Encyclopedias are divided into articles or entries that are often arranged alphabetically by article name[2] and sometimes by thematic categories. Encyclopedia entries are longer and more detailed than those in most dictionaries.[2] Generally speaking, encyclopedia articles focus on factual information concerning the subject named in the article's title; this is unlike dictionary entries, which focus on linguistic information about words, such as their etymology, meaning, pronunciation, use, and grammatical forms.
  </div>

  <div class="box5">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover5" />
    <h3>This is Book Cover 5</h3>
  </div>

  <div class="box6">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover6" />
    <h3>This is Book Cover 6</h3>
  </div>

  <div class="box7">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover7" />
    <h3>This is Book Cover 7</h3>
  </div>

  <div class="box8">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover8" />
    <h3>This is Book Cover 8</h3>
  </div>

  <div class="box9">
    <img src="/images/Books/book_bg.jpg" alt="cover" id="cover9" />
    <h3>This is Book Cover 9</h3>
  </div>

  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  <!-- Footer and Properties -->
  <footer class="footer">
    <div class="l-footer">
      <h1>
        Be <span>Smart</span> <br /><span class="span1">Technologies</span>
      </h1>
      <br />
      <p>
        Be Smart Technologies or <em>BSS</em> is a company that creates websites, portfolios, responsive pages and designs!
      </p>
    </div>
    <ul class="r-footer">
      <li>
        <h2>Explore</h2>
        <ul class="box">
          <li><a href="#">Home</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </li>
      <li class="features">
        <h2>Need Help?</h2>
        <ul class="box h-box">
          <li><a href="#">Blog</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Sales</a></li>
          <li><a href="#">Certifications</a></li>
          <li><a href="#">Customer Services</a></li>
        </ul>
      </li>
      <li>
        <h2>Legal</h2>
        <ul class="box">
          <li><a href="#">Privacy Policy</a></li>
          <li><a href="#">Terms of Use</a></li>
          <li><a href="#">Contract</a></li>
        </ul>
      </li>
    </ul>

    <div class="b-footer">
      <p>All Rights Reserved by &copy;BeSmart Technologies 2022</p>
    </div>
  </footer>
</body>

</html>

​

隐藏滚动条：

使用

//In Chrome, Safari and Opera
::-webkit-scrollbar {
    display: none;
}