html - 如何在 HTML 的框下添加文本

问题描述

我试图在我的 HTML 中的这些框下添加文本，但它们一直在搞乱网站的设计，关于如何处理它的任何建议，我将添加当前图片及其外观以及我的 HTML下面的代码

PS。很抱歉附加链接图像，因为堆栈溢出不允许我直接添加图像。

下面是我的代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Daddy Roys</title>
</head>
<body>
    <section id="nav-bar">
        <nav class="navbar navbar-expand-lg navbar-light bg-light nav-background">
            <a class="navbar-brand" href="index.html">
                <img src="img/logo.png" width="100" height="100" alt="">
              </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
              <ul class="navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="#top">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#footer">Contact</a>
                </li>
              </ul>
            </div>
          </nav>
    </section>

    <section id="banner">
        <div class="trial">
        <div class="row">
            <div class="col-8">
                <p class="promo">Your home<br>away from home</p>
                <img src="img/table1.PNG" alt="" class="mini-pic mini-pic1">
                <img src="img/table2.PNG" alt="" class="mini-pic">
                <img src="img/table3.PNG" alt=""class="mini-pic">
            </div>
            <div class="col-4">
                <img src="img/lamp.png" class="img-fluid" alt="">
            </div>
        </div>
    </div>
    </section>

</body>
</html>

这是我的 CSS

  .navbar {
  background-image: url("../img/background.png");
}

nav .navbar-nav li a {
  color: white !important;
  margin-top: 50px;
  font-weight: bold;
  text-transform: uppercase;
}

#banner {
  color: black;
  padding-top: 5%;
}

.promo{
margin-top: -75px;

}

.col-4 {
  width: 400px;
  padding-top: 80px;
}

.mini-pic {
  width: 25%;
  padding: 10px;
  padding-top: 100px;
  margin-top: -30px;
}

.trial{
  font-size: 120px;
  font-weight: 600;
  padding-left: 120px;
}

标签： htmlcss

html - 如何在 HTML 的框下添加文本

问题描述

解决方案

推荐阅读