【MDB 企业网站】2 images, cards 和 foot

在第一个 row 中，我们有两栏，我们可以在其中一栏放置图片，在另一栏放置一些描述和号召性用语按钮。

Step 1

首先我们可以在左边栏放置一张图片。

<div class="col-md-7">

  <!--Featured image -->
  <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" class="img-fluid">

</div>

注意到 .img-fluid，它使我们的图像具有响应能力，能够跟随我们的屏幕和它的父元素的 width 自适应调整。

Step 2

我们可以通过添加微妙的阴影，悬浮和波浪效果轻松地增强图像。
用下面的代码替换我们图像的代码。

<div class="view overlay z-depth-1-half">
  <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" class="card-img-top" alt="">
  <div class="mask rgba-white-light"></div>
</div>

保存文件并刷新浏览器。效果如下图。

当鼠标浮在图片上有一层白色遮罩

Step 3

正如我们已经说过的，在第二列中，我们将放置标题，简短描述和号召性用语。这将有助于我们的访客快速了解我们的网站的内容（标题和说明）以及我们希望他们采取什么行动（号召性用语按钮）。

<!--Grid column-->
<div class="col-md-5">

  <h2>Some awesome heading</h2>
  <hr>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis pariatur quod ipsum atque quam dolorem
      voluptate officia sunt placeat consectetur alias fugit cum praesentium ratione sint mollitia, perferendis
      natus quaerat!</p>
  <a href="https://mdbootstrap.com/" class="btn btn-primary">Get it now!</a>

</div>
<!--Grid column-->

Step 4

在第二个 row 中，我们将添加一些有关我们网站的详细信息。我们的cards 将用来做这样的工作。

Cards 是向用户展示内容的好方法。它们清晰，易于使用且优雅。Facebook 使用卡，Google 使用卡，LinkedIn 使用卡。您也应该这样做，特别是考虑到 MDB 为您提供了一系列非常出色的卡。

<!--Grid row-->
<div class="row">

  <!--Grid column-->
  <div class="col-lg-4 col-md-12">

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <div class="view overlay">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).jpg" class="card-img-top" alt="">
        <a href="#">
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-body">
        <!--Title-->
        <h4 class="card-title">Card title</h4>
        <!--Text-->
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#!" class="btn btn-primary">Button</a>
      </div>

    </div>
    <!--/.Card-->

  </div>
  <!--Grid column-->

  <!--Grid column-->
  <div class="col-lg-4 col-md-6">

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <div class="view overlay">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).jpg" class="card-img-top" alt="">
        <a href="#">
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-body">
        <!--Title-->
        <h4 class="card-title">Card title</h4>
        <!--Text-->
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Button</a>
      </div>

    </div>
    <!--/.Card-->

  </div>
  <!--Grid column-->

  <!--Grid column-->
  <div class="col-lg-4 col-md-6">

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <div class="view overlay">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" class="card-img-top" alt="">
        <a href="#">
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-body">
        <!--Title-->
        <h4 class="card-title">Card title</h4>
        <!--Text-->
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Button</a>
      </div>

    </div>
    <!--/.Card-->

  </div>
  <!--Grid column-->

</div>
<!--Grid row-->

虽然现在样式有一些问题，我们稍后会处理。

image.png

Step 5

最后是添加 footer。

<!-- Footer -->
<footer class="page-footer font-small blue pt-4 mt-4">

  <!-- Footer Links -->
  <div class="container-fluid text-center text-md-left">

    <!-- Grid row -->
    <div class="row">

      <!-- Grid column -->
      <div class="col-md-6 mt-md-0 mt-3">

        <!-- Content -->
        <h5 class="text-uppercase">Footer Content</h5>
        <p>Here you can use rows and columns here to organize your footer content.</p>

      </div>
      <!-- Grid column -->

      <hr class="clearfix w-100 d-md-none pb-3">

      <!-- Grid column -->
      <div class="col-md-3 mb-md-0 mb-3">

          <!-- Links -->
          <h5 class="text-uppercase">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Link 1</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-3 mb-md-0 mb-3">

          <!-- Links -->
          <h5 class="text-uppercase">Links</h5>

          <ul class="list-unstyled">
            <li>
              <a href="#!">Link 1</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>

        </div>
        <!-- Grid column -->

    </div>
    <!-- Grid row -->

  </div>
  <!-- Footer Links -->

  <!-- Copyright -->
  <div class="footer-copyright text-center py-3">© 2020 Copyright:
    <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
  </div>
  <!-- Copyright -->

</footer>
<!-- Footer -->

image.png

您会看到我们的页脚已经包含颜色类别 “blue”，这使其变为蓝色。您可以使用MDB提供的 300多种定义的颜色类别之一轻松更改它

在下一课中，您将学习如何操作MDB颜色。

您可能还会注意到.text-center .text-md-left在小屏幕上将页脚元素居中的类。

好了，我们网站的主要布局已经完成，但是还有很多细节需要改进。

也就是说，导航栏和页脚的颜色略有不同，并且它们的链接是全角拉伸的，看起来不太好。同样，本<main>节各行中的内容彼此之间过于接近。另外，还有几件事应该修复。

因此，该网站肯定需要更多工作才能确保它看起来专业。在下一课中，我们将解决这个问题。